View Categories

Integrate Your Noem AI Chatbot with Google Tag Manager

Overview
The Google Tag Manager (GTM) integration allows your Noem AI chatbot to automatically send interaction events to your Google Tag Manager container. This enables you to track chatbot activity such as messages sent and received, user engagement, and conversions directly in Google Analytics or any connected marketing tool.

đź§© Applies to: Web integrations only
⚙️ Requirement: Google Tag Manager installed on your website

Why Integrate Google Tag Manager with Noem AI

  • Enhanced analytics: Track chatbot usage directly within your analytics dashboard.
  • Customizable events: Modify message events to capture the exact data you need.
  • Automation-friendly: No additional configuration needed—Noem AI automatically detects GTM.
  • Works out-of-the-box: Seamless integration with your existing GTM setup.

How It Works
When a chatbot is embedded on your website and Google Tag Manager is present, Noem AI automatically detects it and sends custom events whenever a message is sent or received by the bot.

By default, the following events are pushed to the GTM dataLayer:

{
  'event': 'customEvent',
  'eventCategory': 'Chatbot',
  'eventAction': 'messageSent' // or 'messageReceived'
}

You can use these events to create triggers in Google Tag Manager and forward them to Google Analytics, Ads, or any third-party tracking system.

Setup Instructions

  1. Ensure your website already has Google Tag Manager (GTM) properly installed.
  2. Install your Noem AI chatbot using the Website Integration snippet: <script src="https://app.noem.ai/js/ChatBot.js"></script> <script> document.addEventListener("DOMContentLoaded", ()=> { let currentUser = { email: null, displayName: 'Guest', userProfileUrl: '' }; const bot = new ChatBot('YOUR_CHATBOT_API_KEY', currentUser); bot.init(); }); </script>
  3. Once the bot loads, Noem AI will automatically push chatbot message events to the GTM dataLayer.
  4. In your Google Tag Manager account, create triggers for these events:
    • Event Name: customEvent
    • Filter by:
      • eventCategory equals Chatbot
      • eventAction equals messageSent or messageReceived
  5. Use these triggers to fire tags for Google Analytics, Google Ads, or other connected tools.

Customizing Events (Optional)
You can override the built-in event behavior to send your own custom data to GTM.

Example customization:

const bot = new ChatBot('YOUR_CHATBOT_API_KEY', currentUser);

bot.onMessageSent = function(message) {
  dataLayer.push({
    'event': 'customEvent',
    'eventCategory': 'Chatbot',
    'eventAction': 'messageSent',
    'messageText': message.text,
    'timestamp': new Date().toISOString()
  });
};

bot.onMessageReceived = function(message) {
  dataLayer.push({
    'event': 'customEvent',
    'eventCategory': 'Chatbot',
    'eventAction': 'messageReceived',
    'messageText': message.text
  });
};

bot.init();

This lets you include additional parameters such as message content, timestamps, or user identifiers.

Testing the Integration

  1. Open your website in Chrome.
  2. Enable Preview Mode in Google Tag Manager.
  3. Send and receive a few chatbot messages.
  4. In the Tag Assistant panel, verify that events appear in the dataLayer with:
    • eventCategory: Chatbot
    • eventAction: messageSent / messageReceived
  5. Confirm that your GTM tags fire as expected.

Troubleshooting

Best Practices

  • Keep GTM installed before chatbot initialization to ensure detection.
  • Use consistent naming conventions for custom event labels.
  • Limit the number of custom pushes per message to reduce noise in analytics.
  • Test in GTM Preview Mode before publishing new tags.

Next Steps

  • Create conversion goals in Google Analytics using chatbot message events.
  • Add remarketing tags or audience segmentation based on user interactions.
  • Combine chatbot data with eCommerce tracking for deeper insights.

Related Articles

Where should we send your invitation to?