Reply
Highlighted
Frequent Visitor
Posts: 41
Registered: ‎01-04-2016

jQuery hashchange()

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?  

Reply
0 Kudos
Contributor
Posts: 46
Registered: ‎11-15-2015

Re: jQuery hashchange()

@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 

Tealium Employee
Posts: 11
Registered: ‎09-22-2015

Re: jQuery hashchange()

@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");
      }
  }

 

 

Frequent Visitor
Posts: 41
Registered: ‎01-04-2016

Re: jQuery hashchange()

[ Edited ]

@Srinivasan Thanks for your input!

Frequent Visitor
Posts: 41
Registered: ‎01-04-2016

Re: jQuery hashchange()

Thanks for the reply @simon - 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 Employee
Posts: 11
Registered: ‎09-22-2015

Re: jQuery hashchange()

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);
}

 

 

Frequent Visitor
Posts: 41
Registered: ‎01-04-2016

Re: jQuery hashchange()

Thanks @simon 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 Employee
Posts: 11
Registered: ‎09-22-2015

Re: jQuery hashchange()

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.
Reply
0 Kudos