How to: Fire tags in an infinite scroll container

Infinite scroll containers allow users to remain on the same page while continuing to load additional content.  Functionally this works the same way as loading a new page, only the content is appended at the bottom of the current page.  However, from the perspective of the TMS nothing has changed.  This means that tags normally fired on page load will not fire for the new page that was loaded.  By using an event listener we can ensure the proper tags are fired again each time the infinite scroll container loads, allowing the tags to continue to be served further down the page.

Implementation

1) Create a new variable, infiniteScrollVariable, in the TMS.  This should be an “event” type variable, with the event name “infiniteScrollTriggered”

2) Create a new rule named infiniteScrollRule that simply includes "infiniteScrollVariable triggered" as the condition

3) You now have two options on how to implement this rule on the relevant tags.  The first is the fire the event on pageload, as well as each time the infinite scroll container loads additional data.  The second option is to add a different rule for page load and use it in combination with the infinite scroll load event.  This allows more granular control of when tags are fired, so a tag could only be fired on pageload, or only fired after a infinite scroll load.

Option 1:

i) Trigger infiniteScrollVariable (you can use the following API call: `__mtm_data.push({ event : " infiniteScrollTriggered " });`) upon initial page load and after each "infinite scroll" load

ii) Assign the infiniteScrollRule to every tag that requires such action

Option 2:

i) Trigger infiniteScrollVariable upon each "infinite scroll" load (see above for API call)

ii) Create a rule named DOMLoadedRule using "DOMLoaded triggered" as the only condition

iii) Assign both DOMLoadedRule and infiniteScrollRule to every tag (this will make it trigger if either of those events occur) 

4) For every visual tag that requires such action check the box "Put multiple instances of the tag in multiple elements that match the selector" and set "On subsequent execution" option to "run in elements where the tag was not run in before" (otherwise every time it would retrigger in every box matching the placement selector)

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.