This article walks you through adding the Evolv "Experience Accelerator" snippet to your website using any tag manager.
Looking for help with Google Tag Manager?
Table of Contents
Creating the Evolv tag
Every tag manager is different, but they all have one thing in common; the tag.
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:
- The first is the script you added to the tag itself, the raw JavaScript.
- 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.