fix: gtm preview mode (#268)

Author: DDonochVA

apps/blog/src/app/providers/tracking/cookie-consent.config.ts

@@ -1,5 +1,13 @@
 import type { CookieConsentConfig } from 'vanilla-cookieconsent';
 
+declare global {
+  interface Window {
+    dataLayer: {
+      push: (...args: any[]) => void;
+    };
+  }
+}
+
 export const cookieConsentConfig = {
   categories: {
     necessary: {
@@ -14,11 +22,18 @@ export const cookieConsentConfig = {
       enabled: false,
       readOnly: false,
     },
+    ads: {},
+  },
+  onConsent: () => {
+    window.dataLayer.push({ event: 'consent_update' });
+    window.dispatchEvent(new CustomEvent('ptupdate'));
   },
   onChange: () => {
+    window.dataLayer.push({ event: 'consent_update_change' });
     window.dispatchEvent(new CustomEvent('ptupdate'));
   },
   onFirstConsent: () => {
+    window.dataLayer.push({ event: 'consent_update_first' });
     window.dispatchEvent(new CustomEvent('ptupdate'));
   },
   language: {

apps/blog/src/app/providers/tracking/tracking.provider.ts

@@ -1,9 +1,9 @@
 import { EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';
 
 import {
+  consent,
+  gtag,
   gtmScript,
-  metaPixel,
-  metaScript,
   provideTracking,
 } from '@angular-love/blog/tracking/feature';
 
@@ -14,6 +14,10 @@ export const provideAppTracking = (): EnvironmentProviders => {
     provideTracking({
       partyTown: {
         partyTown: {
+          forward: [
+            ['dataLayer.push', { preserveBehavior: true }],
+            ['fbq', { preserveBehavior: true }],
+          ],
           enabled: true,
           reverseProxy: 'https://reverse.contact-ef8.workers.dev/',
           proxiedHosts: [
@@ -27,8 +31,14 @@ export const provideAppTracking = (): EnvironmentProviders => {
             'static.ads-twitter.com',
           ],
         },
-        scripts: [gtmScript('GTM-5XNT5NS'), metaScript('284876369340184')],
-        pixels: [metaPixel('284876369340184')],
+        scripts: [
+          gtag(),
+          gtmScript('GTM-5XNT5NS'),
+          consent('ads', 'ad_storage', 'granted'),
+          consent('ads', 'ad_storage', 'denied'),
+          consent('analytics', 'analytics_storage', 'granted'),
+          consent('analytics', 'analytics_storage', 'denied'),
+        ],
       },
       cookieConsent: cookieConsentConfig,
     }),

apps/blog/src/environments/environment.ts

@@ -1,6 +1,7 @@
 import { provideConfig } from '@angular-love/shared/config';
 
 import { AppEnvironment } from './app-environment';
+import { provideAppTracking } from "../app/providers/tracking";
 
 export const environment: AppEnvironment = {
   baseUrl: process.env.AL_BASE_URL,
@@ -16,5 +17,6 @@ export const environment: AppEnvironment = {
       giscusCategory: process.env.AL_GISCUS_CATEGORY,
       giscusCategoryId: process.env.AL_GISCUS_CATEGORY_ID,
     }),
+    provideAppTracking(),
   ],
 };

libs/blog/tracking/feature/src/lib/partytown/gtm-script.ts

@@ -1,11 +1,21 @@
 import { PartyTownScriptFactory } from './partytown.service';
 
+export const gtag = (): PartyTownScriptFactory => (gtmScript) => {
+  gtmScript.textContent = `
+             window.dataLayer = window.dataLayer || [];
+            window.gtag = function gtag(){dataLayer.push(arguments);}
+    
+            gtag('consent', 'default', {
+              'ad_storage': 'denied',
+              'analytics_storage': 'denied'
+            });
+        `;
+  return gtmScript;
+};
+
 export const gtmScript =
   (id: string): PartyTownScriptFactory =>
   (gtmScript) => {
-    gtmScript.setAttribute('type', 'text/plain');
-    gtmScript.setAttribute('data-type', 'text/partytown');
-    gtmScript.setAttribute('data-category', 'analytics');
     gtmScript.textContent = `(function (w, d, s, l, i) {
   w[l] = w[l] || [];
   w[l].push({'gtm.start': new Date().getTime(), event: 'gtm.js'});
@@ -16,3 +26,23 @@ export const gtmScript =
 })(window, document, 'script', 'dataLayer', '${id}');`;
     return gtmScript;
   };
+
+export const consent =
+  (
+    category: 'analytics' | 'ads',
+    consentType: 'ad_storage' | 'analytics_storage',
+    status: 'granted' | 'denied',
+  ): PartyTownScriptFactory =>
+  (gtmScript) => {
+    gtmScript.setAttribute('type', 'text/plain');
+    gtmScript.setAttribute(
+      'data-category',
+      status === 'granted' ? category : `!${category}`,
+    );
+    gtmScript.textContent = `
+    gtag('consent', 'update', {
+        '${consentType}': '${status}'
+    });
+`;
+    return gtmScript;
+  };

libs/blog/tracking/feature/src/lib/partytown/partytown.service.ts

@@ -8,8 +8,6 @@ import {
   makeEnvironmentProviders,
   PLATFORM_ID,
 } from '@angular/core';
-import { NavigationStart, Router } from '@angular/router';
-import { filter, first, tap } from 'rxjs';
 
 /**
  * Credits https://github.com/find-ida/angular-ssr-partytown
@@ -19,7 +17,7 @@ export type PartyTownConfig = {
     enabled: boolean;
     debug?: boolean;
     basePath?: string;
-    forward?: string[];
+    forward?: (string | [string, { preserveBehavior: boolean }])[];
     reverseProxy?: string;
     proxiedHosts?: string[];
   };
@@ -44,7 +42,7 @@ export const providePartyTown = (
           enabled: config.partyTown?.enabled ?? false,
           debug: config.partyTown?.debug ?? false,
           basePath: config.partyTown?.basePath ?? '/~partytown',
-          forward: config.partyTown?.forward ?? ['dataLayer.push', 'fbq'],
+          forward: config.partyTown?.forward ?? [],
           reverseProxy: config.partyTown?.reverseProxy ?? '',
           proxiedHosts: config.partyTown?.proxiedHosts ?? [],
         },
@@ -79,28 +77,14 @@ export type PartyTownPixelFactory = (img: HTMLImageElement) => HTMLImageElement;
 export class PartyTownService {
   private readonly _config = inject(PARTY_TOWN_CONFIG, { optional: true });
   private readonly _document = inject(DOCUMENT);
-  private readonly _router = inject(Router);
 
   init(): void {
     if (this._config?.partyTown?.enabled) {
-      this._router.events
-        .pipe(
-          filter((ev): ev is NavigationStart => ev instanceof NavigationStart),
-          tap({
-            next: (asd) => {
-              this.initPartyTownScript();
-              const disablePartyTown = asd.url.includes('gtm_debug=');
+      this.initPartyTownScript();
+      const disablePartyTown = window.location.search.includes('gtm_debug=');
 
-              this.initScripts(
-                disablePartyTown,
-                ...(this._config?.scripts ?? []),
-              );
-              this.initPixels(...(this._config?.pixels ?? []));
-            },
-          }),
-          first(),
-        )
-        .subscribe();
+      this.initScripts(disablePartyTown, ...(this._config?.scripts ?? []));
+      this.initPixels(...(this._config?.pixels ?? []));
     }
   }
 
@@ -111,11 +95,16 @@ export class PartyTownService {
     scripts.forEach((script) => {
       const scriptElement = this._document.createElement('script');
       const _script = script(scriptElement);
-      if (disablePartyTown) {
-        _script.removeAttribute('data-type');
+      if (!disablePartyTown) {
+        if (_script.type) {
+          _script.setAttribute('data-type', 'text/partytown');
+        } else {
+          _script.setAttribute('type', 'text/partytown');
+        }
       }
 
       this._document.head.appendChild(_script);
+      window.dispatchEvent(new CustomEvent('ptupdate'));
     });
   }