fix: Remove global GTM container on private booking page. (calcom#21490)

* add route filter to inject script

* update middleware for pathname as Referer might not work all time

* move d to (booking-page-wrapper) instead of route filter and change in middleware

* add e2e tests

Author: vijayraghav-io

…e-page-wrapper)/d/[link]/[slug]/page.tsx …g-page-wrapper)/d/[link]/[slug]/page.tsxapps/web/app/(use-page-wrapper)/d/[link]/[slug]/page.tsx renamed to apps/web/app/(booking-page-wrapper)/d/[link]/[slug]/page.tsx apps/web/app/(use-page-wrapper)/d/[link]/[slug]/page.tsx renamed to apps/web/app/(booking-page-wrapper)/d/[link]/[slug]/page.tsx

@@ -2,6 +2,7 @@ import { expect } from "@playwright/test";
 import { JSDOM } from "jsdom";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
+import { generateHashedLink } from "@calcom/lib/generateHashedLink";
 import { randomString } from "@calcom/lib/random";
 import { SchedulingType } from "@calcom/prisma/client";
 import type { Schedule, TimeRange } from "@calcom/types/schedule";
@@ -694,3 +695,63 @@ test("Should throw error when both seatsPerTimeSlot and recurringEvent are set",
     "Could not book the meeting. Recurring event doesn't support seats feature. Disable seats feature or make the event non-recurring."
   );
 });
+
+test.describe("GTM container", () => {
+  test.beforeEach(async ({ page, users }) => {
+    await users.create();
+  });
+
+  test("global GTM should not be loaded on private booking link", async ({ page, users, emails, prisma }) => {
+    const [user] = users.get();
+    const eventType = await user.getFirstEventAsOwner();
+
+    const eventWithPrivateLink = await prisma.eventType.update({
+      where: {
+        id: eventType.id,
+      },
+      data: {
+        hashedLink: {
+          create: [
+            {
+              link: generateHashedLink(eventType.id),
+            },
+          ],
+        },
+      },
+      include: {
+        hashedLink: true,
+      },
+    });
+
+    const getScheduleRespPromise = page.waitForResponse(
+      (response) => response.url().includes("getSchedule") && response.status() === 200
+    );
+    await page.goto(`/d/${eventWithPrivateLink.hashedLink[0]?.link}/${eventWithPrivateLink.slug}`);
+    await page.waitForLoadState("domcontentloaded");
+    await getScheduleRespPromise;
+
+    const injectedScript = page.locator('script[id="injected-body-script"]');
+    await expect(injectedScript).not.toBeAttached();
+  });
+
+  test("global GTM should be loaded on non-booking pages", async ({ page, users }) => {
+    test.skip(!process.env.NEXT_PUBLIC_BODY_SCRIPTS, "Skipping test as NEXT_PUBLIC_BODY_SCRIPTS is not set");
+
+    const [user] = users.get();
+    await user.apiLogin();
+
+    // Go to /insights page and wait for one of the common API call to complete
+    const eventsByStatusRespPromise = page.waitForResponse(
+      (response) => response.url().includes("getEventTypesFromGroup") && response.status() === 200
+    );
+    await page.goto(`/insights`);
+    await page.waitForLoadState("domcontentloaded");
+    await eventsByStatusRespPromise;
+
+    const injectedScript = page.locator('script[id="injected-body-script"]');
+    await expect(injectedScript).toBeAttached();
+
+    const scriptContent = await injectedScript.textContent();
+    expect(scriptContent).toContain("googletagmanager");
+  });
+});