refactor: disable partytown (#269)

DDonochVA · web-flow · commit 763bb0371f97 · 2024-07-18T09:52:54.000+02:00
diff --git a/apps/blog/project.json b/apps/blog/project.json
@@ -25,12 +25,7 @@
         "assets": [
           "apps/blog/src/assets",
           "apps/blog/src/sitemap.xml",
-          "apps/blog/src/_redirects",
-          {
-            "glob": "**/*",
-            "input": "node_modules/@builder.io/partytown/lib",
-            "output": "/~partytown"
-          }
+          "apps/blog/src/_redirects"
         ],
         "styles": [
           "apps/blog/src/styles.scss",
diff --git a/apps/blog/src/app/providers/tracking/tracking.provider.ts b/apps/blog/src/app/providers/tracking/tracking.provider.ts
@@ -1,9 +1,10 @@
 import { EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';
 
 import {
-  consent,
-  gtag,
+  consentUpdateScript,
   gtmScript,
+  initialConsentScript,
+  metaScript,
   provideTracking,
 } from '@angular-love/blog/tracking/feature';
 
@@ -13,34 +14,33 @@ export const provideAppTracking = (): EnvironmentProviders => {
   return makeEnvironmentProviders([
     provideTracking({
       partyTown: {
-        partyTown: {
-          forward: [
-            ['dataLayer.push', { preserveBehavior: true }],
-            ['fbq', { preserveBehavior: true }],
-          ],
-          enabled: true,
-          reverseProxy: 'https://reverse.contact-ef8.workers.dev/',
-          proxiedHosts: [
-            'region1.analytics.google.com',
-            'www.google-analytics.com',
-            'www.googletagmanager.com',
-            'googletagmanager.com',
-            'connect.facebook.net',
-            'googleads.g.doubleclick.net',
-            'snap.licdn.com',
-            'static.ads-twitter.com',
-          ],
-        },
-        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'),
+        forward: [
+          ['dataLayer.push', { preserveBehavior: true }],
+          ['fbq', { preserveBehavior: true }],
+        ],
+        enabled: false,
+        reverseProxy: 'https://reverse.contact-ef8.workers.dev/',
+        proxiedHosts: [
+          'region1.analytics.google.com',
+          'www.google-analytics.com',
+          'www.googletagmanager.com',
+          'googletagmanager.com',
+          'connect.facebook.net',
+          'googleads.g.doubleclick.net',
+          'snap.licdn.com',
+          'static.ads-twitter.com',
         ],
       },
       cookieConsent: cookieConsentConfig,
+      scripts: [
+        initialConsentScript(),
+        gtmScript('GTM-5XNT5NS'),
+        consentUpdateScript('ads', 'ad_storage', 'granted'),
+        consentUpdateScript('ads', 'ad_storage', 'denied'),
+        consentUpdateScript('analytics', 'analytics_storage', 'granted'),
+        consentUpdateScript('analytics', 'analytics_storage', 'denied'),
+        metaScript('284876369340184'),
+      ],
     }),
   ]);
 };
diff --git a/apps/blog/src/environments/environment.ts b/apps/blog/src/environments/environment.ts
@@ -1,7 +1,6 @@
 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,
@@ -17,6 +16,5 @@ export const environment: AppEnvironment = {
       giscusCategory: process.env.AL_GISCUS_CATEGORY,
       giscusCategoryId: process.env.AL_GISCUS_CATEGORY_ID,
     }),
-    provideAppTracking(),
   ],
 };
diff --git a/libs/blog/tracking/feature/src/index.ts b/libs/blog/tracking/feature/src/index.ts
@@ -1,4 +1,2 @@
 export * from './lib/tracking';
-export * from './lib/partytown/gtm-script';
-export * from './lib/partytown/meta-script';
-export * from './lib/partytown/meta-pixel';
+export * from './lib/scripts';
diff --git a/libs/blog/tracking/feature/src/lib/partytown/index.ts b/libs/blog/tracking/feature/src/lib/partytown/index.ts
@@ -1,4 +1 @@
-export * from './gtm-script';
-export * from './meta-script';
 export * from './partytown.service';
-export * from './meta-pixel';
diff --git a/libs/blog/tracking/feature/src/lib/partytown/meta-pixel.ts b/libs/blog/tracking/feature/src/lib/partytown/meta-pixel.ts
diff --git a/libs/blog/tracking/feature/src/lib/partytown/partytown.service.ts b/libs/blog/tracking/feature/src/lib/partytown/partytown.service.ts
@@ -9,20 +9,18 @@ import {
   PLATFORM_ID,
 } from '@angular/core';
 
