How to implement Advanced Content Tracking with GA

Gold Contributor
Gold Contributor
I am trying to figure out the easiest way to implement Advanced Content Tracking with GA based on the information found here http://cutroni.com/blog/2014/02/12/advanced-content-tracking-with-universal-analytics/ I have tried implementing the code below using a custom tag container but I just get "loaded" in the web companion. I am not sure what the issue is or if I implemented it incorrectly. Sample pages: 1. http://www.trendmicro.com/us/home/products/software/maximum-security/index.html 2. http://www.trendmicro.com/us/home/products/software/index.html jQuery(function($) { // Debug flag var debugMode = false; // Default time delay before checking location var callBackTime = 100; // # px before tracking a reader var readerLocation = 150; // Set some flags for tracking & execution var timer = 0; var scroller = false; var endContent = false; var didComplete = false; // Set some time variables to calculate reading time var startTime = new Date(); var beginning = startTime.getTime(); var totalTime = 0; // Get some information about the current page var pageTitle = document.title; // Track the aticle load if (!debugMode) { ga('send', 'event', 'Reading', 'ArticleLoaded', pageTitle, {'nonInteraction': 1}); } else { alert('The page has loaded. Woohoo.'); } // Check the location and track user function trackLocation() { bottom = $(window).height() + $(window).scrollTop(); height = $(document).height(); // If user starts to scroll send an event if (bottom > readerLocation && !scroller) { currentTime = new Date(); scrollStart = currentTime.getTime(); timeToScroll = Math.round((scrollStart - beginning) / 1000); if (!debugMode) { ga('send', 'event', 'Reading', 'StartReading', pageTitle, timeToScroll, {'metric1' : timeToScroll}); } else { alert('started reading ' + timeToScroll); } scroller = true; } // If user has hit the bottom of the content send an event if (bottom >= $('. detail1 ').scrollTop() + $('. detail1 ').innerHeight() && !endContent) { currentTime = new Date(); contentScrollEnd = currentTime.getTime(); timeToContentEnd = Math.round((contentScrollEnd - scrollStart) / 1000); if (!debugMode) { if (timeToContentEnd < 60) { ga('set', 'dimension5', 'Scanner'); } else { ga('set', 'dimension5', 'Reader'); } ga('send', 'event', 'Reading', 'ContentBottom', pageTitle, timeToContentEnd, {'metric2' : timeToContentEnd}); } else { alert('end content section '+timeToContentEnd); } endContent = true; } // If user has hit the bottom of page send an event if (bottom >= height && !didComplete) { currentTime = new Date(); end = currentTime.getTime(); totalTime = Math.round((end - scrollStart) / 1000); if (!debugMode) { ga('send', 'event', 'Reading', 'PageBottom', pageTitle, totalTime, {'metric3' : totalTime}); } else { alert('bottom of page '+totalTime); } didComplete = true; } } // Track the scrolling and track location $(window).scroll(function() { if (timer) { clearTimeout(timer); } // Use a buffer so we don't call trackLocation too often. timer = setTimeout(trackLocation, callBackTime); }); });
2 REPLIES 2

How to implement Advanced Content Tracking with GA

Employee Emeritus

Mark There are many ways to solve for the question above. First part you will want to learn about is triggering a Google Analytics event via Tealium. Here is one post that discusses the topic: https://community.tealiumiq.com/t5/Tealium-iQ/How-To-Guide-Event-Tracking-With-Google-Analytics/ta-p... Another post that talks about utag.link: https://community.tealiumiq.com/t5/utag/utag-link-and-utag-view/ta-p/11888 Once you understand that the code will now call utag.link and not ga('send'... Then you will want to add the code above with the modifications to a Tealium Extension scoped to DOM Ready. I did not have time to test this solution as I am about to run into a meeting. If you continue to have questions, feel free to reach out to your Tealium Account Manager and a Tealium Engineer can help work through your specific use case.

How to implement Advanced Content Tracking with GA

Bronze Contributor
Bronze Contributor
@Mark, for some reason I cannot comment directly on your question but I can reply to Brians. Definitely follow Brian's advice, you should be firing Tealium calls not GA calls and it will be very simple for you to convert this script. However, the problem you're facing is something I noticed on this script. You'll see that running the script you get a start and finish even fire immediately after beginning to scroll. I made the following modification at the end of the script in order to fix it. You'll want to implement this as well as following Brian's suggestion:     $(window).scroll(function() { if (timer) { clearTimeout(timer); } if (!scroller) trackLocation();           // Use a buffer so we don't call trackLocation too often.         timer = setTimeout(trackLocation, callBackTime);     });
Public