How to add the Evolv snippet with a Tag Manager – Evolv AI

This article walks you through adding the Evolv "Experience Accelerator" snippet to your website using any tag manager.

For the best performance, implement the Evolv snippet directly in the source code. Implementation via a tag manager is less performant and should only be used as a last resort.

Looking for help with Google Tag Manager?

On this page:

Create the Evolv tag
Test the published tag

Create the Evolv tag

Every tag manager is different, but they all have one thing in common; the tag.

These instructions are generic advice. Some elements below may differ depending on your tag management system.

Create the tag, add the necessary JavaScript, set the trigger rules and publish your changes.

Create a new tag that lets you use custom HTML.

Add the following JavaScript to use the standard Evolv snippet.

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

Replace <EVOLV ENV ID> with your actual environment ID. You can find the environment ID in the Manager or ask your Evolv contact.
Some additional data attributes may be required. Create a Zendesk ticket if you need help.

Add a trigger/firing rule to the tag for where you want the snippet to appear.
- Allow the tag to run as quickly as possible on the page, to reduce lag time when optimizations are running.
- We recommend adding the snippet to every page of your website so there are no restrictions during testing.
- We understand this is not the case for every customer; select the pages appropriate to your situation.
Use your tag manager's preview/debug feature to check that the tag is firing correctly.
Publish the new tag.

Testing the published tag

Now that the tag is live, we can check that the Evolv snippet is working correctly. These instructions assume you are using Chrome, but you can adapt them to suit other browsers.

Open the website in Chrome.
Open the Developer Tools 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, the raw JavaScript.
  2. The second is the Evolv snippet that got added to the DOM after the tag was executed. Here's an example of how that looks:
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.

Create the Evolv tag

Testing the published tag

Related articles