React, and other SPAs present a unique challenge for experimentation. This is especially true when shadow DOMs are involved. The Evolv platform provides several easy-to-use tools that help overcome these challenges.
The first step for integration is to decide between including the asset manager directly as an import into your React application or using the Evolv Web Loader. This guide will focus on the latter, as it is easier to get started. When integrating when analytics tools that are part of your React application, you should consider importing the asset manager directly.
Step 1: Add the Evolv Web Loader file to the host page
Locate the host page of your React application.
The default location of this file is /public/index.html under the root of your package.
Open the file for editing in your favorite plaintext editor. The default index.html file should look something like the following.
If you have analytics integrations such as Amplify or Google Analytics, please ensure the Evolv Web Loader is inserted above these. It will be responsible for visual changes and loading CSS context with the highest loading priority. This is very important; adding this incorrectly will lead to slowness in rendering variants and cause timing issues with some variants.
Insert the Evolv Web Loader script reference within the “head” element
Ensure that the script reference includes a full closing script tag (</script>) as this is required for correct parsing by the browser.
The script reference should contain the “data-evolv-pushstate” attribute set to true. This allows the Evolv Experience Accelerator to observe and respond to URL changes made through the React router or similar URL-based state systems.
The code to include is the following:
<script src="https://media.evolv.ai/asset-manager/releases/latest/webloader.min.js"
data-evolv-environment="<evolv environment id>"
data-evolv-pushstate="true">
</script>
Instrument state changes that do not result in a URL change
Though representing the full state of the view in the URL for linking is often the best practice, under many circumstances, state changes or user interactions can result in changes to the view that are not identified by an update to the URL. In these cases, we can add additional data to the Evolv Context to allow the client to respond to the changes.
Taking the example of a mailing list sign-up dialog can notify the Evolv Client of its presence so that appropriate variants can be applied and non-applicable variants removed.
You can use React Hooks to add a context attribute when a component mounts (is added to the DOM) and remove it when it is no longer applicable (the component is removed).
The code to include is the following:
React.useEffect(() = {
window.evolv.context.set('email-sign-up-visible', 'true');
return () => {
window.evolv.context.set('email-sign-up-visible', undefined);
};
}, []);
Equivalently using “componentWillMount” / “componentWillUnmount”.
The code to include is the following:
componentWillMount() {
window.evolv.context.set('email-sign-up-visible', 'true');
}
componentWillUnmount() {
window.evolv.context.set('email-sign-up-visible', undefined);
}