Connect ChatBot with Google Analytics (gtag - Universal Analytics)

Track the ChatBot chat widget events in your Google Analytics reports.

You can connect ChatBot with your Google Analytics account without coding. By connecting both tools, you can track the following events with your Google Analytics reports: 

• CB_chat_started - the event triggers once the visitor starts a chat with your bot. 

• CB_window_opened - the event triggers once the visitor maximizes the chat widget 

—  it’s recorded only once per browsing session.

Tracking these events allows you to analyze how many visitors start a conversation with your bot within the chat widget and how many open it without chatting.

How to connect Google Analytics with ChatBot on your website

The Google Analytics code snippet works with the ChatBot chat widget. To connect your Google Analytics with LiveChat, follow this guide.

The Google Analytics code snippet works with the ChatBot chat widget. To connect your Google Analytics with LiveChat, follow this guide.

To connect Google Analytics with ChatBot, copy and paste the code below under your ChatBot chat widget snippet closing tag on your website.

<!-- Start of ChatBot X Google Analytics (gtag) integration code -->
    <script>
      window.BE_API = window.BE_API || {};
      window.BE_API.onConversationStart = function () {
        gtag("event", "CB chat started"); // forward event when the chat starts
      };
      window.BE_API.onChatWindowOpen = function () {
        var CB_wid_max_once = sessionStorage.getItem("cbmaxt");
        if (CB_wid_max_once != "CBmaxEventRecorded") { // check if the widget window open event has been already forwarded
          sessionStorage.setItem("cbmaxt", "CBmaxEventRecorded"); // save info about the forwarded event in the sessionStorage
          gtag("event", "CB window opened"); // forward event when the widget window is opened - once 
        }
      };
    </script>
<!-- End of ChatBot X Google Analytics integration code →

If you use the WordPress integration, you can add the code as a custom WP JS script.

Remember that according to the Google statement, the standard Universal Analytics properties will stop processing data on July 1, 2023.

Remember that according to the Google statement, the standard Universal Analytics properties will stop processing data on July 1, 2023.

Use ChatBot with Google Analytics 4 (Google Tag Manager)

To track custom events, you must link your Google Tag Manager and Google Analytics. Please add the Google Analytics 4 Configuration tag first — see how to add it.

To track custom events, you must link your Google Tag Manager and Google Analytics. Please add the Google Analytics 4 Configuration tag first — see how to add it.

You can add the following integration code directly to your main website source code or with a dedicated GTM tag. As an alternative, you can add it to the same tag containing the ChatBot chat widget code right below it.

<script>
      window.dataLayer = window.dataLayer || [];
      window.BE_API = window.BE_API || {};
      window.BE_API.onConversationStart = function () {
        console.log("start");
        dataLayer.push({
          event: "ChatBot",
          eventCategory: "ChatBot",
          eventAction: "CB_chat_started",
        }); // forward event when the chat starts
      };
      window.BE_API.onChatWindowOpen = function () {
        var CB_wid_max_once = sessionStorage.getItem("cbmaxt");
        if (CB_wid_max_once != "CBmaxEventRecorded") {
          // check if the widget window open event has been already forwarded
          sessionStorage.setItem("cbmaxt", "CBmaxEventRecorded"); // save info about the forwarded event in the sessionStorage
          console.log("window max");
          dataLayer.push({
            event: "ChatBot",
            eventCategory: "ChatBot",
            eventAction: "CB_window_opened",
          });
        }
      };
</script>

How to set up ChatBot triggers in Google Analytics 

1. Go to the Triggers section in your Google Tag Manager admin panel and click the New button.

2. Name it gaChatBotRule and select inside the Trigger Configuration field.

3. Choose Custom Event as your trigger type.

4. Put “ChatBot” in the Event Name field and click Save.

You’ve successfully set the trigger. You can proceed to the next steps to configure your tag.

How to set up a tag

1. Start by going to the Tag section of your Google Tag Manager admin panel and click New.

2. Change the tag’s name to “Google Analytics GA4 Event ChatBot” and click inside the Tag Configuration field.

3. Select the Google Analytics: GA4 Event as the tag type.

4. Click inside the Tag Configuration field and choose Google Analytics GA4 Configuration from the Configuration Tag dropdown. Once you do it, click on the icon on the right side of the Event Name field.

5. Select the + button to proceed.

6. Click inside the Variable Configuration field.

7. Choose a Data Layer Variable.

8. Type eventCategory in the Data Layer Variable Name field and click Save.

9. You will be asked to rename the variable. Use gaChatBotCategory as its name and click Save.

10. Expand the Event Parameters tab and select the Add Row button.

11. Type eventAction in the Parameter Name field and click on the button on the right side of the Value field.

12. Select the + button to proceed.

13. Click inside the Variable Configuration field.

14. Choose a Data Layer Variable.

15. Type eventAction in the Data Layer Variable Name field and click Save.

16. You will be asked to rename your variable. Use gaChatBotAction as its name and click Save.

17. Click inside the Triggering field.

18. Choose gaChatBotRule from the list.

19. Click the Save button in the top right corner.

That’s it. From now on, the ChatBot widget events should appear in your Google Analytics report.