Tool used for managing Evolv created variants.
Drop the following snippet in the head of your webpage(s). Preferably as high as possible.
Note: You can find your "environment_id" in the Evolv manager or by contacting support.
<head>
<!-- evolv asset manager -->
<script
src="https://media.evolv.ai/asset-manager/releases/latest/webloader.min.js"
data-evolv-environment="<environment_id>"
></script>
</head>If you would like to only render css assets place data-evolv-js="false" into the script tag. If you would like to only render js assets place data-evolv-css="false" into the script tag.
This snippet handles the bulk of the work needed to run an experiment. It confirms or contaminates users and activates dormant variants when the current context matches the parameters of the experiment. The context is evaluated on things like page, demographics and more.
Once the snippet has loaded, firing an event can be done through the globally accessible client with:
evolv.client.emit('my-event');The global object evolv has other methods and properties that are now accessible within the context of your webpage. For a manually activated experiment you can access evolv.context and change the current context to match the requirements of your experiment. For more info on the accessible client methods and their uses see: javascript-sdk
There are 3 patterns of use that we foresee.
-
First is the one described above (simplest implementation). Place the asset manager web loader snippet onto the page, and it will append the css or js assets to the page's
<head>for you and will create a unique user and store the uid in local storage. -
The second is a small alteration of the first. Follow the same steps but pass in a uid using the
data-evolv-uidparameter on the script tag. With this approach no ids or information is stored on the client.
<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>However since it is unlikely that a uid will be entered statically, it is more likely to add this attribute in dynamically via a tag manager:
var evolvScript = document.createElement('script');
evolvScript.setAttribute('src', 'https://media.evolv.ai/asset-manager/releases/latest/webloader.min.js');
evolvScript.setAttribute('data-evolv-environment', '<environment_id>');
evolvScript.setAttribute('data-evolv-uid', '<uid>');
document.head.appendChild(evolvScript);- Third is a server side rendering approach. The two options above automatically append the needed css and / or js assets on the page for you. In this approach the implementer would render these assets serverside. Placing them on the page along with the asset manager webloader. This approach reduces the round trip calls needed for variant rendering and leads to a faster implementation.
<head>
<link rel="stylesheet" type="text/css" href="https://participants.evolv.ai/v1/<environment_id>/<uid>/assets.css">
<script type="text/javascript" src="https://participants.evolv.ai/v1/<environment_id>/<uid>/assets.js"></script>
<script
src="https://media.evolv.ai/asset-manager/releases/latest/webloader.min.js"
data-evolv-environment="<environment_id>"
data-evolv-uid="<uid>"
data-evolv-css="false"
data-evolv-js="false"
></script>
</head>can be passed in to contaminate participants where we try to render the javascript changes great this time in ms after domContentLoadedEventStart time.
Default is 60000ms
Evolv uses local storage by default - this method can only look up data stored in the same subdomain. If the user id is required to be used cross subdomain, this setting can be used.
true - will set the cookie on the current domain *.example.com (e.g.) can be used to set the cookie on the apex domain
<head>
<script type="text/javascript" src="https://participants.evolv.ai/v1/<environment_id>/<uid>/assets.js"></script>
<script
src="https://media.evolv.ai/asset-manager/releases/latest/webloader.min.js"
data-evolv-environment="<environment_id>"
data-evolv-timeout="<timeout-length-in-ms>"
data-evolv-use-cookies="<target domain or true>"
></script>
</head>To reapply all active keys, call
evolv.rerun();
To reapply a subset of active keys, pass in the prefix to apply the keys within
evolv.rerun('a1b2c3d4.e5f6g7h8');
A only popstate events are defined by browsers, not pushstate. This means Evolv cannot detect forward navigation events that do not change the URL. This is common in SPAs and can prevent Evolv from detecting the change and applying changes. Setting Evolv data-evolv-pushstate to true will apply a patch to the history.pushState that will dispatch a pushstate event
Sometimes you want to see what the page looks like with no Evolv optimizations running. To prevent Evolv 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.
For more about Evolv and what we do, please visit here.