Introduction

This article will guide you through the simple steps of integrating e-satisfaction using Google's Tag Manager library.

Information Needed

Gather all the required data as pointed out in the Web Integration article, in the section "Information Needed".

Setup Google Tag Manger

Step 1: Create a Trigger for every page

Installation code will load on all the pages of the website.

Step 2: Create the Tag

The next step is to create the Tag containing the e-satisfaction.com code.

To do this in Tag manager you follow these steps: 

1. Create a new Custom HTML tag
2. Paste the following code inside.

<script>
(function (w, d, id, c) {
    // Define e-satisfaction collection configuration
    w.esat_config = {application_id: id, collection: c || {}};

    // Update metadata
    w.Esat = w.Esat || {};
    w.Esat.updateMetadata = function (q, m) {
        w.esat_config.collection[q] = w.esat_config.collection[q] || {};
        w.esat_config.collection[q].metadata = m;
    };

    // Setup script
    var l = function () {
        var r = d.getElementsByTagName('script')[0], s = d.createElement('script');
        s.async = true;
        s.src = 'https://collection.e-satisfaction.com/dist/js/integration' + (!!w.jQuery ? '' : '.jq') + '.min.js';
        r.parentNode.insertBefore(s, r);
    };

    // Attach script or run script if document is loaded
    "complete" === d.readyState ? l() : (w.attachEvent ? w.attachEvent("onload", l) : w.addEventListener("load", l, false));
})(window, document, 'YOUR-APPLICATION-ID', {});
</script>

NOTE: If your site is powered with RequireJS, check the Web Integration article to get the proper script.

The last step in setting up the tag is to specify that it will displayed on all pages. The final screenshot of the Tag settings is the following:

Step 3: Save and Preview

e-satisfaction.com should now be displayed in your website. Before submitting the changes, it would be good to click on preview button.

Based on the questionnaire integration type, you should be ready to see the questionnaire displayed on your website:

Push Metadata

Information Needed

Gather all the required data as pointed out in the Push Metadata article, in the section "Information Needed".

Step 1: Create Variables in GTM

The first step is to create the variables that will contain your values towards e-satisfaction. Here are some example variables that you can use for your users:

• email
• phone
• visitor

Step 2: Push the variables in the Tag Manager (development required)

Now that you have created the variables, the next step is to "give" their values to e-satisfaction.com through pushing them in Tag manager. 

 To do so, you will have to push the values of the variables in any page, using the following way:

dataLayer.push({
    "email": X,
    "phone": Y,
    "visitor": Z
});

* where X, Y, Z are dynamic variables related to email (text), phone number (text) and visitor (boolean)

** "visitor" (boolean), Should be 0 for false and 1 for true accordingly

Step 3: Create the Trigger

The next step is to create a Page View - Window Loaded trigger which will be triggered by a set of conditions that you will define. It's important to allow the window to load so that the e-satisfaction library has been loaded.

For example, in case you need to push metadata whenever your e-shop's checkout page appears, you could create something like the following:

Step 4: Create the Tag

The next step is to create the Tag containing the e-satisfaction.com code. To do this in Tag manager you create a new Custom HTML tag and paste the following code inside. 

<script>
// Push Checkout Metadata
Esat.updateMetadata("YOUR-QUESTIONNAIRE-ID", {
    responder: {
        "email": {{email}},
        "phone_number": {{phone}},
        "visitor": {{visitor}}
    }
});
</script>

The last step in setting the tag is to specify the trigger in which it will be displayed. Using the example above, we can link the tag to the Checkout page trigger:

Step 5: Save and Preview

e-satisfaction.com questionnaire should appear in your website. On the trigger pages you should be able to see the questionnaire and the tag manager trigger as in the screenshot:

Troubleshooting

In case you face any problem with the display of a questionnaire please follow our troubleshooting guides here.