e-satisfaction

The #1 Humanized Marketing Platform

Integration through Google Tag Manager (Browse & Checkout Questionnaire)

Follow

Preparation - Collect important IDs

- Application ID (APPLICATION ID)

- Browse Questionnaire ID (BROWSE Q ID)

- Checkout  Questionnaire ID (CHECKOUT Q ID)

More information on how to find these IDs here.

Browse Questionnaire Integration

Step 1 - Create a Trigger for every page 

Browse questionnaire integration code will load from all pages of the site.

You will be able to 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 (click here).

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: 

create a new Custom HTML tag

- 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 image 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 bellow table the esat_purchase event we created at 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

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

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

metdata.PNG

 

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

Comments