Google Tag Manager Integration

Pre-requisites:

Awareness about 'Google Tag Manager'.

Otherwise, watch this & this video to get an overview.

Step 1: Add GTM ID to your Expertise 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

<expertise-ai 
	client="df4a6780-9df9-4ea9-80ce-68csdfsd43268"
	gtm-id="GTM-MR2111V5" // <-- this was added
	>
</expertise-ai>
<script src="https://d31ptbphd2zjsx.cloudfront.net/genweb/ai-genweb.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">
</a></chat-bot><script src="https://cdn.chatsimple.ai/chat-bot-loader.js" defer></script>

Step 2: Set up triggers in your Tag Manager Account

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.

^ 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

^ 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.

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 Expertise 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>

The above tag should console log the following for a form submission by John Smith, with an email john.smith@gmail.com.

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.

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 ammar.khan@chatsimple.ai.

Expertise Knowledge Base