- TLC Home Home
- Discussions & Ideas Discussions & Ideas
- Product Guides Product Guides
- Knowledge Base Knowledge Base
- Developer Docs Developer Docs
- Education Education
- Blog TLC Blog
- Support Desk Support Desk
This article shows how to use the Modal Offer extension with alternative trigger methods: scroll tracking and a timing delay.
In this article:
The Modal Offer extension relies on the DOM-Ready event to trigger the display of the configured modal popup. The following use cases explain alternative methods for triggering the popup.
Use Case 1, a Scroll Tracking Event Trigger, demostrates to trigger the modal popup when the visitor has scrolled past a specific portion of the page. For this example, the modal is triggered when a visitor scrolls through 75% of the page.
Use Case 2, a Time Delayed Trigger, demonstrates to trigger the modal popup when a period of time has elapsed since the page loaded. For this example, the modal is triggered after the visitor has been on the page for 20 seconds.
To use scroll tracking as the trigger for the modal popup, your configuration must perform the following:
To block the modal offer from displaying on its own you must add a condition that will always evaluate to false. This prevents the Modal Offer Extension from displaying on DOM-Ready. It doesn't matter which variable or value you use, as long as the condition will always evaluate to false. In the example below, the variable "tealium_environment" and value "nothing" are used.
This JavaScript Code extension will add scroll tracking to your page. It will trigger on each quartile of the page: 25%, 50%, 75%, and 100%. The variable "event_label" will contain the quartile value that will be used later to trigger the modal.
You can test the event directly by making this tracking call in the Console:
utag.link({ "event_name" : "user_scroll", "event_category" : "Behavior", "event_action" : "Scroll", "event_label" : 75, });
To add the scroll tracking extension:
if(!window.addEvent) {
window.addEvent = function(element, evnt, funct) {
try {
if(element.attachEvent) {
return element.attachEvent('on' + evnt, funct);
}
return element.addEventListener(evnt, funct, false);
} catch (e) {
try {
console.log('addEvent failed: ' + e);
} catch (e) {}
}
};
}
try {
utag.ut.scrollTracker = {
1: false,
2: false,
3: false,
4: false
};
addEvent(window, 'scroll', function() {
var html = document.documentElement;
var body = document.body;
var viewPort = {
yScroll: window.pageYOffset || (html && html.scrollTop) || body.scrollTop,
hScroll: document.compatMode === 'CSS1Compat' ? html.clientHeight || window.innerHeight || 0 : body.clientHeight || 0
},
windowHeight = Math.max(body.scrollHeight, html.scrollHeight, body.offsetHeight, html.offsetHeight, body.clientHeight, html.clientHeight),
quartile = Number(((viewPort.hScroll + viewPort.yScroll) / windowHeight * 4).toFixed(0));
for(var key in utag.ut.scrollTracker) {
if(Number(key) <= quartile && !utag.ut.scrollTracker[key]) {
utag.link({
"event_name": "user_scroll",
"event_category": "Behavior",
"event_action": "Scroll",
"event_label": key * 25
});
utag.ut.scrollTracker[key] = true;
console.log((key * 25) + "% viewed : " + utag.ut.scrollTracker[key] + " for: " + key + "/4 part viewed");
}
}
});
} catch (e) {
utag.DB('Error with performing the scroll tracker: ' + e);
}
Remember to set the publish location by clicking Approve for publish..., then selecting the environments, before you Save and Publish.
This extension will trigger the modal offer directly based on the scroll tracking event received. To add the modal trigger extension:
utag.modalExt_74.js
. utag.ut.loader({ src: utag.cfg.path + 'utag.modalExt_XXX.js?utv=' + utag.cfg.v, cb: function() { utag.extn.mdlW.load(); } });
The UID of the modal extension can be found in the Extensions list screen.
To setup a modal popup to appear after the visitor has been on the page for more than a period of time (e.g. 20 seconds):
We are going to reuse the Block Modal Offer Extension from the above scroll tracking example. If you have not created a Block Modal Offer Extension, please make sure to use the appropriate UID in your JavaScript code.
First, create a condition in your modal that will never evaluate to true. This prevents the Modal Offer Extension from displaying on page load / DOM Ready.
As an example, below I have picked a random UDO variable. It doesn't matter what variable or value you choose here, they just need to be something that will never evaluate to true. In the example below, the variable "tealium_environment" and value "nothing" are used.
var delayMilliseconds = 10000; setTimeout(function() { utag.DB("Modal delay extension triggered"); utag.ut.loader({ src: utag.cfg.path + 'utag.modalExt_XXX.js?utv=' + utag.cfg.v, cb: function() { utag.extn.mdlW.load(); } }); }, delayMilliseconds);
Copyright All Rights Reserved © 2008-2021