jQuery hashchange()

Tealium Expert
Tealium Expert

Hello All - I'm sure it's not best practice, but in a pinch, may I try using jQuery hashchange to fire a new page view?  

Tealium Expert
9 REPLIES 9

jQuery hashchange()

Gold Contributor
Gold Contributor

@mitchellt

 

I presume the requirement is for tracking via GA. If yes, I can't say this is best pracice. Nevetheless, we can try with below example.

 

Try this out:

ga('send', 'pageview', {'page': location.pathname+location.search+location.hash});

 

More information can be found here:

https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced?hl=en#fieldObject 

jQuery hashchange()

Anonymous
Anonymous

@mitchellt

 

If you wanted to trigger a utag.view event on the hashchange of your site, as you say you can use the onhashchange method in a pinch without the need for jQuery. The below would go into a pre-loader extension or DOM Ready depending on your configuration.

 

window.onhashchange = function(evt){
      if(!!utag){
	utag.view({});
      }else{
	console.log("uTag not avialable");
      }
  }

 

 

jQuery hashchange()

Tealium Expert
Tealium Expert

@Srinivasan Thanks for your input!

Tealium Expert

jQuery hashchange()

Tealium Expert
Tealium Expert

Thanks for the reply @Anonymous - I know it's not best practice, but at the moment it isn't practical to get server-side calls to utag.view() coded into the site.  I did find a similar block of code and added it to a pre-loader extension to get some tracking occurring on the site.  

 

Will the Tealium utag.js ever be able to handle basic SPAs on its own someday?  For example, on this particular site, the URL does update (the hashtag portion), but until I added this extension nothing was happening much to everyone's dismay.   SPAs are spreading like an epidemic and there's little documentation about how to track them in a variety of situations.  It's not always possible to have a site rebuilt only for the sake of web analytics implementation as you can imagine.

 

Can you explain the code sample a little more?  Is the "evt" agrument necessary beyond good practice / well-formed syntax?  Also can  you explain the if(!!utag) line?  Finally, why would I use Pre Loader over DOM Ready ?  

 

Thanks for your input/replies to the above - it is much appreciated!

Tealium Expert

jQuery hashchange()

Anonymous
Anonymous

Hi @mitchellt

 

One of the things about utag is that it always you to trigger an event whenever you which just by calling one of the methods. Not all SPAs use the onhashchange but I agree that there is no reason that there could not be an extension to support this, even adding this to the jQuery extesnion as a supported event. I will raise this with engineering as an enhancement.

 

The evt argument holds all the data about the triggered event, so for an onhashchange event it would give you the newURL and the oldURL which you could pass to the utag.view as one of your variables.

 

The if statement checks to make sure that the utag object is exists before trting to call the veiw method so that an error doesn't get generated if utag is not availabe for some reason. PreLoader Vs. DOM Ready, I say preloader only as this is excucuted when the container scripts loads rather than waiting for DOM Ready. But there is no perticular reason to choose one over the other.

 

Also here is some updated code that is better writtten which attaches an eventListener to the onhashchange rather forcing itself onto the onhashchange method

 

function _onhashChange() {
 console.dir(Array.prototype.slice(arguments))
}
if (document.addEventListener) {

    window.addEventListener("hashchange", _onhashChange, false);
} else if (document.attachEvent) {

    window.attachEvent("onhashchange", _onhashChange);
}

 

 

jQuery hashchange()

Tealium Expert
Tealium Expert

Thanks @Anonymous for the updated code and commentary.  Thanks also for elevating my ideas/concerns to engineering.

 

As I mentioned before, if this tactic to track a SPA is not really the best practice, should we mark your sample as a Solution?  Maybe it could be marked as a Workaround?  :)

 

Thanks and I welcome additional discussion from you and anyone reading!

Tealium Expert

jQuery hashchange()

Anonymous
Anonymous
We do have customers that use the above code to trigger utag.views on SPA sections of there site, so it is definitely a feasible solution that is in use in production. If you do have any issues implementing this please feel free to reach out to the support team who will be happy to assist where possible.

jQuery hashchange()

Tealium Expert
Tealium Expert

Hi again @Anonymous - thanks so much for your detailed replies/explanations, etc.  

 

My "saga" continues...

 

Since I realized one of the sites I have to track is a SPA and that all the traffic wasn't being recorded until implementing the onhashchange listener, I have since found another site which was coded to use the same URL for each of the three distinct pages of content it returns.  On this new site, it's not using Ajax or XHR, yet I need to detect that the content has changed/reloaded.  What are other listeners you can suggest for me to try?

 

Eventually I will get this particular site rewritten, but I need to get tracking established in the meantime, thanks for any ideas!

Tealium Expert

jQuery hashchange()

Tealium Expert
Tealium Expert

@Anonymous  - it's been a long while since we looked at this thread, but I could use a little help with the neat code snippet you provided above. Could you explain where I'd insert my code block that I want to execute upon trapping the onhashchange event?  


Thanks for any discussion you can add....

Tealium Expert
Public