When you have multiple tours running on a page, with different triggering and targeting conditions, it can be hard to know what should show. 

If you come across something unexpected, you can use this guide to help you see the underlying logic that Chameleon is using to show tours. 

Using the browser console

Lots of info about what Chameleon is doing behind the scenes in your app is available with a few browser console commands. 

These are temporary commands run just within your browser, and will not impact your application permanently or for any other users. To clear these commands you can simply refresh the page. 

What is the browser console?

The browser console (sometimes just called "console") is a command-line interface (meaning you type in commands, and get back data) for the code that runs on your site. 

For instance, if you type in alert("hello world!") and hit enter / return, your browser will pop up a notification that says "hello world!".

To open the console in most browsers, right-click the website and go to "inspect", and then click on the "console" tab. The shortcut for Chrome on Mac is cmd+opt+J.

Once you have the console open, you can run some of these commands to learn more about why Chameleon is not appearing installed or displaying tours.

To check if Chameleon is installed correctly

  1. Snippet is installed: First, either disable or remove the Chrome Extension. Then type chmln and hit return. If the response is NOT undefined then the snippet is present on the page. Instead, an example response could be ƒ (t){"progeny-definition"...}  or something similar. 
  2. Snippet identifying users: Type chmln.data.profile and hit return. If the response is NOT undefined, then users are being identified to Chameleon.
  3. Snippet is identifying users correctly: Type chmln.data.profile.attributes and hit return. This should return a list of attributes unique to the account you are logged into your app with. When you log in with a different user account, it should return different attributes unique to that account.

If any of the above don't return the expected results, review our articles on installing Chameleon, either via Segment.com, Google Tag Manager, or directly via Javascript. If you need further help, then contact us using the green chat bubble on the bottom right. ↘️

To check which tours are displaying and why

Use the following scripts to learn whether tours are showing, and why a tour is or isn't showing. You can investigate events, segmentation, and URL matching to find out why Chameleon isn't displaying a particular tour. 

❗️Note: these scripts will only return results when using in user testing mode.

The currently running tour: 

chmln.decorators.Campaigns.decorator.model.get('name')

This will return the name of the tour that is displaying or waiting to display (either because an element isn't present, or hasn't been clicked). 

If the above script returns an error, then no tour has started.

Which tours have been seen:

chmln.data.tours.each(function(t){console.log(t.get('state'), ':', t.get('campaign.name'));})

This will return a list of tour names and their corresponding state. 

State can be "displayed" / "started" (the tour has started), "completed" (the user has finished the tour), or "exited" (the user left the tour earlier by clicking the close "x" button).

What tours will show next: 

chmln.data.campaigns.pluck('name') 

This will provide a list of the priority order that tours will be shown to a user. Note that tours that cannot show will be skipped over.

Which tours target the current user: 

chmln.data.campaigns.each(function(c){console.log('"'+c.get('name')+'"',chmln.lib.segmentedBy(c.segment()))}); 

This provides a list of live tours, and whether or not the current user matches that tour's target audience (true or false).

Which tours' first step URL matches the current page: 

chmln.data.campaigns.each(function(c){var f=c.steps().first(); console.log('"'+c.get('name')+'"',!!f?f.isLive():'false')}); 

This provides a list of every tour and whether its first step could show based on the current URL.

What events the user has completed:

var cd=chmln.data; cd.schedules.each(function(s){var d=cd.definitions, u=s.get('uid'), t=s.get('occurrence_count'), n; (n=d.get(u)) ? (n=n.get('name')) : (n=u); console.log('"'+n+'"', 'happened',t,'time(s)');});

The above script will return a list of what events the user has triggered and how many times they've triggered it.

To check the user properties available

User properties are helpful in targeting tours to the right users, and to help personalize content. Learn how to send this data here.

You can evaluate the user properties / attributes associated with the current user by utilizing the following console command:

chmln.data.profile.attributes

To check all the user properties being sent by your account, use:

chmln.data.segment_properties.where({kind: 'profile', source: 'chmln'}).map(function(p) { return p.get('prop') })



If you have any questions or would like further commands to learn more about your tours then simply send us a message from the bottom right chat bubble. ↘️

Did this answer your question?