From bcaf0299ac812fe062d44f79e9e16c45980d7818 Mon Sep 17 00:00:00 2001 From: Guan-Xin Wang Date: Sat, 21 Dec 2024 16:53:02 +0800 Subject: [PATCH 1/2] fix: gtm json converter 1. Refactor GA4 configuration tag to new format. 2. Use contant measurement ID variables instead of regex one. 3. Remove testing data from the form. 4. Add and refactor explanations on TagBuild site. 5. Refactor tests accordingly. --- .../managers/variable-manager.service.ts | 15 +++--- .../transform/tags/google-tag.service.ts | 15 +++--- .../transform/tags/google-tag.spec.ts | 54 +++---------------- .../transform/transform.service.ts | 1 + .../variables/constant-variable.service.ts | 30 +++++++++++ .../advanced-expansion-panel.component.html | 4 +- .../advanced-expansion-panel.component.ts | 35 ++++++------ .../components/article/article.component.ts | 52 ++++++++++++++---- 8 files changed, 117 insertions(+), 89 deletions(-) create mode 100644 libs/data-access/src/lib/services/gtm-json-converter/transform/variables/constant-variable.service.ts diff --git a/libs/data-access/src/lib/services/gtm-json-converter/transform/managers/variable-manager.service.ts b/libs/data-access/src/lib/services/gtm-json-converter/transform/managers/variable-manager.service.ts index f35527c1..fc764ab9 100644 --- a/libs/data-access/src/lib/services/gtm-json-converter/transform/managers/variable-manager.service.ts +++ b/libs/data-access/src/lib/services/gtm-json-converter/transform/managers/variable-manager.service.ts @@ -1,10 +1,10 @@ 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' @@ -12,9 +12,9 @@ import { EventUtils } from '../../utils/event-utils.service'; 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, diff --git a/libs/data-access/src/lib/services/gtm-json-converter/transform/tags/google-tag.service.ts b/libs/data-access/src/lib/services/gtm-json-converter/transform/tags/google-tag.service.ts index 94a853c4..f50f8f95 100644 --- a/libs/data-access/src/lib/services/gtm-json-converter/transform/tags/google-tag.service.ts +++ b/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'], diff --git a/libs/data-access/src/lib/services/gtm-json-converter/transform/tags/google-tag.spec.ts b/libs/data-access/src/lib/services/gtm-json-converter/transform/tags/google-tag.spec.ts index 3eeb6672..c7752083 100644 --- a/libs/data-access/src/lib/services/gtm-json-converter/transform/tags/google-tag.spec.ts +++ b/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}}' ); }); }); diff --git a/libs/data-access/src/lib/services/gtm-json-converter/transform/transform.service.ts b/libs/data-access/src/lib/services/gtm-json-converter/transform/transform.service.ts index 6e8c86b1..0d3bfe9a 100644 --- a/libs/data-access/src/lib/services/gtm-json-converter/transform/transform.service.ts +++ b/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 ); diff --git a/libs/data-access/src/lib/services/gtm-json-converter/transform/variables/constant-variable.service.ts b/libs/data-access/src/lib/services/gtm-json-converter/transform/variables/constant-variable.service.ts new file mode 100644 index 00000000..b1eb0e29 --- /dev/null +++ b/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; + } +} diff --git a/libs/ui/src/lib/components/advanced-expansion-panel/advanced-expansion-panel.component.html b/libs/ui/src/lib/components/advanced-expansion-panel/advanced-expansion-panel.component.html index 9b0b6f95..87fc66c6 100644 --- a/libs/ui/src/lib/components/advanced-expansion-panel/advanced-expansion-panel.component.html +++ b/libs/ui/src/lib/components/advanced-expansion-panel/advanced-expansion-panel.component.html @@ -24,7 +24,7 @@ >help_outline @@ -67,7 +67,7 @@ >Send Ecommerce Data Add Event Setting VariableAdd Event Settings Variable @if (this.ecAndEsvForm.controls['isEsv'].value) {
-

Usage

+

Custom Events

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.

The expected input is an array of objects:

- 
{{ exampleInput | json }}
+ 
{{ exampleInput | json }}

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.

+

Send Ecommerce Data and Event Settings Variable

+

+ By clicking the Send Ecommerce Data The system will remove + defined e-commrece event parameters for each tag and perform data + collection via the data layer. +

+

+ By clicking the Add Event Settings Variable, there will an editor + for configuration. +

+ 
{{ exampleEsvInput | json }}
`, - 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}}' + } + ] + } + ] ]; } From e8b72bc34dc2262c012017ff98b7ad4b7d73e05e Mon Sep 17 00:00:00 2001 From: Guan-Xin Wang Date: Sun, 22 Dec 2024 14:03:23 +0800 Subject: [PATCH 2/2] version update --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b0415a8e..a3f1cd80 100644 --- a/package.json +++ b/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",