Skip to main content

Google Analytics Integration

In this guide, we'll walk you through how to integrate Zoovu with Google Analytics 4 to monitor user interactions with your Digital Assistants.

Track user actions​

To track user actions within the Digital Assistant, use the ZoovuSDK.dataLayer to register events.

The register method enables the tracking of all assistant events and stores the event data in a specified dataLayer object.

Example:

let dataLayer = []; ZoovuSDK.dataLayer.register(dataLayer, <ASSISTANT_CODE>);

<ASSISTANT_CODE> is optional. You can use it to distinguish between multiple assistants on a single page.

Integrate Zoovu with GA4​

Step 1: Add the Zoovu SDK​

Depending on which environment your Zoovu account is in, add the corresponding script within the <head> section of your HTML document to initialize the Zoovu SDK:

  • For the Orca environment:
<script async src="https://orca-cdn.zoovu.com/core-js/zoovu-sdk/zoovu-sdk-latest.min.js"></script>

<script>
ZoovuSDK = window.ZoovuSDK || {
    init: function () { ZoovuSDK.q = ZoovuSDK.q || [], ZoovuSDK.q.push(arguments) },
    assistantInit: function () { ZoovuSDK.aq = ZoovuSDK.aq || [], ZoovuSDK.aq.push(arguments) }
};
</script>
  • For the Barracuda environment:
<script async src="https://barracuda-cdn.zoovu.com/core-js/zoovu-sdk/zoovu-sdk-latest.min.js"></script>

<script>
ZoovuSDK = window.ZoovuSDK || {
init: function () { ZoovuSDK.q = ZoovuSDK.q || [], ZoovuSDK.q.push(arguments) },
assitantInit: function () { ZoovuSDK.aq = ZoovuSDK.aq || [], ZoovuSDK.aq.push(arguments) }
};
</script>

Step 2: Integrate Google Analytics (GA4)​

Still within the <head> section, insert the GA4 script. Replace <GOOGLE_TAG> with your unique Google tag ID:

<script async src="https://www.googletagmanager.com/gtag/js?id=&lt;GOOGLE_TAG&gt;"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', '&lt;GOOGLE_TAG&gt;'); </script>

Step 3: Track Zoovu assistant events in GA4​

Within the <body> section of your HTML document, add the following script to make sure Zoovu's events are pushed to GA4:

<script> ZoovuSDK.assistantInit(function () { ZoovuSDK.events.listenToAll(function (event) { gtag('zoovu-assistant-event', event.name, event.data); }, &lt;ASSISTANT_CODE&gt;); }, &lt;ASSISTANT_CODE&gt;); </script>

Replace <ASSISTANT_CODE> with your Digital Assistant's unique identifier, especially if you have multiple assistants on the same page.

Step 4: Finalize your HTML​

Make sure to close the <body> and <html> tags properly and add any other necessary website content. For example:

<p>Welcome to my website!</p> </body> </html>

Final result - view the complete code​

The code below is just an example, so please don't copy and paste this code into your website. Make sure to replace placeholder values such as ZOOVU_SDK_BASE_URL, GOOGLE_TAG, and ASSISTANT_CODE with the actual values relevant to your integration. Contact us via the Zoovu Support Portal for more information.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Zoovu SDK (zoovu-sdk.js) -->
<script async src="&lt;ZOOVU_SDK_BASE_URL&gt;/zoovu-sdk-latest.min.js"></script>
<script>ZoovuSDK = window.ZoovuSDK || { init: function () { ZoovuSDK.q = ZoovuSDK.q || [], ZoovuSDK.q.push(arguments) }, assitantInit: function () { ZoovuSDK.aq = ZoovuSDK.aq || [], ZoovuSDK.aq.push(arguments) } };</script>

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=&lt;GOOGLE_TAG&gt;"></script>
<script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', '&lt;GOOGLE_TAG&gt;'); </script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title of the page</title>
</head>

<body>
<p>Welcome to my website!</p>
<script>
ZoovuSDK.assistantInit(function () {
ZoovuSDK.events.listenToAll(function (event) {
gtag('zoovu-assistant-event', event.name, event.data);
}, &lt;ASSISTANT_CODE&gt;);
}, &lt;ASSISTANT_CODE&gt;);
</script>
</body>
</html>