Using Google Tag Manager with eKomi Smart Surveys


Why use Google Tag Manager

Google Tag Manager allows adding custom "tags" snippets to any web page. These can be java script or code snippets that can be triggered based on certain defined conditions. This is perfect for eKomi Smart Surveys because they allow website owners to trigger surveys based on any defined conditions. Some of the example scenarios can be:

a. Trigger survey to capture exit-intent (e.g. why user is exiting the site without completing purchase)

b. Trigger survey after submitting a contact us form

c. Trigger survey on thank you page after a purchase

etc. 


Steps to use Google Tag Manager



  1. Generate Container Scripts:

    1. Go to https://tagmanager.google.com/ (all you need is a Gmail account).
    2. On the “Add a New Account” window, choose an “Account Name” (we suggest the name of your company).
    3. Then choose a “Container Name” (we suggest the name of your website).
    4. Select “WEB” for where to use the container.
    5. Click “CREATE” and accept the terms and conditions that pop up afterwards. Your Google Tag Manager code will pop up at the end of this process. Keep this open and handy.
  2. Install the Container Scripts:

    1. SHOP SYSTEM

      1. Find a GTM Plugin that is compatible with your Shop System by searching for the extension, and install it (this step will vary depending on your shop system).
      2. Once installed, configure the extension and connect it to the Container ID generated in step 1.
      3. Create a JavaScript variable named "iffTransactionId" in the “Thank you” / “Order success” page before the GTM code is loaded (i.e into the <header>, as high as possible within the tag.) and assign it the current order id.
        e.g. 

        <script type="text/javascript">
            var iffTransactionId = '<?php echo $orderId ?>';
        </script>

    2. HARD CODING

      1. Copy the first container code for the <header> that popped up at the end of part 1.
      2. Open the HTML file for the “Thank you” / “Order success” page of your website.
      3. Create a JavaScript variable named "iffTransactionId" and assign it the current order id into the <header>, as high as possible within the tag.
        e.g. 

        <script type="text/javascript">
            var iffTransactionId = '<?php echo $orderId ?>';
        </script>

      4. Paste the container code into the <header>, right after the above code.
      5. Copy the code for the <body> back on the GTM Page.
      6. Paste the second container code into the <body> section of your website page, immediately after the <body> tag. Save & upload the HTML page to your site.
  3. Create a new Tag in GTM

    1. Back on your Tag Manager Account, Click on “Add a New Tag”.
    2. Name your Tag (we suggest “Instant Review Form”).
    3. Click on “Tag Configuration” and select the “Custom HTML” Tag type.
    4. Insert the Instant Review Script that eKomi provided you. Please update shop id, form Id

      Smart Feedback Form Widget Code
      <!-- eKomiWidget START -->
      <div id="sff_127__widget-container"></div>
      <!-- eKomiWidget END -->
      <!-- eKomiLoader START, only needed once per page -->
      <script type="text/javascript">
          (function(w) {
              w['_ekomiServerUrl'] = 'https://smartforms.ekomi.com';
              w['_ekomiShopId'] = '665'; 
              w['_ekomiFormId'] = '22518';
              w['_ekomiTransactionId'] = 'transaction_id';
              w['_ekomiProductIds'] = 'product_ids';
              w['_ekomiWidgetWidth'] = '1020px';
              w['_ekomiWidgetHeight'] = '1290px';
              w['_ekomiEmbedWidget'] = '0';
              var s = document.createElement('script');
              s.src = w['_ekomiServerUrl']+'/script/widget.js?v='+ new Date().getTime();
              s.async = true;
              var e = document.getElementsByTagName('script')[0];
              e.parentNode.insertBefore(s, e);
          })(window);
      </script>
      <!-- eKomiLoader END, only needed once per page -->  
    5. Update w['_ekomiTransactionId'] = 'transaction_id'; with w['_ekomiTransactionId'] = 'ID variable from step#2 i.e. "iffTransactionId".
    6. Set the trigger for your tag by clicking “New Trigger” and then selecting “Page View” → “Some Page Views”.
    7. Select “Page URL” + “equals” + the URL of your order success page.
    8. Save the trigger, save the tag, and publish the container.
    9. If you don't want to get review for product, you can remove "w['_ekomiProductIds'] = 'product_ids';" from the script. 
    10. If you want to add product ids, please follow same steps.