Integrate AI Chatbot to Google Tag Manager

Introduction #

Integrating an AI chatbot with your website using Google Tag Manager (GTM) allows you to leverage the chatbot’s capabilities seamlessly. This guide provides a step-by-step process for setting up the integration.

Before You Begin: #

Ensure you have a Google Tag Manager account and have set up a GTM container for your website.

Step-by-Step Integration Guide #

Step 1: Set Up a Google Tag Manager Account #

1. If you don’t have one, create a Google Tag Manager account at Google Tag Manager.
2. Sign in using your Google account and follow the setup instructions for your GTM container.

Step 2: Obtain the Chatbot Integration Code #

1. Open your AI chatbot project in Noem.AI.
2. Navigate to the “Test and Deploy” section.
3. Noem.AI will detect if you have Google Tag Manager installed and will send events accordingly.
4. The default events include:
   • ‘event’: ‘customEvent’
   • ‘eventCategory’: ‘Chatbot’
   • ‘eventAction’: ‘messageSent’ / ‘messageReceived’
5. Customize events as needed by overriding the onMessageSent and onMessageReceived functions on your bot.
6. Copy the chatbot integration code by clicking the “copy” icon in the top right corner.

Step 3: Log In to Google Tag Manager #

1. Access your GTM account.
2. Select the container for your website where you want to integrate the chatbot.

Step 4: Create a New Tag #

1. Inside your GTM container, navigate to the “Tags” section in the left-hand menu.
2. Click the “New” button to create a new tag.

Step 5: Configure the Tag Settings #

1. Give the tag a descriptive name (e.g., “Chatbot Integration”).
2. In the “Tag Configuration” section, click the pencil icon to edit.
3. Under “Choose a tag type to begin setup,” select “Custom HTML”.

Step 6: Paste the Chatbot Integration Code #

1. Paste the code you copied in Step 2 into the “HTML” field.
2. Click “Save” to apply your changes.

Step 7: Specify the Trigger #

1. In the tag configuration, navigate to the “Triggering” section.
2. Click the pencil icon to edit the triggering settings.
3. Click the “+” icon to add a new trigger.

Step 8: Set the Trigger #

1. Choose the trigger type as “Page View” to control when the chatbot loads.
2. For the trigger settings, select “All Pages” to make the chatbot appear on every page of your website.
3. Click “Save” to apply your changes.

Step 9: Save the Tag #

1. After configuring the tag settings and specifying the trigger, click “Save” to save your new tag.

Step 10: Publish the Changes #

1. To make your chatbot integration live, click “Submit” at the top right of the GTM interface.
2. Review the changes, then click “Submit” again to publish them.

Step 11: Verify Chatbot Integration #

1. Within a few minutes, the chatbot should appear on your website.
2. Verify its functionality by interacting with the chatbot.

Conclusion #

You have successfully integrated your AI-powered chatbot into your website using Google Tag Manager. Periodically review and update the chatbot configuration in your chatbot dashboard to maintain optimal performance and user engagement.

For support and assistance, visit our support portal: Noem.AI GTM Integration Documentation.