Integrating the Experience Accelerator with Google Tag Manager

This article walks you through adding the Evolv Experience Accelerator snippet using Google Tag Manager (GTM).

Table of Contents

• Create the Evolv tag
• Preview and publish the changes

Creating the Evolv tag in Google Tag Manager

1. Open Google Tag Manager.
2. Navigate to the Tags section.
   
3. Click the New button.
4. Name the new tag "Evolv Integration” and click the grey circle with a lego inside.
5. For tag type, choose “Custom HTML”.
6. Add the following code in the “HTML” section.Text version of the code in the above screenshot:

   
   <script>
       var evolvEnv = '<EVOLV ENV ID>';
       var evolvScript = document.createElement('script');
       evolvScript.setAttribute('src', 'https://media.evolv.ai/asset-manager/releases/latest/webloader.min.js');
       evolvScript.setAttribute('data-evolv-environment', evolvEnv);
       evolvScript.setAttribute('data-evolv-pushstate', 'true');
       document.head.appendChild(evolvScript);
    </script>

7. Under “Triggering”, select “All Pages”.

Previewing and publishing the changes

1. In Google Tag Manager, select the PREVIEW option.
   • Enter the website's URL when prompted.
     
2. Check for the Evolv tag in the Summary view of the Google Tag Manager preview tab.
   • You might need to reload the website tab first.
   • If you don't see the tag, check the tag settings and try again.
   • If you do see the tag, there's a good chance the Evolv Experience Accelerator snippet is loading.
     
3. Open the Developer Tools on the website page and go to the Elements tab.
   • Search for "webloader" and find the script you added in the tag.
   • You'll see two instances of the webloader:
     1. The first is the script you added to the tag itself.
     2. The second is the Evolv snippet that got added to the DOM after the tag was executed. Here's an example of what that looks like.
        
4. Lastly, open the Network tab, add a filter for "evolv", then reload the page.
   • Confirm you have the following network requests.
   • If you don't see these requests, check the JavaScript in the tag you created.
     • See Experience Accelerator Integration for help on what to include in the script.
       
5. Publish the latest version of the container.
6. Now that you're out of preview mode, check the website again.
   • Confirm the script is present and the network requests are being made.