fix: meta pixel (#254)

Author: DDonochVA

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

@@ -2,6 +2,7 @@ import { EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';
 
 import {
   gtmScript,
+  metaPixel,
   metaScript,
   provideTracking,
 } from '@angular-love/blog/tracking/feature';
@@ -26,6 +27,7 @@ export const provideAppTracking = (): EnvironmentProviders => {
           ],
         },
         scripts: [gtmScript('GTM-5XNT5NS'), metaScript('284876369340184')],
+        pixels: [metaPixel('284876369340184')],
       },
       cookieConsent: cookieConsentConfig,
     }),

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

@@ -1,3 +1,4 @@
 export * from './lib/tracking';
 export * from './lib/partytown/gtm-script';
 export * from './lib/partytown/meta-script';
+export * from './lib/partytown/meta-pixel';

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

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

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

@@ -0,0 +1,15 @@
+import { PartyTownPixelFactory } from './partytown.service';
+
+export const metaPixel =
+  (id: string): PartyTownPixelFactory =>
+  (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/partytown/partytown.service.ts

@@ -22,6 +22,7 @@ export type PartyTownConfig = {
     proxiedHosts?: string[];
   };
   scripts?: PartyTownScriptFactory[];
+  pixels?: PartyTownPixelFactory[];
 };
 
 export const PARTY_TOWN_CONFIG = new InjectionToken<PartyTownConfig>(
@@ -46,6 +47,7 @@ export const providePartyTown = (
           proxiedHosts: config.partyTown?.proxiedHosts ?? [],
         },
         scripts: config?.scripts ?? [],
+        pixels: config?.pixels ?? [],
       } satisfies PartyTownConfig,
     },
     PartyTownService,
@@ -69,6 +71,8 @@ export type PartyTownScriptFactory = (
   scriptElement: HTMLScriptElement,
 ) => HTMLScriptElement;
 
+export type PartyTownPixelFactory = (img: HTMLImageElement) => HTMLImageElement;
+
 @Injectable()
 export class PartyTownService {
   private readonly _config = inject(PARTY_TOWN_CONFIG, { optional: true });
@@ -78,6 +82,7 @@ export class PartyTownService {
     if (this._config?.partyTown?.enabled) {
       this.initPartyTownScript();
       this.initScripts(...(this._config.scripts ?? []));
+      this.initPixels(...(this._config.pixels ?? []));
     }
   }
 
@@ -89,6 +94,16 @@ 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;