How to track content blocks of long page through virtual URLs in GA?

[siegert_dierick]

My homepage is 1 long page which exists of different contact blocks. Each content block is also reachable via a dedicated URL, but the site is build so that the URL does not change when you scroll down. Therefore I want to send virtual URLs to GA from the moment the content block is visible. Ideally the virtual URL is only send from the moment the content block is visible for at least 2 or 3 seconds. My idea was to use the jquery handler extension. I already used the Web Companion tool to select the content block titles, and configured them to be triggered on 'focus' as a view. Afterwards I created a datasource to link this tag to a variable. And then I mapped it to GA and defined to override the pageName. Strangely enough, the GA code was not active anymore from the moment the Tealium version was activated on my site. even when I deactivated the mapping from GA, the GA code did not work. It was only solved when I also deactivated the extension. Anyone has an idea how to apply the correct configuration steps? My site is www.onlinefocus.be tx Siegert

[dan_george]

Hi Siegert, First your site is using jQuery version 1.10.2 so you'll need to use the "jQuery onHandler (1.7 and above)" instead of the current configured "jQuery clickHandler (1.6 and below)". Second, this type of tracking is not supported as part of the default onHandler events. We only support click type events, show/hide of content based on CSS, and form focus change events, not scrolling. You will need to create these with JavaScript extensions scoped to "Dom Ready". It may be along the lines of: jQuery(window).scroll(function() { //do something }); I'm not exactly a jQuery guru but we do have some guys on the team that may be able to better explain how this can be done.

[jared_hislop]

Hey Siegert, This is pretty custom work but very doable. We have similar things like this implemented for other clients. The only thing that may cause issues is this statement, "Ideally the virtual URL is only send from the moment the content block is visible for at least 2 or 3 seconds." We could probably do some sort of setTimeout to trigger after a specified time (2-3 seconds). What we've done in the past is find the number of pixels where these content blocks start then we fire the request when a user has scrolled past those content blocks. Another thing we've done is set it so there are specified intervals where we trigger the request, like every 250 pixels of scrolling. Your use case is slightly different where you want to track specific elements when they become visible for a certain amount of time. Here is a JavaScript function that will check if the element is scrolled into view: function isScrolledIntoView(elem) { var docViewTop = $(window).scrollTop(); var docViewBottom = docViewTop + $(window).height(); var elemTop = $(elem).offset().top; var elemBottom = elemTop + $(elem).height(); return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); } Then you would use something like this: $(window).scroll(function() { if(isScrolledIntoView("")) { alert('visible'); // do your logic to fire events here } }); This will return a boolean but you can also do some logic if true. Or if you know the amount of pixels where the content blocks begin we could repurpose some of the existing code we have for your scenario. Hopefully this has given some ideas. I would suggest reaching out to your Account Manager for further guidance as the commentary could become too lengthy for this post. Then we can post the solution here afterward.

[christopher_dav · Accepted solution]

Hi Siegert, I'm going to expand on Dan's comment a little bit. jQuery by itself doesn't provide this sort of tracking. However, I took a look at your site and it looks like you are already using the Viewports jQuery plugin. We can use that to monitor which elements are visible within the visitor's viewport. To setup the tracking you'll need to create a new JavaScript extension scoped to DOM Ready that will handle the event tracking. Inside the extension you can specify what should happen when a visitor scrolls into a new section. Here is an example you can try: // This var remembers the previous section for us var previous = ""; // Watch for scroll events jQuery(window).on("scroll", function(event) { var message = ""; // When a section element is in view jQuery("section:in-viewport").each(function() { message = message + jQuery(this).attr("id"); }); // If the section is different than the last one if (message != previous) { setTimeout(function(){ // Run code here after 2 seconds }, 2000); previous = message; } });

[siegert_dierick]

Tx all for your feedback. Based on Dan's feedabck it may be the easiest to use the jquery extension in combination with the visibility of the CSS content. I will first try this method, before going into the scripts suggested by Christopher and Jared.

[siegert_dierick]

Tx all for your feedback. Based on Dan's feedabck it may be the easiest to use the jquery extension in combination with the visibility of the CSS content. I will first try this method, before going into the scripts suggested by Christopher and Jared.

[siegert_dierick]

Tx all for your feedback. Based on Dan's feedabck it may be the easiest to use the jquery extension in combination with the visibility of the CSS content. I will first try this method, before going into the scripts suggested by Christopher and Jared.

[siegert_dierick]

Hello I followed next steps for the 'About' content block: 1. Add jquery 1.7 and above extension, with next config: - jQuery Selector: #about.content-section.section-block div.inner-section p.sub-title - Trigger on: Show - Tracking Event: View - Set: 'About.js' to JS Code: #about.content-section.section-block div.inner-section p.sub-title 2. Created Data Object, named 'About', within the Data Source (this event was done when before the 'set' action in previous event) 3. Mapped the Data Object in the GA tag as a ga_pageOverride Unfortunately this setting will not trigger a GA call. Any idea what I am doing wrong? Tx Siegert

[jared_hislop]

Siegert, In your second question, when you're defining the data like this: Set: 'About.js' to JS Code: #about.content-section.section-block div.inner-section p.sub-title Try using something like this instead: Set: 'About' to JS Code: jQuery(this).text()

[roshan_gonsalko]

Hi Siegert, I have emailed you a solution but I have posted two solutions using the Viewport jQuery plugin based on the solutions that Dan, Chris and Jared have proposed: (1) Instantly fire Virtual Page Views http://www.snipsave.com/user/profile/roshangonsalkora#6449 (2) Fire Virtual Page View once viewed for 2 seconds http://www.snipsave.com/user/profile/roshangonsalkora#6448 I would recommend solution (2) as it fires far fewer calls and is much lighter on the browser for a better user-experience. Thanks!