Add Google Tag Manager integration (#164)

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"

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",
   },

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>