From ee65124ffa523bc10b01db5b36abc348aa31c2da Mon Sep 17 00:00:00 2001
From: Edward Cui <37892357+ECuiDev@users.noreply.github.com>
Date: Thu, 8 May 2025 15:32:52 -0700
Subject: [PATCH] Add Google Tag Manager integration (#164)

---
 docs/src/app/layout.jsx                 |  2 +-
 docs/src/content/_meta.js               |  7 ++-
 docs/src/content/google-tag-manager.mdx | 57 +++++++++++++++++++++++++
 3 files changed, 64 insertions(+), 2 deletions(-)
 create mode 100644 docs/src/content/google-tag-manager.mdx

diff --git a/docs/src/app/layout.jsx b/docs/src/app/layout.jsx
index 3297c05..3237e81 100644
--- a/docs/src/app/layout.jsx
+++ b/docs/src/app/layout.jsx
@@ -106,7 +106,7 @@ export default async function RootLayout({ children }) {
                 🚀 We just launched! Please star us on Github!{" "}
               </div>
               <a
-                class="github-button"
+                className="github-button"
                 href="https://github.com/rybbit-io/rybbit"
                 data-color-scheme="no-preference: light; light: light; dark: light;"
                 data-show-count="true"
diff --git a/docs/src/content/_meta.js b/docs/src/content/_meta.js
index 9516ac3..880db08 100644
--- a/docs/src/content/_meta.js
+++ b/docs/src/content/_meta.js
@@ -20,6 +20,11 @@ export default {
   },
   "web": "",
   _6: {
+    type: "separator",
+    title: "Integrations",
+  },
+  "google-tag-manager": "",
+  _7: {
     type: "separator",
     title: "Settings",
   },
@@ -28,7 +33,7 @@ export default {
   "enhanced-privacy": "",
   "changing-domains": "",
   "deleting-sites": "",
-  _7: {
+  _8: {
     type: "separator",
     title: "Other",
   },
diff --git a/docs/src/content/google-tag-manager.mdx b/docs/src/content/google-tag-manager.mdx
new file mode 100644
index 0000000..2850d0e
--- /dev/null
+++ b/docs/src/content/google-tag-manager.mdx
@@ -0,0 +1,57 @@
+import { Steps } from "nextra/components"
+
+# Google Tag Manager
+
+Google Tag Manager (GTM) allows you to add code snippets or tracking pixels to your website with minimal code changes. This makes it an efficient way to integrate Rybbit without modifying your codebase.
+
+## How to Add Rybbit to Google Tag Manager
+
+<Steps>
+### 1. **Retrieve Your Tracking Script**
+
+Navigate to your Rybbit instance to obtain your JavaScript snippet.
+
+Normally, the script would look like:
+
+```javascript
+<script
+  src="https://yourdomain.com/api/script.js"
+  data-site-id="YOUR_SITE_ID"
+  async
+></script>
+```
+
+However, GTM sanitizes script tags by removing non-standard HTML attributes like `data-site-id`. So you need to use:
+
+```javascript
+<script>
+  (function() {
+    let el = document.createElement("script");
+    el.src = "https://yourdomain.com/api/script.js";
+    el.async = true;
+    el.setAttribute("data-site-id", "YOUR_SITE_ID");
+    document.head.appendChild(el);
+  })();
+</script>
+```
+
+### 2. **Access Your GTM Dashboard**
+
+Assuming GTM is already set up, go to your GTM dashboard and select the appropriate account and container linked to your website.
+
+### 3. **Create a New Tag**
+
+Click on "Add a new tag" to initiate the creation process.
+
+### 4. **Configure the Tag**
+
+Under "Tag Configuration," choose "Custom HTML" and paste your Rybbit snippet into the provided field.
+
+### 5. **Set Up Triggers**
+
+Assign a trigger to determine when the tag should fire. For instance, to load Rybbit on all pages, select the "All Pages" trigger.
+
+### 6. **Save and Publish**
+
+Save your changes and publish the container to make the tag active on your website.
+</Steps>