dubinc · devkiran · Aug 9, 2025 · Aug 9, 2025 · Aug 9, 2025 · Aug 9, 2025
diff --git a/conversions/gtm/.gitignore b/conversions/gtm/.gitignore
@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/conversions/gtm/README.md b/conversions/gtm/README.md
@@ -0,0 +1,48 @@
+# Google Tag Manager + Next.js – Dub Conversions
+
+This is an example of how to use Dub Conversions to track leads and sales using Google Tag Manager (GTM) with the Dub GTM template.
+
+## Prerequisites
+
+- [Install](https://dub.co/docs/sdks/client-side/installation-guides/google-tag-manager) `@dub/analytics` client-side script
+- [Configure lead tracking](https://dub.co/docs/conversions/leads/google-tag-manager) in GTM
+- [Configure sale tracking](https://dub.co/docs/conversions/sales/google-tag-manager) in GTM
+
+## How it works
+
+This example uses Next.js with `@next/third-parties/google` to integrate Google Tag Manager:
+
+```tsx
+import { GoogleTagManager } from "@next/third-parties/google";
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <GoogleTagManager gtmId="GTM-XXXX" />
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+
+Then, track events using the `sendGTMEvent` function:
+
+```tsx
+import { sendGTMEvent } from "@next/third-parties/google";
+
+// Track a lead (Sign Up)
+sendGTMEvent({
+  event: "Sign Up",
+  customerExternalId: "3SDNAC0C2",
+  customerName: "John Doe",
+  customerEmail: "[email protected]",
+  customerAvatar: "https://example.com/avatar.jpg",
+});
+
+// Track a sale (Purchase)
+sendGTMEvent({
+  event: "Purchase",
+  customerExternalId: "3SDNAC0C2",
+  amount: 1000, // in cents
+});
+```
diff --git a/conversions/gtm/app/favicon.ico b/conversions/gtm/app/favicon.ico
diff --git a/conversions/gtm/app/globals.css b/conversions/gtm/app/globals.css
@@ -0,0 +1,79 @@
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+}
+
+/* Google-style primary button */
+.google-btn {
+  background-color: #1a73e8; /* Google blue */
+  color: #ffffff;
+  border: none;
+  border-radius: 4px;
+  padding: 12px 24px; /* slightly big */
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 500;
+  letter-spacing: 0.25px;
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.02s ease;
+}
+
+.google-btn:hover {
+  background-color: #1765cc;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+}
+
+.google-btn:active {
+  background-color: #1558b0;
+  transform: translateY(0.5px);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
+}
+
+.google-btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.3);
+}
+
+.google-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
diff --git a/conversions/gtm/app/layout.tsx b/conversions/gtm/app/layout.tsx
@@ -0,0 +1,36 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { Analytics as DubAnalytics } from "@dub/analytics/react";
+import { GoogleTagManager } from "@next/third-parties/google";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <GoogleTagManager gtmId="GTM-N47BG36P" />
+      <DubAnalytics />
+      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+        {children}
+      </body>
+    </html>
+  );
+}
diff --git a/conversions/gtm/app/page-client.tsx b/conversions/gtm/app/page-client.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { sendGTMEvent } from "@next/third-parties/google";
+
+export function PageClient() {
+  return (
+    <div
+      style={{
+        minHeight: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "1rem",
+      }}
+    >
+      <button
+        className="google-btn"
+        onClick={() => {
+          sendGTMEvent({
+            event: "Sign Up",
+            customerExternalId: "1bc8c4f8a85096e5b040ae15d0a279e3",
+          });
+          window.alert("Lead tracked");
+        }}
+        aria-label="Track lead event"
+      >
+        Track Lead
+      </button>
+      <button
+        className="google-btn"
+        onClick={() => {
+          sendGTMEvent({
+            event: "Purchase",
+            customerExternalId: "1bc8c4f8a85096e5b040ae15d0a279e3",
+            amount: 1000, // in cents
+          });
+          window.alert("Sale tracked");
+        }}
+        aria-label="Track sale event"
+      >
+        Track Sale
+      </button>
+    </div>
+  );
+}