refactor(blog): change gtm initialization mechanism (#433)

Author: DDonochVA

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

@@ -82,6 +82,7 @@ export const cookieConsentConfig: CreateCookieConsentConfigFn = (cc) => {
     },
     onConsent: () => {
       updateGtagConsent(cc);
+      cc.loadScript('/assets/scripts/gtm.js');
     },
     onChange: () => {
       updateGtagConsent(cc);

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

@@ -1,7 +1,6 @@
 import { EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';
 
 import {
-  gtmScript,
   metaPixel,
   metaScript,
   provideTracking,
@@ -31,7 +30,7 @@ export const provideAppTracking = (): EnvironmentProviders => {
         ],
       },
       cookieConsent: cookieConsentConfig,
-      scripts: [gtmScript('GTM-5XNT5NS'), metaScript('284876369340184')],
+      scripts: [metaScript('284876369340184')],
       pixels: [metaPixel('284876369340184')],
     }),
   ]);

apps/blog/src/assets/scripts/gtm.js

@@ -0,0 +1,10 @@
+(function (w, d, s, l, i) {
+  w[l] = w[l] || [];
+  w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
+  var f = d.getElementsByTagName(s)[0],
+    j = d.createElement(s),
+    dl = l != 'dataLayer' ? '&l=' + l : '';
+  j.defer = true;
+  j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+  f.parentNode.insertBefore(j, f);
+})(window, document, 'script', 'dataLayer', 'GTM-5XNT5NS');

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

@@ -1,23 +1,6 @@
 import type * as CookieConsent from 'vanilla-cookieconsent';
 
 import { CATEGORIES, SERVICES } from '../const';
-import { ScriptFactory } from '../scripts-loader';
-
-export const gtmScript =
-  (id: string): ScriptFactory =>
-  (gtmScript) => {
-    gtmScript.setAttribute('type', 'text/plain');
-    gtmScript.setAttribute('data-category', 'necessary');
-    gtmScript.textContent = `(function (w, d, s, l, i) {
-  w[l] = w[l] || [];
-  w[l].push({'gtm.start': new Date().getTime(), event: 'gtm.js'});
-  var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
-  j.defer = true;
-  j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
-  f.parentNode.insertBefore(j, f);
-})(window, document, 'script', 'dataLayer', '${id}');`;
-    return gtmScript;
-  };
 
 type PushFn = (...args: any[]) => void;
 type DataLayer = {

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

@@ -1,8 +1,11 @@
+import { CATEGORIES } from '../const';
 import { ScriptFactory } from '../scripts-loader';
 
 export const metaScript =
   (id: string): ScriptFactory =>
   (gtmScript) => {
+    gtmScript.setAttribute('type', 'text/plain');
+    gtmScript.setAttribute('data-category', CATEGORIES.ANALYTICS);
     gtmScript.textContent = `!function(f,b,e,v,n,t,s)
 {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
 n.callMethod.apply(n,arguments):n.queue.push(arguments)};