Step by Step to implement waypoints in Tealium

[defelicemattia]

Hi Community,

I am trying to implement a scroll down tracking for some of our web pages and came across this post 

https://community.tealiumiq.com/t5/Tealium-iQ/I-was-wondering-if-it-was-possible-to-set-up-an-event-...

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.

[kathleen_jo]

Hello @defelicemattia. Let's start with these articles:

• https://community.tealiumiq.com/t5/Tealium-iQ/jQuery-onHandler-Extension-jQuery-v1-7-and-up/ta-p/986...
• https://community.tealiumiq.com/t5/Tealium-iQ/Firing-Non-Page-Load-Tags-Using-the-jQuery-Handlers/ta...
• https://community.tealiumiq.com/t5/Productivity-Tools/Determine-Version-of-jQuery-on-a-Site/ta-p/511...
• https://community.tealiumiq.com/t5/Tealium-iQ/Using-jQuery-waitUntilExists-to-modify-page-elements-t...

Let us know how it goes. We are here to help! :-)

[davidcreason]

@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. 

1. In Tealium you will want to add a Javascript Code extension. 
   
   
   
   
2. Scope the extension to DOM Ready and add the attached code (jquery.appear.js or find it here: jQuery Appear Git Repo) into the extension. The extension will need to be higher in the extensions list than any extensions using the new .appear() method.
   
   
   
   
3. Add another Javascript Code Extension, this will handle the tracking when the page element comes into view and will call utag.view(). The code within this extension will vary depending on the element(s). If you only had one <h3> tag on the page and wanted to track it an example would be something like the following:

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.