+import { ScriptFactory, ScriptsLoader } from '../scripts-loader';
+
 /**
  * Credits https://github.com/find-ida/angular-ssr-partytown
  */
 export type PartyTownConfig = {
-  partyTown?: {
-    enabled: boolean;
-    debug?: boolean;
-    basePath?: string;
-    forward?: (string | [string, { preserveBehavior: boolean }])[];
-    reverseProxy?: string;
-    proxiedHosts?: string[];
-  };
-  scripts?: PartyTownScriptFactory[];
-  pixels?: PartyTownPixelFactory[];
+  enabled: boolean;
+  debug?: boolean;
+  basePath?: string;
+  forward?: (string | [string, { preserveBehavior: boolean }])[];
+  reverseProxy?: string;
+  proxiedHosts?: string[];
 };
 
 export const PARTY_TOWN_CONFIG = new InjectionToken<PartyTownConfig>(
@@ -37,60 +35,34 @@ export const providePartyTown = (
       provide: PARTY_TOWN_CONFIG,
       useValue: {
         ...config,
-        partyTown: {
-          ...config.partyTown,
-          enabled: config.partyTown?.enabled ?? false,
-          debug: config.partyTown?.debug ?? false,
-          basePath: config.partyTown?.basePath ?? '/~partytown',
-          forward: config.partyTown?.forward ?? [],
-          reverseProxy: config.partyTown?.reverseProxy ?? '',
-          proxiedHosts: config.partyTown?.proxiedHosts ?? [],
-        },
-        scripts: config?.scripts ?? [],
-        pixels: config?.pixels ?? [],
+        enabled: config?.enabled ?? false,
+        debug: config?.debug ?? false,
+        basePath: config?.basePath ?? '/~partytown',
+        forward: config?.forward ?? [],
+        reverseProxy: config?.reverseProxy ?? '',
+        proxiedHosts: config?.proxiedHosts ?? [],
       } satisfies PartyTownConfig,
     },
     PartyTownService,
-    {
-      provide: APP_INITIALIZER,
-      multi: true,
-      useFactory: () => {
-        const platformId = inject(PLATFORM_ID);
-        const partyTownService = inject(PartyTownService);
-
-        return () => {
-          if (config.partyTown?.enabled && isPlatformBrowser(platformId)) {
-            partyTownService.init();
-          }
-        };
-      },
-    },
   ]);
 
-export type PartyTownScriptFactory = (
-  scriptElement: HTMLScriptElement,
-) => HTMLScriptElement;
-
-export type PartyTownPixelFactory = (img: HTMLImageElement) => HTMLImageElement;
-
 @Injectable()
