- TLC Home Home
- Discussions Discussions
- Documentation Documentation
- Knowledge Base Knowledge Base
- Education Education
- Blog Blog
- Support Desk Support Desk
04-08-2016 04:21 AM
Hi Community,
I am trying to implement a scroll down tracking for some of our web pages and came across this post
Unfortunately I am was not able to get it done and I was wondering if anybody from the community could help me. What I am trying to achieve is exactly what the post say "firing a virtual pageviews or event when reaching an h3 element on the page" and it would be great if you could drive me through the process step by step.
Thank you very much in advance.
04-08-2016 11:17 AM - edited 04-08-2016 11:20 AM
Hello @defelicemattia. Let's start with these articles:
Let us know how it goes. We are here to help! :-)
04-08-2016 02:48 PM
@defelicemattia sounds like you want to trigger a page view (utag.view()) when the user reaches a certain point in your page, in this case, when a particular <h3> element is scrolled into view. If that's correct, the onHandlers may not be able to do what you need. Instead a bit of custom code is needed. There is more than one solution, below is one possible option that can be implemented via Tealium iQ. This requires the site to be running jQuery.
var scrolled_into_view = false; // track to only fire first time element comes into view $("h3").appear(); $("h3").on("appear", function() { console.log("visible"); if (!scrolled_into_view) { console.log("fire event here"); utag.view(); } scrolled_into_view = true; // element has been seen on the page, flag to stop sending pageviews });
Make sure to do plenty of testing before you implement in production! This fires the event multiple times which is why the above code tracks the first view. Otherwise, every time a user scrolled on the page and the element was in the viewport it would send a pixel out.
Hope this helps get you what you need. Let us know if you have any questions.
Copyright All Rights Reserved © 2008-2023