fix: meta pixel (#270)

Author: DDonochVA

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

@@ -24,6 +24,9 @@ export const cookieConsentConfig = {
     },
     ads: {},
   },
+  cookie: {
+    name: 'cc_cookie_al',
+  },
   onConsent: () => {
     window.dataLayer.push({ event: 'consent_update' });
     window.dispatchEvent(new CustomEvent('ptupdate'));

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

@@ -4,6 +4,7 @@ import {
   consentUpdateScript,
   gtmScript,
   initialConsentScript,
+  metaPixel,
   metaScript,
   provideTracking,
 } from '@angular-love/blog/tracking/feature';
@@ -41,6 +42,7 @@ export const provideAppTracking = (): EnvironmentProviders => {
         consentUpdateScript('analytics', 'analytics_storage', 'denied'),
         metaScript('284876369340184'),
       ],
+      pixels: [metaPixel('284876369340184')],
     }),
   ]);
 };

apps/blog/src/environments/environment.ts

@@ -1,5 +1,7 @@
 import { provideConfig } from '@angular-love/shared/config';
 
+import { provideAppTracking } from '../app/providers/tracking';
+
 import { AppEnvironment } from './app-environment';
 
 export const environment: AppEnvironment = {
@@ -16,5 +18,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/partytown.service.ts

@@ -1,15 +1,13 @@
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { DOCUMENT } from '@angular/common';
 import {
-  APP_INITIALIZER,
   EnvironmentProviders,
   inject,
   Injectable,
   InjectionToken,
   makeEnvironmentProviders,
-  PLATFORM_ID,
 } from '@angular/core';
 
-import { ScriptFactory, ScriptsLoader } from '../scripts-loader';
+import { PixelFactory, ScriptFactory, ScriptsLoader } from '../scripts-loader';
 
 /**
  * Credits https://github.com/find-ida/angular-ssr-partytown
@@ -51,12 +49,13 @@ export class PartyTownService implements ScriptsLoader {
   private readonly _config = inject(PARTY_TOWN_CONFIG, { optional: true });
   private readonly _document = inject(DOCUMENT);
 
-  init(scripts: ScriptFactory[]): void {
+  init(scripts: ScriptFactory[], pixels: PixelFactory[]): void {
     if (this._config?.enabled) {
       this.initPartyTownScript();
       const disablePartyTown = window.location.search.includes('gtm_debug=');
 
       this.initScripts(disablePartyTown, ...(scripts ?? []));
+      this.initPixels(pixels);
     }
   }
 
@@ -80,6 +79,16 @@ export class PartyTownService implements ScriptsLoader {
     });
   }
 
+  private initPixels(pixels: PixelFactory[]): void {
+    pixels.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) return;
     const config = this._config;

libs/blog/tracking/feature/src/lib/scripts-loader.service.ts

@@ -1,17 +1,25 @@
 import { DOCUMENT } from '@angular/common';
 import { inject, Injectable } from '@angular/core';
 
-import { ScriptFactory, ScriptsLoader } from './scripts-loader';
+import { PixelFactory, ScriptFactory, ScriptsLoader } from './scripts-loader';
 
 @Injectable()
 export class ScriptsLoaderService implements ScriptsLoader {
   private readonly _document = inject(DOCUMENT);
 
-  init(scripts: ScriptFactory[]): void {
+  init(scripts: ScriptFactory[], pixels: PixelFactory[]): void {
     scripts.forEach((script) => {
       const scriptElement = this._document.createElement('script');
       const _script = script(scriptElement);
       this._document.head.appendChild(_script);
     });
+
+    pixels.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);
+    });
   }
 }

libs/blog/tracking/feature/src/lib/scripts-loader.ts

@@ -2,6 +2,8 @@ export type ScriptFactory = (
   scriptElement: HTMLScriptElement,
 ) => HTMLScriptElement;
 
+export type PixelFactory = (pixel: HTMLElement) => HTMLElement;
+
 export abstract class ScriptsLoader {
-  abstract init(scripts: ScriptFactory[]): void;
+  abstract init(scripts: ScriptFactory[], pixels: PixelFactory[]): void;
 }

libs/blog/tracking/feature/src/lib/scripts/index.ts

@@ -1,2 +1,3 @@
 export * from './gtm-script';
 export * from './meta-script';
+export * from './meta-pixel';

libs/blog/tracking/feature/src/lib/scripts/meta-pixel.ts

@@ -0,0 +1,15 @@
+import { PixelFactory } from '../scripts-loader';
+
+export const metaPixel =
+  (id: string): PixelFactory =>
+  (pixel) => {
+    pixel.setAttribute('height', '1');
+    pixel.setAttribute('width', '1');
+    pixel.setAttribute('style', 'display:none');
+    pixel.setAttribute(
+      'src',
+      `https://www.facebook.com/tr?id=${id}&ev=PageView&noscript=1`,
+    );
+
+    return pixel;
+  };

libs/blog/tracking/feature/src/lib/scripts/meta-script.ts

@@ -4,7 +4,6 @@ export const metaScript =
   (id: string): ScriptFactory =>
   (gtmScript) => {
     gtmScript.setAttribute('type', 'text/plain');
-    gtmScript.setAttribute('data-type', 'text/partytown');
     gtmScript.setAttribute('data-category', 'marketing');
     gtmScript.textContent = `!function(f,b,e,v,n,t,s)
 {if(f.fbq)return;n=f.fbq=function(){n.callMethod?

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

@@ -14,13 +14,14 @@ import {
   PartyTownService,
   providePartyTown,
 } from './partytown';
-import { ScriptFactory, ScriptsLoader } from './scripts-loader';
+import { PixelFactory, ScriptFactory, ScriptsLoader } from './scripts-loader';
 import { ScriptsLoaderService } from './scripts-loader.service';
 
 export type TrackingConfig = {
   partyTown: PartyTownConfig;
   cookieConsent: CookieConsentConfig;
   scripts?: ScriptFactory[];
+  pixels?: PixelFactory[];
 };
 
 export const provideTracking = (
@@ -52,7 +53,7 @@ export const provideTracking = (
 
         return () => {
           if (isPlatformBrowser(platformId)) {
-            scriptsLoader.init(config.scripts ?? []);
+            scriptsLoader.init(config.scripts ?? [], config.pixels ?? []);
           }
         };
       },