-export class PartyTownService {
+export class PartyTownService implements ScriptsLoader {
   private readonly _config = inject(PARTY_TOWN_CONFIG, { optional: true });
   private readonly _document = inject(DOCUMENT);
 
-  init(): void {
-    if (this._config?.partyTown?.enabled) {
+  init(scripts: ScriptFactory[]): void {
+    if (this._config?.enabled) {
       this.initPartyTownScript();
       const disablePartyTown = window.location.search.includes('gtm_debug=');
 
-      this.initScripts(disablePartyTown, ...(this._config?.scripts ?? []));
-      this.initPixels(...(this._config?.pixels ?? []));
+      this.initScripts(disablePartyTown, ...(scripts ?? []));
     }
   }
 
   private initScripts(
     disablePartyTown = false,
-    ...scripts: PartyTownScriptFactory[]
+    ...scripts: ScriptFactory[]
   ): void {
     scripts.forEach((script) => {
       const scriptElement = this._document.createElement('script');
@@ -108,19 +80,9 @@ export class PartyTownService {
     });
   }
 
-  private initPixels(...scripts: PartyTownPixelFactory[]): void {
-    scripts.forEach((pixel) => {
-      const noScriptElement = this._document.createElement('noscript');
-      const pixelElement = this._document.createElement('img');
-      const _pixel = pixel(pixelElement);
-      noScriptElement.append(_pixel);
-      this._document.head.appendChild(noScriptElement);
-    });
-  }
-
   private initPartyTownScript(): void {
-    if (!this._config?.partyTown) return;
-    const config = this._config.partyTown;
+    if (!this._config) return;
+    const config = this._config;
 
     // Config Script
     const partyTownConfigurationScript = this._document.createElement('script');
diff --git a/libs/blog/tracking/feature/src/lib/scripts-loader.service.ts b/libs/blog/tracking/feature/src/lib/scripts-loader.service.ts
@@ -0,0 +1,17 @@
+import { DOCUMENT } from '@angular/common';
+import { inject, Injectable } from '@angular/core';
+
+import { ScriptFactory, ScriptsLoader } from './scripts-loader';
+
+@Injectable()
+export class ScriptsLoaderService implements ScriptsLoader {
+  private readonly _document = inject(DOCUMENT);
+
+  init(scripts: ScriptFactory[]): void {
+    scripts.forEach((script) => {
+      const scriptElement = this._document.createElement('script');
+      const _script = script(scriptElement);
+      this._document.head.appendChild(_script);
+    });
+  }
+}
diff --git a/libs/blog/tracking/feature/src/lib/scripts-loader.ts b/libs/blog/tracking/feature/src/lib/scripts-loader.ts
@@ -0,0 +1,7 @@
+export type ScriptFactory = (
+  scriptElement: HTMLScriptElement,
+) => HTMLScriptElement;
+
+export abstract class ScriptsLoader {
+  abstract init(scripts: ScriptFactory[]): void;
+}
diff --git a/libs/blog/tracking/feature/src/lib/scripts/gtm-script.ts b/libs/blog/tracking/feature/src/lib/scripts/gtm-script.ts
@@ -1,6 +1,6 @@
-import { PartyTownScriptFactory } from './partytown.service';
+import { ScriptFactory } from '../scripts-loader';
 
-export const gtag = (): PartyTownScriptFactory => (gtmScript) => {
+export const initialConsentScript = (): ScriptFactory => (gtmScript) => {
   gtmScript.textContent = `
              window.dataLayer = window.dataLayer || [];
             window.gtag = function gtag(){dataLayer.push(arguments);}
@@ -14,7 +14,7 @@ export const gtag = (): PartyTownScriptFactory => (gtmScript) => {
 };
 
 export const gtmScript =
-  (id: string): PartyTownScriptFactory =>
+  (id: string): ScriptFactory =>
   (gtmScript) => {
     gtmScript.textContent = `(function (w, d, s, l, i) {
   w[l] = w[l] || [];
@@ -27,12 +27,12 @@ export const gtmScript =
     return gtmScript;
   };
 
-export const consent =
+export const consentUpdateScript =
   (
     category: 'analytics' | 'ads',
     consentType: 'ad_storage' | 'analytics_storage',
     status: 'granted' | 'denied',
-  ): PartyTownScriptFactory =>
+  ): ScriptFactory =>
   (gtmScript) => {
     gtmScript.setAttribute('type', 'text/plain');
     gtmScript.setAttribute(
diff --git a/libs/blog/tracking/feature/src/lib/scripts/index.ts b/libs/blog/tracking/feature/src/lib/scripts/index.ts
@@ -0,0 +1,2 @@
+export * from './gtm-script';
+export * from './meta-script';
diff --git a/libs/blog/tracking/feature/src/lib/scripts/meta-script.ts b/libs/blog/tracking/feature/src/lib/scripts/meta-script.ts
@@ -1,7 +1,7 @@
-import { PartyTownScriptFactory } from './partytown.service';
+import { ScriptFactory } from '../scripts-loader';
 
 export const metaScript =
-  (id: string): PartyTownScriptFactory =>
+  (id: string): ScriptFactory =>
   (gtmScript) => {
     gtmScript.setAttribute('type', 'text/plain');
     gtmScript.setAttribute('data-type', 'text/partytown');
diff --git a/libs/blog/tracking/feature/src/lib/tracking.ts b/libs/blog/tracking/feature/src/lib/tracking.ts
@@ -1,19 +1,61 @@
-import { EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import {
+  APP_INITIALIZER,
+  EnvironmentProviders,
+  inject,
+  makeEnvironmentProviders,
+  PLATFORM_ID,
+} from '@angular/core';
 import type { CookieConsentConfig } from 'vanilla-cookieconsent';
 
 import { provideCookieConsent } from './cookie-consent/cookie-consent.provider';
-import { PartyTownConfig, providePartyTown } from './partytown';
+import {
+  PartyTownConfig,
+  PartyTownService,
+  providePartyTown,
+} from './partytown';
+import { ScriptFactory, ScriptsLoader } from './scripts-loader';
+import { ScriptsLoaderService } from './scripts-loader.service';
 
 export type TrackingConfig = {
   partyTown: PartyTownConfig;
   cookieConsent: CookieConsentConfig;
+  scripts?: ScriptFactory[];
 };
 
 export const provideTracking = (
   config: TrackingConfig,
 ): EnvironmentProviders => {
   return makeEnvironmentProviders([
-    providePartyTown(config.partyTown),
+    ...(config.partyTown?.enabled
+      ? [
+          providePartyTown(config.partyTown),
+          {
+            provide: ScriptsLoader,
+            useClass: PartyTownService,
+          },
+        ]
+      : [
+          ScriptsLoaderService,
+          {
+            provide: ScriptsLoader,
+            useClass: ScriptsLoaderService,
+          },
+        ]),
     provideCookieConsent(config.cookieConsent),
+    {
+      provide: APP_INITIALIZER,
+      multi: true,
+      useFactory: () => {
+        const platformId = inject(PLATFORM_ID);
+        const scriptsLoader = inject(ScriptsLoader);
+
+        return () => {
+          if (isPlatformBrowser(platformId)) {
+            scriptsLoader.init(config.scripts ?? []);
+          }
+        };
+      },
+    },
   ]);
 };
