Extensions

10 Kudos

This article shows how to use the Modal Offer extension with alternative trigger methods: scroll tracking and a timing delay.

In this article:

Table of Contents Placeholder

Prerequisites

an instance of the Modal Offer Extension
a data layer variable named "event_label"
permission to use the JavaScript Code extension

How to Trigger the Modal Offer

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.

Use Case 1 - Scroll Tracking Event Trigger Setup

To use scroll tracking as the trigger for the modal popup, your configuration must perform the following:

Block the Modal - block the Modal Offer Extension from triggering at DOM-Ready
Scroll Tracking - set up a JavaScript Code Extension to listen for the 75% scroll tracking event
Trigger the Modal - set up up a JavaScript Code Extension to trigger the modal window to popup

This is an example of what your Extensions list will look like once you create all 3 extensions.

1.1 - Block the Modal

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.

1.1BlocktheModal.png

1.2 - Scroll Tracking

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,
});

1.2ScrollTracking.png

To add the scroll tracking extension:

Add a JavaScript Code extension.
Set the Title to "1.2 Listen for the 75% tracking event".
Set the Scope to "DOM Ready".
Copy and paste the following code into the 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.

1.3 - Trigger the Modal

This extension will trigger the modal offer directly based on the scroll tracking event received. To add the modal trigger extension:

Add a JavaScript Code Extension
Set the Title to "1.3 Trigger the Modal Popup"
Set the Scope to "All Tags"
Copy and paste the following code into the extension and change line 2 to match the UID of your modal extension. For example, if the UID of your modal extension is 74 the code would use 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.
Set the condition to: "event_label" contains 75
Set the publish location by clicking Approve for publish... then selecting the environments.
Save and publish

Use Case 2 - Time Delayed Trigger Setup

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):

Block the Modal Offer Extension from triggering on DOM Ready
Setup a JavaScript Code Extension to delay the modal window popup by 20 seconds. Your extension list should look something like this after adding the JavaScript Code extension as described below.

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.

2.1 - Block the Modal Offer Extension on DOM Ready

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.

1.1BlocktheModal.png

2.2 - Delayed Modal Extension Trigger

Add a JavaScript Code Extension scoped to "DOM Ready".

Copy and paste the following code into the extension.

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);

Set the delay time by modifying line 1, or var delayMilliseconds = 10000;
Update the UID in line 8, represented by XXX, to the UID created for your block modal extension. In our example the XXX number in 'utag.modalExt_XXX.js?utv=' should be set to '743'.
Your extension should look something like this:
Save and publish.