feat: Google Tag Manager (GTM) App (#7952)

packages/app-store/apps.browser.generated.tsx

@@ -40,6 +40,7 @@ export const EventTypeAddonMap = {
   fathom: dynamic(() => import("./fathom/components/EventTypeAppCardInterface")),
   ga4: dynamic(() => import("./ga4/components/EventTypeAppCardInterface")),
   giphy: dynamic(() => import("./giphy/components/EventTypeAppCardInterface")),
+  "google-tag-manager": dynamic(() => import("./google-tag-manager/components/EventTypeAppCardInterface")),
   plausible: dynamic(() => import("./plausible/components/EventTypeAppCardInterface")),
   qr_code: dynamic(() => import("./qr_code/components/EventTypeAppCardInterface")),
   rainbow: dynamic(() => import("./rainbow/components/EventTypeAppCardInterface")),

packages/app-store/apps.keys-schemas.generated.ts

@@ -6,6 +6,7 @@ import { appKeysSchema as dailyvideo_zod_ts } from "./dailyvideo/zod";
 import { appKeysSchema as fathom_zod_ts } from "./fathom/zod";
 import { appKeysSchema as ga4_zod_ts } from "./ga4/zod";
 import { appKeysSchema as giphy_zod_ts } from "./giphy/zod";
+import { appKeysSchema as google_tag_manager_zod_ts } from "./google-tag-manager/zod";
 import { appKeysSchema as googlecalendar_zod_ts } from "./googlecalendar/zod";
 import { appKeysSchema as hubspot_zod_ts } from "./hubspot/zod";
 import { appKeysSchema as larkcalendar_zod_ts } from "./larkcalendar/zod";
@@ -30,6 +31,7 @@ export const appKeysSchemas = {
   fathom: fathom_zod_ts,
   ga4: ga4_zod_ts,
   giphy: giphy_zod_ts,
+  "google-tag-manager": google_tag_manager_zod_ts,
   googlecalendar: googlecalendar_zod_ts,
   hubspot: hubspot_zod_ts,
   larkcalendar: larkcalendar_zod_ts,

packages/app-store/apps.metadata.generated.ts

@@ -17,6 +17,7 @@ import facetime_config_json from "./facetime/config.json";
 import fathom_config_json from "./fathom/config.json";
 import ga4_config_json from "./ga4/config.json";
 import { metadata as giphy__metadata_ts } from "./giphy/_metadata";
+import google_tag_manager_config_json from "./google-tag-manager/config.json";
 import { metadata as googlecalendar__metadata_ts } from "./googlecalendar/_metadata";
 import { metadata as googlevideo__metadata_ts } from "./googlevideo/_metadata";
 import { metadata as hubspot__metadata_ts } from "./hubspot/_metadata";
@@ -76,6 +77,7 @@ export const appStoreMetadata = {
   fathom: fathom_config_json,
   ga4: ga4_config_json,
   giphy: giphy__metadata_ts,
+  "google-tag-manager": google_tag_manager_config_json,
   googlecalendar: googlecalendar__metadata_ts,
   googlevideo: googlevideo__metadata_ts,
   hubspot: hubspot__metadata_ts,

packages/app-store/apps.schemas.generated.ts

@@ -6,6 +6,7 @@ import { appDataSchema as dailyvideo_zod_ts } from "./dailyvideo/zod";
 import { appDataSchema as fathom_zod_ts } from "./fathom/zod";
 import { appDataSchema as ga4_zod_ts } from "./ga4/zod";
 import { appDataSchema as giphy_zod_ts } from "./giphy/zod";
+import { appDataSchema as google_tag_manager_zod_ts } from "./google-tag-manager/zod";
 import { appDataSchema as googlecalendar_zod_ts } from "./googlecalendar/zod";
 import { appDataSchema as hubspot_zod_ts } from "./hubspot/zod";
 import { appDataSchema as larkcalendar_zod_ts } from "./larkcalendar/zod";
@@ -30,6 +31,7 @@ export const appDataSchemas = {
   fathom: fathom_zod_ts,
   ga4: ga4_zod_ts,
   giphy: giphy_zod_ts,
+  "google-tag-manager": google_tag_manager_zod_ts,
   googlecalendar: googlecalendar_zod_ts,
   hubspot: hubspot_zod_ts,
   larkcalendar: larkcalendar_zod_ts,

packages/app-store/apps.server.generated.ts

@@ -17,6 +17,7 @@ export const apiHandlers = {
   fathom: import("./fathom/api"),
   ga4: import("./ga4/api"),
   giphy: import("./giphy/api"),
+  "google-tag-manager": import("./google-tag-manager/api"),
   googlecalendar: import("./googlecalendar/api"),
   googlevideo: import("./googlevideo/api"),
   hubspot: import("./hubspot/api"),

packages/app-store/google-tag-manager/api/add.ts

@@ -0,0 +1,16 @@
+import { createDefaultInstallation } from "@calcom/app-store/_utils/installation";
+import type { AppDeclarativeHandler } from "@calcom/types/AppHandler";
+
+import appConfig from "../config.json";
+
+const handler: AppDeclarativeHandler = {
+  appType: appConfig.type,
+  variant: appConfig.variant,
+  slug: appConfig.slug,
+  supportsMultipleInstalls: false,
+  handlerType: "add",
+  createCredential: ({ appType, user, slug }) =>
+    createDefaultInstallation({ appType, userId: user.id, slug, key: {} }),
+};
+
+export default handler;

packages/app-store/google-tag-manager/api/index.ts

@@ -0,0 +1 @@
+export { default as add } from "./add";

packages/app-store/google-tag-manager/components/EventTypeAppCardInterface.tsx

@@ -0,0 +1,38 @@
+import { useState } from "react";
+
+import { useAppContextWithSchema } from "@calcom/app-store/EventTypeAppContext";
+import AppCard from "@calcom/app-store/_components/AppCard";
+import type { EventTypeAppCardComponent } from "@calcom/app-store/types";
+import { TextField } from "@calcom/ui";
+
+import type { appDataSchema } from "../zod";
+
+const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({ app }) {
+  const [getAppData, setAppData] = useAppContextWithSchema<typeof appDataSchema>();
+  const trackingId = getAppData("trackingId");
+  const [enabled, setEnabled] = useState(getAppData("enabled"));
+
+  return (
+    <AppCard
+      setAppData={setAppData}
+      app={app}
+      switchOnClick={(e) => {
+        if (!e) {
+          setEnabled(false);
+        } else {
+          setEnabled(true);
+        }
+      }}
+      switchChecked={enabled}>
+      <TextField
+        name="Tracking ID"
+        value={trackingId}
+        onChange={(e) => {
+          setAppData("trackingId", e.target.value);
+        }}
+      />
+    </AppCard>
+  );
+};
+
+export default EventTypeAppCard;

packages/app-store/google-tag-manager/config.json

@@ -0,0 +1,28 @@
+{
+  "name": "Google Tag Manager",
+  "slug": "google-tag-manager",
+  "type": "google-tag-manager_analytics",
+  "imageSrc": "icon.svg",
+  "logo": "icon.svg",
+  "url": "https://tagmanager.google.com",
+  "variant": "analytics",
+  "categories": [
+    "analytics"
+  ],
+  "publisher": "Black Lemon",
+  "email": "support@blacklemon.dk",
+  "description": "App to install Google Tag Manager",
+  "extendsFeature": "EventType",
+  "appData": {
+    "tag": {
+      "scripts": [
+        {
+          "content":"(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-{TRACKING_ID}');"
+        }
+      ]
+    }
+  },
+  "isTemplate": false,
+  "__createdUsingCli": true,
+  "__template": "booking-pages-tag"
+}

packages/app-store/google-tag-manager/index.ts

@@ -0,0 +1 @@
+export * as api from "./api";

packages/app-store/google-tag-manager/package.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://json.schemastore.org/package.json",
+  "private": true,
+  "name": "@calcom/google-tag-manager",
+  "version": "0.0.0",
+  "main": "./index.ts",
+  "dependencies": {
+    "@calcom/lib": "*"
+  },
+  "devDependencies": {
+    "@calcom/types": "*"
+  },
+  "description": "App to install Google Tag Manager"
+}

packages/app-store/google-tag-manager/static/icon.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.87 122.89"><defs><style>.cls-1{fill:#8ab4f8;}.cls-2{fill:#4285f4;}.cls-3{fill:#246fdb;}</style></defs><title>google-tag-manager</title><polygon class="cls-1" points="72.13 118.22 50.8 96.86 96.63 50.56 118.35 72.28 72.13 118.22 72.13 118.22"/><path class="cls-2" d="M72.29,26.23,50.56,4.5,4.5,50.56a15.35,15.35,0,0,0,0,21.71h0l46.06,46.06,21.31-21.4L37.07,61.45,72.29,26.23Z"/><path class="cls-1" d="M118.35,50.56,72.29,4.5A15.36,15.36,0,0,0,50.56,26.22L96.65,72.28a15.36,15.36,0,0,0,21.72-21.72Z"/><path class="cls-3" d="M76.48,107.66a15.23,15.23,0,1,0-15.22,15.23,15.22,15.22,0,0,0,15.22-15.23Z"/></svg>

packages/app-store/google-tag-manager/zod.ts

@@ -0,0 +1,11 @@
+import { z } from "zod";
+
+import { eventTypeAppCardZod } from "@calcom/app-store/eventTypeAppCardZod";
+
+export const appDataSchema = eventTypeAppCardZod.merge(
+  z.object({
+    trackingId: z.string(),
+  })
+);
+
+export const appKeysSchema = z.object({});

packages/prisma/seed-app-store.config.json

@@ -2,221 +2,300 @@
   {
     "/*": "This file is auto-generated and updated by `yarn app-store create/edit`. Don't edit it manually",
     "dirName": "routing-forms",
-    "categories": ["other"],
+    "categories": [
+      "other"
+    ],
     "slug": "routing-forms",
     "type": "routing-forms_other"
   },
   {
     "dirName": "whereby",
-    "categories": ["video"],
+    "categories": [
+      "video"
+    ],
     "slug": "whereby",
     "type": "whereby_video"
   },
   {
     "dirName": "around",
-    "categories": ["video"],
+    "categories": [
+      "video"
+    ],
     "slug": "around",
     "type": "around_video"
   },
   {
     "dirName": "riverside",
-    "categories": ["video"],
+    "categories": [
+      "video"
+    ],
     "slug": "riverside",
     "type": "riverside_video"
   },
   {
     "dirName": "typeform",
-    "categories": ["other"],
+    "categories": [
+      "other"
+    ],
     "slug": "typeform",
     "type": "typeform_other"
   },
   {
     "dirName": "ping",
-    "categories": ["video"],
+    "categories": [
+      "video"
+    ],
     "slug": "ping",
     "type": "ping_video"
   },
   {
     "dirName": "campfire",
-    "categories": ["video"],
+    "categories": [
+      "video"
+    ],
     "slug": "campfire",
     "type": "campfire_video"
   },
   {
     "dirName": "rainbow",
-    "categories": ["web3"],
+    "categories": [
+      "web3"
+    ],
     "slug": "rainbow",
     "type": "rainbow_web3"
   },
   {
     "dirName": "raycast",
-    "categories": ["other"],
+    "categories": [
+      "other"
+    ],
     "slug": "raycast",
     "type": "raycast_other"
   },
   {
     "dirName": "n8n",
-    "categories": ["automation"],
+    "categories": [
+      "automation"
+    ],
     "slug": "n8n",
     "type": "n8n_automation"
   },
   {
     "dirName": "exchangecalendar",
-    "categories": ["calendar"],
+    "categories": [
+      "calendar"
+    ],
     "slug": "exchange",
     "type": "exchange_calendar"
   },
   {
     "dirName": "qr_code",
-    "categories": ["other"],
+    "categories": [
+      "other"
+    ],
     "slug": "qr_code",
     "type": "qr_code_other"
   },
   {
     "dirName": "weather_in_your_calendar",
-    "categories": ["other"],
+    "categories": [
+      "other"
+    ],
     "slug": "weather_in_your_calendar",
     "type": "weather_in_your_calendar_other"
   },
   {
     "dirName": "fathom",
-    "categories": ["analytics"],
+    "categories": [
+      "analytics"
+    ],
     "slug": "fathom",
     "type": "fathom_analytics"
   },
   {
     "dirName": "plausible",
-    "categories": ["analytics"],
+    "categories": [
+      "analytics"
+    ],
     "slug": "plausible",
     "type": "plausible_analytics"
   },
   {
     "dirName": "wordpress",
-    "categories": ["other"],
+    "categories": [
+      "other"
+    ],
     "slug": "wordpress",
     "type": "wordpress_other"
   },
   {
     "dirName": "ga4",
-    "categories": ["analytics"],
+    "categories": [
+      "analytics"
+    ],
     "slug": "ga4",
     "type": "ga4_analytics"
   },
   {
     "dirName": "pipedream",
-    "categories": ["automation"],
+    "categories": [
+      "automation"
+    ],
     "slug": "pipedream",
     "type": "pipedream_automation"
   },
   {
     "dirName": "sirius_video",
-    "categories": ["video"],
+    "categories": [
+      "video"
+    ],
     "slug": "sirius_video",
     "type": "sirius_video_video"
   },
   {
     "dirName": "sendgrid",
-    "categories": ["other"],
+    "categories": [
+      "other"
+    ],
     "slug": "sendgrid",
     "type": "sendgrid_other_calendar"
   },
   {
     "dirName": "closecom",
-    "categories": ["other"],
+    "categories": [
+      "other"
+    ],
     "slug": "closecom",
     "type": "closecom_other_calendar"
   },
   {
     "dirName": "whatsapp",
-    "categories": ["video"],
+    "categories": [
+      "video"
+    ],
     "slug": "whatsapp",
     "type": "whatsapp_video"
   },
   {
     "dirName": "telegram",
-    "categories": ["video"],
+    "categories": [
+      "video"
+    ],
     "slug": "telegram",
     "type": "telegram_video"
   },
   {
     "dirName": "signal",
-    "categories": ["video"],
+    "categories": [
+      "video"
+    ],
     "slug": "signal",
     "type": "signal_video"
   },
   {
     "dirName": "vimcal",
-    "categories": ["calendar"],
+    "categories": [
+      "calendar"
+    ],
     "slug": "vimcal",
     "type": "vimcal_other"
   },
   {
     "dirName": "amie",
-    "categories": ["calendar"],
+    "categories": [
+      "calendar"
+    ],
     "slug": "amie",
     "type": "amie_other"
   },
   {
     "dirName": "booking-pages-tag",
-    "categories": ["analytics"],
+    "categories": [
+      "analytics"
+    ],
     "slug": "booking-pages-tag",
     "type": "booking-pages-tag_other",
     "isTemplate": true
   },
   {
     "dirName": "event-type-app-card",
-    "categories": ["other"],
+    "categories": [
+      "other"
+    ],
     "slug": "event-type-app-card",
     "type": "event-type-app-card_other",
     "isTemplate": true
   },
   {
     "dirName": "event-type-location-video-static",
-    "categories": ["video"],
+    "categories": [
+      "video"
+    ],
     "slug": "event-type-location-video-static",
     "type": "event-type-location-video-static_other",
     "isTemplate": true
   },
   {
     "dirName": "general-app-settings",
-    "categories": ["other"],
+    "categories": [
+      "other"
+    ],
     "slug": "general-app-settings",
     "type": "general-app-settings_other",
     "isTemplate": true
   },
   {
     "dirName": "link-as-an-app",
-    "categories": ["other"],
+    "categories": [
+      "other"
+    ],
     "slug": "link-as-an-app",
     "type": "link-as-an-app_other",
     "isTemplate": true
   },
   {
     "dirName": "basic",
-    "categories": ["other"],
+    "categories": [
+      "other"
+    ],
     "slug": "basic",
     "type": "basic_other",
     "isTemplate": true
   },
   {
     "dirName": "facetime",
-    "categories": ["video"],
+    "categories": [
+      "video"
+    ],
     "slug": "facetime",
     "type": "facetime_video",
     "isTemplate": false
   },
   {
     "dirName": "zohocrm",
-    "categories": ["other"],
+    "categories": [
+      "other"
+    ],
     "slug": "zohocrm",
     "type": "zohocrm_other_calendar",
     "isTemplate": false
   },
   {
     "dirName": "cron",
-    "categories": ["calendar"],
+    "categories": [
+      "calendar"
+    ],
     "slug": "cron",
     "type": "cron_other",
     "isTemplate": false
+  },
+  {
+    "dirName": "google-tag-manager",
+    "categories": [
+      "analytics"
+    ],
+    "slug": "google-tag-manager",
+    "type": "google-tag-manager_analytics",
+    "isTemplate": false
   }
-]
+]