Skip to main content

Adding the Evolv AI script to your website

Joshua Barnard
  • Updated

This article explains the different ways to integrate Evolv AI's Experience Accelerator with your website.

Do you need to integrate with React?

On this page:

What is the Experience Accelerator?

The "Experience Accelerator" is how Evolv delivers optimizations to websites. It's a JavaScript snippet that is placed on a website. When the page loads, it downloads and executes the snippet, which is responsible for allocating users to experiments and rendering them on the page. The speed of this execution is key to running a seamless optimization.

Implementation

The Evolv snippet is best implemented synchronously on the page, rather than via a tag manager. It reduces page flicker to give your experiments the best chance of success.

Read more about the difference between synchronous and asynchronous implementation and implementation via a tag manager.

The snippet can also be configured to behave differently depending on your situation.

Basic Case

The simplest integration is to add the following snippet in the head of the HTML - replacing <environment_id> with your key.

This will use the default Evolv settings for the integration. 

<head>
  <script
      src="https://media.evolv.ai/asset-manager/releases/latest/webloader.min.js"
      data-evolv-environment="<environment_id>" >
    </script>
  </head>

Known User Id

Evolv will generate a user ID to allocate experiences and attribute events by default.

When to use it

If you have a known user ID, then it can be passed into the integration - this will:

  • Improve the accuracy of tracking as Evolv does not need to rely on the browser persisting our user ID
  • Improve consistency with other analytics tools by using the same user identification
<head>
  <script
      src="https://media.evolv.ai/asset-manager/releases/latest/webloader.min.js"
      data-evolv-environment="<environment_id>"
      data-evolv-uid="<uid>" >
    </script>
  </head>

If the user ID isn't available when the script loads, you can lazy-load the ID by using the "data-evolv-lazy-uid" attribute.

<head>
  <script
      src="https://media.evolv.ai/asset-manager/releases/latest/webloader.min.js"
      data-evolv-environment="<environment_id>"
      data-evolv-lazy-uid="true" >
    </script>
  </head>

Restricting Change Types

You can select if Evolv serves css and js.

When to use it

If you have a security policy that does not permit dynamic 3rd party javascript being applied to your site then you can use css only changes.

<head>
  <script
      src="https://media.evolv.ai/asset-manager/releases/latest/webloader.min.js"
      data-evolv-environment="<environment_id>"
      data-evolv-css="true"
      data-evolv-js="false" >
    </script>
  </head>

Setting Timeout

When to use it

If you want to ignore users who take too long to apply the optimization changes then you can use this configuration to limit how long you will wait.

<head>
  <script
      src="https://media.evolv.ai/asset-manager/releases/latest/webloader.min.js"
      data-evolv-environment="<environment_id>"
      data-evolv-timeout="10000" >
    </script>
  </head>

Cross-Subdomain

When to use it

Evolv stores the user id in local storage. This cannot be read across subdomains (e.g. domain1.example.com to domain2.example.com). If your optimization is crossing subdomains set this to the domain your users will be active across (in this example .example.com). This will allow Evolv to recognize the user, serve them the correct experience and attribute events correctly.

<head>
  <script
      src="https://media.evolv.ai/asset-manager/releases/latest/webloader.min.js"
      data-evolv-environment="<environment_id>"
      data-evolv-use-cookies=".example.com" >
    </script>
  </head>

Single Page Applications (SPAs)

Single page applications (i.e. applications using frameworks like React or Angular) allow you to update the page and url without reloading fully. Sometimes this can cause Evolv to not see that the URL has changed. This setting will allow Evolv to recognize the URL has updated and correctly apply changes.

When to use it

If you use a SPA framework and your are seeing changes not applying when they are configured to match the url.

<head>
  <script
      src="https://media.evolv.ai/asset-manager/releases/latest/webloader.min.js"
      data-evolv-environment="<environment_id>"
      data-evolv-pushstate="true" >
    </script>
  </head>

Tracking Consent

To prevent Evolv from storing user ids in cookies or local storage until a user has consented

When to use it

If Evolv is generating the user ids, but for tracking compliance, no information must be stored in cookies or local storage.

<head>
  <script
      src="https://media.evolv.ai/asset-manager/releases/latest/webloader.min.js"
      data-evolv-environment="<environment_id>"
      data-evolv-require-consent="true" >
    </script>
  </head>

Changes will be requested and rendered, but no information on the user stored and the user will not be included in the experiment until

window.evolv.markConsented()

has been called.

This method should be called:

  1. When a user consents to cookies.
  2. When the page is load and you know the user has already consented.

Preventing Evolv Running

Sometimes you want to see what the page looks like with no Evolv optimizations running. To prevent Evolv from running, just add:

?evolvBlockExecution=true

or

#evolvBlockExecution=true

to your URL.

To allow Evolv to run again just reload the page with this value set to false. Alternatively, this block will clear when the session storage for the site is cleared.

Related articles

Related articles