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 similarly quick and easy and 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.
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.
Copy your custom Chameleon code snippet from the Chameleon Dashboard.
Paste it on the HTML field of your GTM tag between
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() 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.
To create a new User-Define Variable:
Access the Variables menu in GTM and create a new User-Defined Variable.
Use the following code snippet to define your user's
uid, by pulling it from your app.
var uid = PLACEHOLDER.UID; //replace with your UID property
// Name the property by adding UID (in this case) in the Global Variable Name and Rename Variable fields
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:
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're ready to 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() 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
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.