e-satisfaction

The #1 Humanized Marketing Platform

Omnichannel: Google Tag Manager

Follow

Introduction

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

Information Needed

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

Browse Questionnaire Integration

Step 1: Create a Trigger for every page

Browse questionnaire integration 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, jq, 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' + (!!jq ? '.jq' : '') + '.min.js';
       r.parentNode.insertBefore(s, r);
   };

   if (w.attachEvent) {
       w.attachEvent('onload', l);
   } else {
       w.addEventListener('load', l, false);
   }
})(window, document, "YOUR-APPLICATION-ID", true, {});
</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.

browse.PNG

Checkout Questionnaire Integration 

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 the variable 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:

dataLayer.push({
   "email": X,
   "phone": Y,
   "transaction_id": Z,
   "transaction_date": W,
   "store_pickup": A,
   "store_id": XY,
   "event": "esat_purchase"
});

where X, Y, Z, W, XY are dynamic variables related to email (text), phone number (text), transaction id (text) and transaction date (date) and store id (text)

** "store pickup" (boolean), A 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 integration 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":

gtm_checkout.PNG
Create Trigger

The next step is to create a Page View 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


position.PNG

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. The final image of the Tag settings is the following:

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:

thankyoupage.PNG

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:

raw_data.PNG
Clicking on the instance details:

metdata.PNG

Was this article helpful?
0 out of 0 found this helpful

Have more questions? Submit a request