Develop

libs/data-access/src/lib/services/gtm-json-converter/transform/managers/variable-manager.service.ts

@@ -1,20 +1,20 @@
 import { Injectable } from '@angular/core';
 import { DataLayer, EventSettingsVariable, VariableConfig } from '@utils';
 import { DataLayerVariable } from '../variables/data-layer-variable.service';
-import { RegexVariable } from '../variables/regex-variable.service';
 import { ScrollVariable } from '../variables/scroll-variable.service';
 import { VideoVariable } from '../variables/video-variable.service';
 import { EventUtils } from '../../utils/event-utils.service';
+import { ConstantVariable } from '../variables/constant-variable.service';
 
 @Injectable({
   providedIn: 'root'
 })
 export class VariableManager {
   constructor(
     private dataLayerVariable: DataLayerVariable,
-    private regexVariable: RegexVariable,
     private scrollVariable: ScrollVariable,
     private videoVariable: VideoVariable,
+    private constantVariable: ConstantVariable,
     private eventUtils: EventUtils
   ) {}
   getBuiltInVariables(
@@ -45,6 +45,7 @@ export class VariableManager {
   getVariables(
     accountId: string,
     containerId: string,
+    measurementId: string,
     dataLayers: DataLayer[],
     esvConent: EventSettingsVariable[]
   ): VariableConfig[] {
@@ -65,11 +66,11 @@ export class VariableManager {
       return !duplicate;
     });
 
-    console.log('uniqueVariables: ', uniqueVariables);
-    const regexMeasurementIdVariable =
-      this.regexVariable.createRegexMeasurementIdVariable(
+    const constantMeasurementIdVariable =
+      this.constantVariable.createMeasurementIdConstantVariable(
         accountId,
-        containerId
+        containerId,
+        measurementId
       );
 
     const eventSettingsVariable =
@@ -81,7 +82,7 @@ export class VariableManager {
 
     return [
       ...uniqueVariables,
-      regexMeasurementIdVariable,
+      constantMeasurementIdVariable,
       ...eventSettingsVariable
     ].map((data, index) => ({
       ...data,

libs/data-access/src/lib/services/gtm-json-converter/transform/tags/google-tag.service.ts

@@ -13,23 +13,22 @@ export class GoogleTag {
     accountId: string,
     containerId: string
   ): TagConfig {
-    const measurementIdParameter = measurementId
-      ? measurementId
-      : '{{Measurement ID}}';
+    // create a constant for the measurementIdParameter
+    // let users define the measurementIdParameter in the GTM UI
     return {
       name: googleTagName,
-      type: 'gaawc',
+      type: 'googtag',
       accountId,
       containerId,
       parameter: [
+        this.parameterUtils.createTemplateParameter(
+          'tagId',
+          `{{CONST - Measurement ID}}`
+        ),
         this.parameterUtils.createBooleanParameter('sendPageView', 'false'),
         this.parameterUtils.createBooleanParameter(
           'enableSendToServerContainer',
           'false'
-        ),
-        this.parameterUtils.createTemplateParameter(
-          'measurementId',
-          `${measurementIdParameter}`
         )
       ],
       firingTriggerId: ['2147479553'],

libs/data-access/src/lib/services/gtm-json-converter/transform/tags/google-tag.spec.ts

@@ -51,15 +51,15 @@ describe('Google Tag', () => {
     );
 
     // Assert
-    expect(result).toEqual({
+    const expectedTag: TagConfig = {
       name: 'TestGoogleTag',
-      type: 'gaawc',
+      type: 'googtag',
       accountId: 'account123',
       containerId: 'container456',
       parameter: [
+        { type: 'TEMPLATE', key: 'measurementId', value: 'G-12345678' },
         { type: 'BOOLEAN', key: 'sendPageView', value: 'false' },
-        { type: 'BOOLEAN', key: 'enableSendToServerContainer', value: 'false' },
-        { type: 'TEMPLATE', key: 'measurementId', value: 'G-12345678' }
+        { type: 'BOOLEAN', key: 'enableSendToServerContainer', value: 'false' }
       ],
       firingTriggerId: ['2147479553'],
       tagFiringOption: 'ONCE_PER_EVENT',
@@ -69,7 +69,8 @@ describe('Google Tag', () => {
       consentSettings: {
         consentStatus: 'NOT_SET'
       }
-    } as TagConfig);
+    };
+    expect(result).toEqual(expectedTag);
 
     expect(parameterUtils.createBooleanParameter).toHaveBeenCalledTimes(2);
     expect(parameterUtils.createTemplateParameter).toHaveBeenCalledTimes(1);
@@ -82,47 +83,8 @@ describe('Google Tag', () => {
       'false'
     );
     expect(parameterUtils.createTemplateParameter).toHaveBeenCalledWith(
-      'measurementId',
-      'G-12345678'
-    );
-  });
-
-  it('should use default measurement ID when not provided', () => {
-    // Arrange
-    const googleTagName = 'TestGoogleTag';
-    const measurementId = '';
-    const accountId = 'account123';
-    const containerId = 'container456';
-
-    jest.spyOn(parameterUtils, 'createBooleanParameter').mockReturnValue({
-      type: 'BOOLEAN',
-      key: 'sendPageView',
-      value: 'false'
-    });
-
-    jest.spyOn(parameterUtils, 'createTemplateParameter').mockReturnValue({
-      type: 'TEMPLATE',
-      key: 'measurementId',
-      value: '{{Measurement ID}}'
-    });
-
-    // Act
-    const result = googleTag.createGA4Configuration(
-      googleTagName,
-      measurementId,
-      accountId,
-      containerId
-    );
-
-    // Assert
-    expect(result.parameter[2]).toEqual({
-      type: 'TEMPLATE',
-      key: 'measurementId',
-      value: '{{Measurement ID}}'
-    });
-    expect(parameterUtils.createTemplateParameter).toHaveBeenCalledWith(
-      'measurementId',
-      '{{Measurement ID}}'
+      'tagId',
+      '{{CONST - Measurement ID}}'
     );
   });
 });

libs/data-access/src/lib/services/gtm-json-converter/transform/transform.service.ts

@@ -33,6 +33,7 @@ export class TransformService {
       const variables = this.variableManager.getVariables(
         gtmConfigGenerator.accountId,
         gtmConfigGenerator.containerId,
+        measurementId,
         dataLayers,
         esvContent
       );

libs/data-access/src/lib/services/gtm-json-converter/transform/variables/constant-variable.service.ts

@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+import { ParameterUtils } from '../utils/parameter-utils.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ConstantVariable {
+  constructor(private parameterUtils: ParameterUtils) {}
+  createMeasurementIdConstantVariable(
+    accountId: string,
+    containerId: string,
+    measurementId: string
+  ) {
+    const measurementIdConstantVariable = {
+      accountId: accountId,
+      containerId: containerId,
+      name: 'CONST - Measurement ID',
+      type: 'c',
+      parameter: [
+        this.parameterUtils.createTemplateParameter(
+          'value',
+          measurementId ? measurementId : 'G-0'
+        )
+      ],
+      fingerprint: '1734756121031',
+      formatValue: {}
+    };
+    return measurementIdConstantVariable;
+  }
+}

libs/ui/src/lib/components/advanced-expansion-panel/advanced-expansion-panel.component.html

@@ -24,7 +24,7 @@
           ><mat-icon
             matSuffix
             matTooltip="Google Tag has a default name, but you can change it.
-            You can use an existing measurement ID or leave it empty"
+            You can use an existing measurement ID or leave it empty with default placeholder value"
             >help_outline</mat-icon
           ></mat-panel-description
         >
@@ -67,7 +67,7 @@
             >Send Ecommerce Data</mat-checkbox
           >
           <mat-checkbox formControlName="isEsv"
-            >Add Event Setting Variable</mat-checkbox
+            >Add Event Settings Variable</mat-checkbox
           >
           @if (this.ecAndEsvForm.controls['isEsv'].value) {
             <lib-general-editor

libs/ui/src/lib/components/advanced-expansion-panel/advanced-expansion-panel.component.ts

@@ -60,7 +60,7 @@ export class AdvancedExpansionPanelComponent implements OnInit, AfterViewInit {
 
   ecAndEsvForm: FormGroup = this.fb.group({
     isSendingEcommerceData: [false],
-    isEsv: [true],
+    isEsv: [false],
     esv: ['']
   });
 
@@ -117,22 +117,23 @@ export class AdvancedExpansionPanelComponent implements OnInit, AfterViewInit {
 
   ngOnInit() {
     this.initializeFormSubscriptions(); // inspect the specification JSON and update the form
-    const esvValue = JSON.stringify(
-      [
-        {
-          name: 'Google Tag G-8HK542DQMG Event Settings',
-          parameters: [
-            {
-              page_referrer: '{{page_referrer for G-8HK542DQMG Tags | String}}'
-            }
-          ]
-        }
-      ],
-      null,
-      2
-    );
-
-    this.ecAndEsvForm.patchValue({ esv: esvValue });
+    // Testing code below to test the custimized GTM Event Settings Variable
+    // const esvValue = JSON.stringify(
+    //   [
+    //     {
+    //       name: 'Google Tag G-8HK542DQMG Event Settings',
+    //       parameters: [
+    //         {
+    //           page_referrer: '{{page_referrer for G-8HK542DQMG Tags | String}}'
+    //         }
+    //       ]
+    //     }
+    //   ],
+    //   null,
+    //   2
+    // );
+
+    // this.ecAndEsvForm.patchValue({ esv: esvValue });
   }
 
   ngAfterViewInit() {

libs/ui/src/lib/components/article/article.component.ts

@@ -7,7 +7,7 @@ import { Component } from '@angular/core';
   template: `<div class="article">
     <div class="article__purpose"></div>
     <div class="article__usage">
-      <h1>Usage</h1>
+      <h1>Custom Events</h1>
       <p>
         Tag Build aims to save users' time and increase their productivity by
         automating the GTM (Google Tag Manager) configuration process. This is
@@ -16,17 +16,38 @@ import { Component } from '@angular/core';
         them to focus more on data analysis rather than tag implementations.
       </p>
       <p>The expected input is an array of objects:</p>
-      <pre>{{ exampleInput | json }}</pre>
+      <pre class="json-code">{{ exampleInput | json }}</pre>
       <div></div>
       <p>
         Note that the dollar sign "$" is intended to refer to variables that can
         be referenced in the document or specifications. You can replace the
         "$variable_name" placeholders with actual values, or leave them empty.
       </p>
+      <h1>Send Ecommerce Data and Event Settings Variable</h1>
+      <p>
+        By clicking the <b>Send Ecommerce Data</b> The system will remove
+        defined e-commrece event parameters for each tag and perform data
+        collection via the data layer.
+      </p>
+      <p>
+        By clicking the <b>Add Event Settings Variable</b>, there will an editor
+        for configuration.
+      </p>
+      <pre class="json-code">{{ exampleEsvInput | json }}</pre>
     </div>
   </div> `,
-  styles: [],
-  imports: [JsonPipe],
+  styles: [
+    `
+      .json-code {
+        background-color: #f4f4f4;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        padding: 10px;
+        font-family: monospace;
+      }
+    `
+  ],
+  imports: [JsonPipe]
 })
 export class ArticleComponent {
   exampleInput = [
@@ -50,10 +71,23 @@ export class ArticleComponent {
             quantity: '$quantity',
             coupon: '$coupon',
             index: '$index',
-            item_variant: '$item_variant',
-          },
-        ],
-      },
-    },
+            item_variant: '$item_variant'
+          }
+        ]
+      }
+    }
+  ];
+
+  exampleEsvInput = [
+    [
+      {
+        name: 'Google Tag G-8HK542DQMG Event Settings',
+        parameters: [
+          {
+            page_referrer: '{{page_referrer for G-8HK542DQMG Tags | String}}'
+          }
+        ]
+      }
+    ]
   ];
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tag-check",
-  "version": "1.1.8",
+  "version": "1.1.9",
   "main": ".vite/build/main.js",
   "author": "Guan Xin Wang",
   "description": "A tool to check the data layer of a website",