Google Tag Manager Integration

Analyze Chatsimple activity in your Google Analytics dashboard (and more).

Sample demo

Pre-requisites: - Awareness about 'Google Tag Manager'. - Otherwise, watch this & this video to get an overview.

Step 1: Add GTM ID to your Chatsimple embed code

You can find your GTM ID in your Google Tag Manager dashboard. It starts with 'GTM-...' as shown in the image below.

Sourcing our GTM-id

Then add it to your embed code as shown below

// For the AI Nav
<co-pilot 
platform-id="06casd1c-18c3-44fc-8531-c869753d4346"
user-id="5955912312324486923" 
chatbot-id="13fdsd38b-a832-46e0-a946-605858588f90" 
gtm-id="GTM-MR2111V5" // <-- this was added
></co-pilot> 
<script src="https://cdn.chatsimple.ai/ai-loader.js" defer></script>

// For the Widget
<chat-bot 
platform-id="06casd1c-18c3-44fc-8531-c869753d4346"
user-id="5955912312324486923" 
chatbot-id="13fdsd38b-a832-46e0-a946-605858588f90" 
gtm-id="GTM-MR2111V5" // <-- this was added
> 
<a href="https://www.chatsimple.ai/?utm_source=widget&utm_medium=referral">chatsimple</a></chat-bot><script src="https://cdn.chatsimple.ai/chat-bot-loader.js" defer></script>

To jog your memory, this is what we mean by the Chatsimple embed code. 😉

Step 2: Set up triggers in your Tag Manager Account

Sample trigger set-up

You can choose whatever trigger name makes sense, but the 'Event name' must be exactly as shown in the table below.

Triggers to set up if using the AI Nav

Event Name	What does it track?
asked_chatsimple_nav	Sent at least one message using the Chatsimple AI Nav.
chatsimple_main_cta_clicked_nav	Clicked the main call to action (CTA) in the AI Nav.
chatsimple_leadform_submitted_nav	Submitted a lead form in the AI Nav.

Chatsimple AI Nav

Chatsimple AI Nav Lead Form

Chatsimple AI Nav Main CTA

Triggers to set up if using the Widget

Event Name	What does it track?
asked_chatsimple_widget	Sent at least one message using the Chatsimple widget.
chatsimple_main_cta_clicked_widget	Clicked one of the main call to actions (CTAs) in the widget
chatsimple_leadform_submitted_widget	Submitted a lead form in the widget

Chatsimple Widget Main CTAs

Step 3: Set up Tags for each of the relevant triggers

See below the required configuration. Remember that here, you also have to input your measurement ID from your Google Analytics Account.

Tag Set-up

Step 4: Preview then Submit

Click 'Preview' and in debug view ensure all the relevant tags are being fired. Then click 'submit' to save changes.

Click preview for 'Debug View'

Bonus: Accessing form data and injecting custom Javascript

You might want to take this Chatsimple activity and forward it to your data tools, for example using form submission details to uniquely id a customer. For that, follow along.

Create a new tag that access form data from the dataLayer

To implement that, paste the following custom html code with the trigger you created above for 'chatsimple_leadform_submitted_nav' or 'chatsimple_leadform_submitted_widget' as shown below.

<script>
  (function() {
    window.dataLayer = window.dataLayer || [];
    var formSubmissionData = window.dataLayer[window.dataLayer.length - 1].formData;
    console.log('Submitted Form Data', formSubmissionData);
  })();
</script>

Console logging form details

The above tag should console log the following for a form submission by John Smith, with an email [e-mail].

Sample console log for form data

Note that consent_checked is false by default since that had not been activated in the appearance section. Some regulatory environments need consent to store this data while others do not.

Now you can do anything with that data, for example, if you had to send it to another tool, say posthog, you can do so as below by changing the Custom HTML above.

<script>
  
  // Function to generate a simple UUID
  function generateUUID() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
      var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
      return v.toString(16);
    });
  }

  // Accessing formSubmissionData
  (function() {
    window.dataLayer = window.dataLayer || [];
    var formSubmissionData = window.dataLayer[window.dataLayer.length - 1].formData;
    
    // Generate a unique distinct_id
    var distinct_id = generateUUID();
    
    // Sending form submission data to posthog (or whatever tool relevant)
    posthog.identify(
     distinct_id,
    { email: formSubmissionData.email, name: formSubmissionData.name } 
    );
  })();
</script>

And a few minutes later, you should be receiving your data.

Posthog successfully captured the relevant id.

Note that for this to run, we had to initialize posthog first. Most likely this would be needed for your tool of interest as well.

To initialize, you have to create a separate GTM Tag with the trigger set to 'All Pages' as below.

Initialize posthog. ID tweaked.

You should coordinated with a developer to obtain the initialize code above if needed.

And you're done! 🔥

ps. If you struggle in the above implementation, reach out to [e-mail].