Introduction

This article will guide you through the simple steps of installing e-satisfaction using Google's Tag Manager library, for Omnichannel Applications.

Information Needed

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

Setup Google Tag Manger

Step 1: Create a Trigger for every page

Browse questionnaire installation code will load on all the pages of the website.

You can control in which pages you do not want the Browse questionnaire to be displayed through the blacklist / whitelist settings of the browse questionnaire in e-satisfaction Dashboard.

Therefore, in Tag Manager, the trigger to be used will refer to all e-shop pages.

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 e-shop. Before submitting the changes, it would be good to click on preview button.

Once the page loads, the browse tag you just created will appear and (depending on the browse questionnaire) will display the box that will appear if you minimize the debug window of Tag Manager:

Checkout - Push Metadata

Step 1: Create an Event for e-satisfaction.com

In the variables section of GTM you create a Custom event named "esat_purchase"

Step 2: Create Variables in GTM

The next step is to create the variables that will contain the Checkout questionnaire metadata.

Some of the variables we ask you to create may already exist, just make sure you have all of them! :)

The minimum metadata we suggest you to use for the checkout Questionnaire are displaying below. (example from the Tag Manager console)

• email,
• phone,
• store_pickup,
• store_id,
• transaction_date,
• transaction_id

You can notice in the table below the esat_purchase event we created during step 2.

Step 3: 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 the Thank you page of the Order, using the following way (with some example values):

dataLayer.push({
    "email": "john@doe.com",
    "phone": "",
    "transaction_id": "TR-123",
    "transaction_date": "January 21st, 2019, 17:35:21",
    "store_pickup": "1",
    "store_id": "ST-123",
    "event": "esat_purchase"
});

* "store pickup" (boolean): Should be 0 if the option is home delivery and 1 for store pick up option

Step 4: Create a Trigger for Checkout

The e-satisfaction.com checkout installation code should only be loaded on the thank you page. To do this in Tag manager, we use the Triggers functionality and create a trigger which is triggered only on the Thank you page page (in our example, we use the rule the URL contains "order_confirmation":

Create Trigger

The next step is to create a Page View - Window Loaded trigger which will be triggered only in Page URLs which contain the text you entered.

Step 5: Configure at which position the Checkout questionnaire will be displayed

1. Go to the e-satisfaction Platform --> Checkout Distribution --> Web Integration. 
2. Find the Position element (as shown on the below image)
3. In our example we chose the questionnaire to be displayed after the class alert-success

IMPORTANT: If the position of the questionnaire will located in a class you will have to define the element like this: .alert-success

In cases the questionnaire is located inside/before/after a id you will have to define the element like this: #alert-success

Step 6: 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("CHECKOUT-QUESTIONNAIRE-ID", {
    responder: {
        "email": "{{email}}",
        "phone_number": "{{phone}}"
    },
    questionnaire: {
        "transaction_id": "{{transaction_id}}",
        "transaction_date": "{{transaction_date}}",
        "store_pickup": "{{store_pickup}}",
        "store_id": "{{store_id}}"
    }
});
</script>

The last step in setting the tag is to specify that it will only displayed on the Checkout page, which we do by linking the checkout Trigger we created in Step 5:

Step 7: Save and Preview

e-satisfaction.com questionnaire should appear in your e-shop at checkout.

Before submitting your changes, it would be good to click the preview button and complete an online checkout.

In the thank you page you should see the questionnaire and the tag manager trigger as in the screenshot:

If all the steps above are successfully completed, the questionnaire will displayed and on the Raw data table (dashboard screen) you should be able to see the submitted questionnaire with the metadata listed:

Clicking on the instance details: