fix: add optionalPrams properties in JSON data

src/third-parties/google-analytics/data.json

@@ -6,14 +6,16 @@
     {
       "url": "https://www.googletagmanager.com/gtag/js",
       "params": ["id", "l"],
+      "optionalParam": ["l"],
       "strategy": "worker",
       "location": "head",
       "action": "append",
       "key": "gtag"
     },
     {
-      "code": "window['{{l}}']=window['{{l}}']||[];window['{{l}}'].push({'js':new Date()});window['{{l}}'].push({'config':'{{id}}'})",
-      "params": ["id", "l"],
+      "code": "window[{{l}}??'dataLayer']=window[{{l}}??'dataLayer']||[];window[{{l}}??'dataLayer'].push({'js':new Date()});window[{{l}}??'dataLayer'].push({'config':{{id}}})",
+      "params": ["id"],
+      "optionalParam": ["l"],
       "strategy": "worker",
       "location": "head",
       "action": "append",

src/third-parties/google-tag-manager/data.json

@@ -6,14 +6,15 @@
       {
         "url": "https://www.googletagmanager.com/gtm.js",
         "params": ["id", "l"],
+        "optionalParam": ["l"],
         "strategy": "worker",
         "location": "head",
         "action": "append",
         "key": "gtm"
       },
       {
-        "code": "window['{{l}}']=window['{{l}}']||[];window['{{l}}'].push({'gtm.start':new Date().getTime(),event:'gtm.js'});",
-        "params": ["l"],
+        "code": "window[{{l}}??'dataLayer']=window[{{l}}??'dataLayer']||[];window[{{l}}??'dataLayer'].push({'gtm.start':new Date().getTime(),event:'gtm.js'});",
+        "optionalParam": ["l"],
         "strategy": "worker",
         "location": "head",
         "action": "append",

src/types/type-declarations.ts

@@ -17,6 +17,7 @@ export type HtmlAttributes = {
 
 type ScriptBase = {
   params?: Array<string>;
+  optionalParam?: Array<string>;
   strategy: ScriptStrategy;
   location: ScriptLocation;
   action: ScriptAction;

src/utils/index.test.ts

@@ -1,4 +1,4 @@
-import { formatUrl, createHtml, formatData } from '.';
+import { formatUrl, createHtml, formatData, formatCode } from '.';
 import type { Data, ExternalScript } from '../types';
 
 describe('Utils', () => {
@@ -231,4 +231,50 @@ describe('Utils', () => {
       expect(result.scripts).toEqual(undefined);
     });
   });
+  describe('formatCode', () => {
+    it.each([
+      // string
+      {
+        input: "window[{{l}}??'dataLayer']=window[{{l}}??'dataLayer']||[];",
+        params: {
+          l: 'some-datalayer',
+        },
+        output: `window["some-datalayer"??'dataLayer']=window["some-datalayer"??'dataLayer']||[];`,
+      },
+      // number
+      {
+        input: '{{number}}+1',
+        params: {
+          number: 4,
+        },
+        output: `4+1`,
+      },
+      // boolean
+      {
+        input: '{{bool}}',
+        params: {
+          bool: false,
+        },
+        output: `false`,
+      },
+      // null
+      {
+        input: '{{val}}',
+        params: {
+          val: null,
+        },
+        output: `null`,
+      },
+      // undefined
+      {
+        input: "window[{{l}}??'dataLayer']=window[{{l}}??'dataLayer']||[];",
+        output: `window[undefined??'dataLayer']=window[undefined??'dataLayer']||[];`,
+      },
+    ])(
+      'should replace the input and stringify it',
+      ({ input, output, params }) => {
+        expect(formatCode(input, params)).toEqual(output);
+      },
+    );
+  });
 });

src/utils/index.ts

@@ -47,7 +47,7 @@ export function formatUrl(
 
 export function formatCode(code: string, args?: Inputs) {
   return code.replace(/{{(.*?)}}/g, (match) => {
-    return args?.[match.split(/{{|}}/).filter(Boolean)[0]];
+    return JSON.stringify(args?.[match.split(/{{|}}/).filter(Boolean)[0]]);
   });
 }