Skip to main content

Google Analytics

📊 Integrating Google Analytics and Tag Manager with ai12z​

This guide walks you through adding Google Analytics (GA4) and Google Tag Manager (GTM) to your site using standard HTML and tracking user events on ai12z components like <ai12z-cta>.

✅ Prerequisites​

  • A Google Analytics account with a GA4 property
  • A Google Tag Manager container
  • Your ai12z data-key

🧩 Sample Integration Code (Keys Masked)​

<!doctype html>
<html lang="en">
  <head>
    <!-- Google Analytics (gtag.js) -->
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || []
      function gtag() {
        dataLayer.push(arguments)
      }
      gtag("js", new Date())
      gtag("config", "G-XXXXXXXXXX")
    </script>

    <!-- Google Tag Manager -->
    <script>
      ;(function (w, d, s, l, i) {
        w[l] = w[l] || []
        w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" })
        var f = d.getElementsByTagName(s)[0],
          j = d.createElement(s),
          dl = l != "dataLayer" ? "&l=" + l : ""
        j.async = true
        j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl
        f.parentNode.insertBefore(j, f)
      })(window, document, "script", "dataLayer", "GTM-XXXXXXX")
    </script>
    <!-- End Google Tag Manager -->

    <!-- ai12z Library -->
    <script
      type="module"
      src="https://cdn.ai12z.net/pkg/ai12z@latest/dist/esm/library.js"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.ai12z.net/pkg/ai12z@latest/dist/library/library.css"
    />

    <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>
    <!-- Google Tag Manager (noscript fallback) -->
    <noscript>
      <iframe
        src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
        height="0"
        width="0"
        style="display:none;visibility:hidden"
      ></iframe>
    </noscript>
    <!-- End GTM noscript -->

    <!-- ai12z CTA Button -->
    <div>
      <ai12z-cta data-key="YOUR_ai12z_KEY_HERE" data-mode="local"></ai12z-cta>
    </div>

    <!-- Event Tracking Example -->
    <script>
      document
        .querySelector("ai12z-cta")
        .addEventListener("click", function () {
          gtag("event", "button_click", {
            event_category: "engagement",
            event_label: "User clicked the login",
          })
        })

      document.querySelector("ai12z-cta").addEventListener("open", function () {
        gtag("event", "bot_open", {
          event_category: "engagement",
          event_label: "Bot opened",
        })
      })
    </script>
  </body>
</html>

🔒 Keys​

  • Replace your actual keys in documentation with placeholders like:
    • G-XXXXXXXXXX for Google Analytics
    • GTM-XXXXXXX for Tag Manager
    • YOUR_ai12z_KEY_HERE for your ai12z integration key

🎯 Tracking Events with gtag​

You can attach Google Analytics events to any interaction with ai12z components by listening for standard events (like click or open) and using gtag("event", ...) to send data to GA.