An alternative Chameleon installation method is using a snippet manager, such as Google Tag Manager (GTM).
Below you can find a detailed step-by-step guide to set up Chameleon using GTM. The setup process is will get you up and running in a few minutes. As with other implementation processes, two simple steps are required:
Adding the Chameleon code snippet.
Identifying users and sending user data.
Quick access
To start, you'll need to create a new tag in Google Tag Manager. This tag must be named Chameleon and have the type Custom HTML.
Then:
Copy your custom Chameleon code snippet from the Chameleon Dashboard.
Paste it on the HTML field of your GTM tag between
<script>tags.Select All pages as the tag's trigger and add any exceptions.
Note: You'll be able to modify your Triggers and add any exceptions, but note that Chameleon will only identify users and show Experiences wherever the code snippet is loaded and user data is flowing.
Chameleon needs you to identify your users to be able to engage with them and show Experiences. To do this, you'll need to use our chmln.identify({{uid}}); method, which is meant to pull user data from your app's client-side.
With GTM, this data is pulled using User-Defined Variables, which will then pass it along to Chameleon.
A unique User-Defined Variable must be created for each user property that you want to send to Chameleon.
First, you'll have to define the
uid-- this is *required for all users* and without it, they will not see any Experiences.
To create a new User-Defined Variable:
Access the Variables option in GTM and create a new User-Defined Variable.
Under Variable Configuration, select the Custom JavaScript variable type.
Use the following code snippet to define your user's
uid, by pulling it from your app.function() {
var uid = PLACEHOLDER.UID; //replace with your UID property
return uid;
}
// Name the property by adding UID (in this case) in the Global Variable Name and Rename Variable fields
Next, repeat the same process for any other properties you want to send -- we recommend
emailat least.
Notes:
You'll need to replace the placeholder (represented in UPPERCASE) with your app's actual variable, as in the screenshot below.
You need to send a UID to identify users in Chameleon on each page, otherwise, your Experiences will not be displayed.
To figure out how to get the data from the page, it helps to know:
what variable namespace the user data that’s stored on the client-side of your app,
how it can be accessed, and
what user properties are present.
Your app is likely storing user data within the page that your user loads. For example, it might look like the following:
window.userDatawindow.app.currentUserwindow.account.logged_in_user
Note: These are hypothetical examples and will likely be named differently within your app. 🧑💻 We recommend asking your engineering team which variable namespace contains a unique id for the currently logged-in user to make sure what to use here.
Once your User-Defined Variable is created, you can send that data to Chameleon.
To do this, you'll need to return to the Tag where you added the Chameleon code snippet and include the chmln.identify({{uid}}) method. This is responsible for identifying users and receiving their data. Here you'll be able to call any User-Defined Variables you created before.
It's important to note that this method needs to be inserted after the Chameleon code you’ve added initially. Just like in the example below, where we're identifying users with the uid property, and also sending also the email user property, for which we've previously created a User-Defined Variable.
Note: Any data sent to Chameleon needs to be defined in these variables and interpolated into the snippet. In order to work correctly, these properties need to exist on the page so that GTM can reference them.
Go ahead and publish your new tag! 🚀
Once you do this, Chameleon will be deployed to your application and you'll be able to launch in-product Experiences and set up your users for self-serve success.
Some apps might load user data asynchronously -- this means the user data needed isn't available as GTM runs your tag when the page loads. In these instances, Chameleon can sometimes not load and will not work correctly.
If you're experiencing this situation, we recommend you use Custom event triggers to send events from your application to GTM, and ensure Chameleon loads after the user data is received.
Create a new Tag with the Chameleon code snippet -- follow the steps, except for 2.Identify users and send user properties.
In your app's code, add a data layer code event that runs only after your user data is loaded and available.
Set a Trigger to your Tag to run after the event you added in step 2. This tells Chameleon to run only after the data needed to identify your users is available.
Access the Triggers option in GTM and create a new one
Choose the trigger type to be a Custom event
Save your Trigger in GTM
This way, every time a user loads your app and the event is pushed, GTM can run the trigger and the Chameleon code, ensuring your users are identified the right way.
Note: If you install Chameleon on a domain that's different from your email domain, it will be automatically disabled, and you should manually enable it in your Environments. The same goes for new subdomains that you add to already-enabled domains. This is to ensure better security and that no malicious domains get added to your account.
Want to know more?