- TLC Home Home
- Discussions Discussions
- Documentation Documentation
- Knowledge Base Knowledge Base
- Education Education
- Blog Blog
- Support Desk Support Desk
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?
Solved! Go to Solution.
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
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"); } }
@Srinivasan Thanks for your input!
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!
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); }
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!
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!
@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....
Copyright All Rights Reserved © 2008-2023