Skip to content

Commit e1df5af

Browse files
fernanDOTdofernanDOTdo
committed
DataLayer: Batch all onLoad variables into a single dataLayer push, while keeping events as individual pushes
Fix #278
1 parent 12d37d7 commit e1df5af

2 files changed

Lines changed: 86 additions & 132 deletions

File tree

‎packages/scripts/dist/data-layer.js‎

Lines changed: 36 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -86,68 +86,50 @@ export class DataLayer {
8686
return "";
8787
}
8888
onLoad() {
89+
// Collect all data layer events and variables to push at once
90+
const dataLayerData = {};
91+
const dataLayerEvents = [];
8992
if (ENGrid.getGiftProcess()) {
9093
this.logger.log("EN_SUCCESSFUL_DONATION");
91-
this.dataLayer.push({
92-
event: "EN_SUCCESSFUL_DONATION",
93-
});
94+
dataLayerEvents.push("EN_SUCCESSFUL_DONATION");
9495
this.addEndOfGiftProcessEventsToDataLayer();
9596
}
9697
else {
9798
this.logger.log("EN_PAGE_VIEW");
98-
this.dataLayer.push({
99-
event: "EN_PAGE_VIEW",
100-
});
99+
dataLayerEvents.push("EN_PAGE_VIEW");
101100
}
102101
if (window.pageJson) {
103102
const pageJson = window.pageJson;
104103
for (const property in pageJson) {
105104
if (!Number.isNaN(pageJson[property])) {
106-
this.dataLayer.push({
107-
event: `EN_PAGEJSON_${property.toUpperCase()}-${pageJson[property]}`,
108-
});
109-
this.dataLayer.push({
110-
[`'EN_PAGEJSON_${property.toUpperCase()}'`]: pageJson[property],
111-
});
105+
dataLayerEvents.push(`EN_PAGEJSON_${property.toUpperCase()}-${pageJson[property]}`);
106+
dataLayerData[`'EN_PAGEJSON_${property.toUpperCase()}'`] =
107+
pageJson[property];
112108
}
113109
else {
114-
this.dataLayer.push({
115-
event: `EN_PAGEJSON_${property.toUpperCase()}-${this.transformJSON(pageJson[property])}`,
116-
});
117-
this.dataLayer.push({
118-
[`'EN_PAGEJSON_${property.toUpperCase()}'`]: this.transformJSON(pageJson[property]),
119-
});
110+
dataLayerEvents.push(`EN_PAGEJSON_${property.toUpperCase()}-${this.transformJSON(pageJson[property])}`);
111+
dataLayerData[`'EN_PAGEJSON_${property.toUpperCase()}'`] =
112+
this.transformJSON(pageJson[property]);
120113
}
121-
this.dataLayer.push({
122-
event: "EN_PAGEJSON_" + property.toUpperCase(),
123-
eventValue: pageJson[property],
124-
});
114+
dataLayerEvents.push("EN_PAGEJSON_" + property.toUpperCase());
115+
dataLayerData.eventValue = pageJson[property];
125116
}
126117
if (ENGrid.getPageCount() === ENGrid.getPageNumber()) {
127-
this.dataLayer.push({
128-
event: "EN_SUBMISSION_SUCCESS_" + pageJson.pageType.toUpperCase(),
129-
});
130-
this.dataLayer.push({
131-
[`'EN_SUBMISSION_SUCCESS_${pageJson.pageType.toUpperCase()}'`]: "TRUE",
132-
});
118+
dataLayerEvents.push("EN_SUBMISSION_SUCCESS_" + pageJson.pageType.toUpperCase());
119+
dataLayerData[`'EN_SUBMISSION_SUCCESS_${pageJson.pageType.toUpperCase()}'`] = "TRUE";
133120
}
134121
}
135122
const urlParams = new URLSearchParams(window.location.search);
136123
urlParams.forEach((value, key) => {
137-
this.dataLayer.push({
138-
event: `EN_URLPARAM_${key.toUpperCase()}-${this.transformJSON(value)}`,
139-
});
140-
this.dataLayer.push({
141-
[`'EN_URLPARAM_${key.toUpperCase()}'`]: this.transformJSON(value),
142-
});
124+
dataLayerEvents.push(`EN_URLPARAM_${key.toUpperCase()}-${this.transformJSON(value)}`);
125+
dataLayerData[`'EN_URLPARAM_${key.toUpperCase()}'`] =
126+
this.transformJSON(value);
143127
});
144128
if (ENGrid.getPageType() === "DONATION") {
145129
const recurrFreqEls = document.querySelectorAll('[name="transaction.recurrfreq"]');
146130
const recurrValues = [...recurrFreqEls].map((el) => el.value);
147-
this.dataLayer.push({
148-
event: "EN_RECURRING_FREQUENCIES",
149-
[`'EN_RECURRING_FREQEUENCIES'`]: recurrValues,
150-
});
131+
dataLayerEvents.push("EN_RECURRING_FREQUENCIES");
132+
dataLayerData[`'EN_RECURRING_FREQEUENCIES'`] = recurrValues;
151133
}
152134
let fastFormFill = false;
153135
// Fast Form Fill - Personal Details
@@ -156,20 +138,14 @@ export class DataLayer {
156138
const allPersonalMandatoryInputsAreFilled = FastFormFill.allMandatoryInputsAreFilled(fastPersonalDetailsFormBlock);
157139
const somePersonalMandatoryInputsAreFilled = FastFormFill.someMandatoryInputsAreFilled(fastPersonalDetailsFormBlock);
158140
if (allPersonalMandatoryInputsAreFilled) {
159-
this.dataLayer.push({
160-
event: "EN_FASTFORMFILL_PERSONALINFO_SUCCESS",
161-
});
141+
dataLayerEvents.push("EN_FASTFORMFILL_PERSONALINFO_SUCCESS");
162142
fastFormFill = true;
163143
}
164144
else if (somePersonalMandatoryInputsAreFilled) {
165-
this.dataLayer.push({
166-
event: "EN_FASTFORMFILL_PERSONALINFO_PARTIALSUCCESS",
167-
});
145+
dataLayerEvents.push("EN_FASTFORMFILL_PERSONALINFO_PARTIALSUCCESS");
168146
}
169147
else {
170-
this.dataLayer.push({
171-
event: "EN_FASTFORMFILL_PERSONALINFO_FAILURE",
172-
});
148+
dataLayerEvents.push("EN_FASTFORMFILL_PERSONALINFO_FAILURE");
173149
}
174150
}
175151
// Fast Form Fill - Address Details
@@ -178,31 +154,29 @@ export class DataLayer {
178154
const allAddressMandatoryInputsAreFilled = FastFormFill.allMandatoryInputsAreFilled(fastAddressDetailsFormBlock);
179155
const someAddressMandatoryInputsAreFilled = FastFormFill.someMandatoryInputsAreFilled(fastAddressDetailsFormBlock);
180156
if (allAddressMandatoryInputsAreFilled) {
181-
this.dataLayer.push({
182-
event: "EN_FASTFORMFILL_ADDRESS_SUCCESS",
183-
});
157+
dataLayerEvents.push("EN_FASTFORMFILL_ADDRESS_SUCCESS");
184158
fastFormFill = fastFormFill ? true : false; // Only set to true if it was true before
185159
}
186160
else if (someAddressMandatoryInputsAreFilled) {
187-
this.dataLayer.push({
188-
event: "EN_FASTFORMFILL_ADDRESS_PARTIALSUCCESS",
189-
});
161+
dataLayerEvents.push("EN_FASTFORMFILL_ADDRESS_PARTIALSUCCESS");
190162
}
191163
else {
192-
this.dataLayer.push({
193-
event: "EN_FASTFORMFILL_ADDRESS_FAILURE",
194-
});
164+
dataLayerEvents.push("EN_FASTFORMFILL_ADDRESS_FAILURE");
195165
}
196166
}
197167
if (fastFormFill) {
198-
this.dataLayer.push({
199-
event: "EN_FASTFORMFILL_ALL_SUCCESS",
200-
});
168+
dataLayerEvents.push("EN_FASTFORMFILL_ALL_SUCCESS");
201169
}
202170
else {
203-
this.dataLayer.push({
204-
event: "EN_FASTFORMFILL_ALL_FAILURE",
205-
});
171+
dataLayerEvents.push("EN_FASTFORMFILL_ALL_FAILURE");
172+
}
173+
// Push all collected events individually (GTM requirement)
174+
dataLayerEvents.forEach((event) => {
175+
this.dataLayer.push({ event });
176+
});
177+
// Push all collected variables at once
178+
if (Object.keys(dataLayerData).length > 0) {
179+
this.dataLayer.push(dataLayerData);
206180
}
207181
this.attachEventListeners();
208182
}

‎packages/scripts/src/data-layer.ts‎

Lines changed: 50 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -109,72 +109,60 @@ export class DataLayer {
109109
}
110110

111111
private onLoad() {
112+
// Collect all data layer events and variables to push at once
113+
const dataLayerData: { [key: string]: any } = {};
114+
const dataLayerEvents: string[] = [];
115+
112116
if (ENGrid.getGiftProcess()) {
113117
this.logger.log("EN_SUCCESSFUL_DONATION");
114-
this.dataLayer.push({
115-
event: "EN_SUCCESSFUL_DONATION",
116-
});
118+
dataLayerEvents.push("EN_SUCCESSFUL_DONATION");
117119
this.addEndOfGiftProcessEventsToDataLayer();
118120
} else {
119121
this.logger.log("EN_PAGE_VIEW");
120-
this.dataLayer.push({
121-
event: "EN_PAGE_VIEW",
122-
});
122+
dataLayerEvents.push("EN_PAGE_VIEW");
123123
}
124124

125125
if (window.pageJson) {
126126
const pageJson = window.pageJson;
127127

128128
for (const property in pageJson) {
129129
if (!Number.isNaN(pageJson[property])) {
130-
this.dataLayer.push({
131-
event: `EN_PAGEJSON_${property.toUpperCase()}-${
132-
pageJson[property]
133-
}`,
134-
});
135-
136-
this.dataLayer.push({
137-
[`'EN_PAGEJSON_${property.toUpperCase()}'`]: pageJson[property],
138-
});
130+
dataLayerEvents.push(
131+
`EN_PAGEJSON_${property.toUpperCase()}-${pageJson[property]}`
132+
);
133+
dataLayerData[`'EN_PAGEJSON_${property.toUpperCase()}'`] =
134+
pageJson[property];
139135
} else {
140-
this.dataLayer.push({
141-
event: `EN_PAGEJSON_${property.toUpperCase()}-${this.transformJSON(
142-
pageJson[property]
143-
)}`,
144-
});
145-
146-
this.dataLayer.push({
147-
[`'EN_PAGEJSON_${property.toUpperCase()}'`]: this.transformJSON(
136+
dataLayerEvents.push(
137+
`EN_PAGEJSON_${property.toUpperCase()}-${this.transformJSON(
148138
pageJson[property]
149-
),
150-
});
139+
)}`
140+
);
141+
dataLayerData[`'EN_PAGEJSON_${property.toUpperCase()}'`] =
142+
this.transformJSON(pageJson[property]);
151143
}
152144

153-
this.dataLayer.push({
154-
event: "EN_PAGEJSON_" + property.toUpperCase(),
155-
eventValue: pageJson[property],
156-
});
145+
dataLayerEvents.push("EN_PAGEJSON_" + property.toUpperCase());
146+
dataLayerData.eventValue = pageJson[property];
157147
}
158148

159149
if (ENGrid.getPageCount() === ENGrid.getPageNumber()) {
160-
this.dataLayer.push({
161-
event: "EN_SUBMISSION_SUCCESS_" + pageJson.pageType.toUpperCase(),
162-
});
163-
this.dataLayer.push({
164-
[`'EN_SUBMISSION_SUCCESS_${pageJson.pageType.toUpperCase()}'`]:
165-
"TRUE",
166-
});
150+
dataLayerEvents.push(
151+
"EN_SUBMISSION_SUCCESS_" + pageJson.pageType.toUpperCase()
152+
);
153+
dataLayerData[
154+
`'EN_SUBMISSION_SUCCESS_${pageJson.pageType.toUpperCase()}'`
155+
] = "TRUE";
167156
}
168157
}
169158

170159
const urlParams = new URLSearchParams(window.location.search);
171160
urlParams.forEach((value, key) => {
172-
this.dataLayer.push({
173-
event: `EN_URLPARAM_${key.toUpperCase()}-${this.transformJSON(value)}`,
174-
});
175-
this.dataLayer.push({
176-
[`'EN_URLPARAM_${key.toUpperCase()}'`]: this.transformJSON(value),
177-
});
161+
dataLayerEvents.push(
162+
`EN_URLPARAM_${key.toUpperCase()}-${this.transformJSON(value)}`
163+
);
164+
dataLayerData[`'EN_URLPARAM_${key.toUpperCase()}'`] =
165+
this.transformJSON(value);
178166
});
179167

180168
if (ENGrid.getPageType() === "DONATION") {
@@ -184,10 +172,8 @@ export class DataLayer {
184172

185173
const recurrValues = [...recurrFreqEls].map((el) => el.value);
186174

187-
this.dataLayer.push({
188-
event: "EN_RECURRING_FREQUENCIES",
189-
[`'EN_RECURRING_FREQEUENCIES'`]: recurrValues,
190-
});
175+
dataLayerEvents.push("EN_RECURRING_FREQUENCIES");
176+
dataLayerData[`'EN_RECURRING_FREQEUENCIES'`] = recurrValues;
191177
}
192178

193179
let fastFormFill = false;
@@ -201,18 +187,12 @@ export class DataLayer {
201187
const somePersonalMandatoryInputsAreFilled =
202188
FastFormFill.someMandatoryInputsAreFilled(fastPersonalDetailsFormBlock);
203189
if (allPersonalMandatoryInputsAreFilled) {
204-
this.dataLayer.push({
205-
event: "EN_FASTFORMFILL_PERSONALINFO_SUCCESS",
206-
});
190+
dataLayerEvents.push("EN_FASTFORMFILL_PERSONALINFO_SUCCESS");
207191
fastFormFill = true;
208192
} else if (somePersonalMandatoryInputsAreFilled) {
209-
this.dataLayer.push({
210-
event: "EN_FASTFORMFILL_PERSONALINFO_PARTIALSUCCESS",
211-
});
193+
dataLayerEvents.push("EN_FASTFORMFILL_PERSONALINFO_PARTIALSUCCESS");
212194
} else {
213-
this.dataLayer.push({
214-
event: "EN_FASTFORMFILL_PERSONALINFO_FAILURE",
215-
});
195+
dataLayerEvents.push("EN_FASTFORMFILL_PERSONALINFO_FAILURE");
216196
}
217197
}
218198

@@ -226,28 +206,28 @@ export class DataLayer {
226206
const someAddressMandatoryInputsAreFilled =
227207
FastFormFill.someMandatoryInputsAreFilled(fastAddressDetailsFormBlock);
228208
if (allAddressMandatoryInputsAreFilled) {
229-
this.dataLayer.push({
230-
event: "EN_FASTFORMFILL_ADDRESS_SUCCESS",
231-
});
209+
dataLayerEvents.push("EN_FASTFORMFILL_ADDRESS_SUCCESS");
232210
fastFormFill = fastFormFill ? true : false; // Only set to true if it was true before
233211
} else if (someAddressMandatoryInputsAreFilled) {
234-
this.dataLayer.push({
235-
event: "EN_FASTFORMFILL_ADDRESS_PARTIALSUCCESS",
236-
});
212+
dataLayerEvents.push("EN_FASTFORMFILL_ADDRESS_PARTIALSUCCESS");
237213
} else {
238-
this.dataLayer.push({
239-
event: "EN_FASTFORMFILL_ADDRESS_FAILURE",
240-
});
214+
dataLayerEvents.push("EN_FASTFORMFILL_ADDRESS_FAILURE");
241215
}
242216
}
243217
if (fastFormFill) {
244-
this.dataLayer.push({
245-
event: "EN_FASTFORMFILL_ALL_SUCCESS",
246-
});
218+
dataLayerEvents.push("EN_FASTFORMFILL_ALL_SUCCESS");
247219
} else {
248-
this.dataLayer.push({
249-
event: "EN_FASTFORMFILL_ALL_FAILURE",
250-
});
220+
dataLayerEvents.push("EN_FASTFORMFILL_ALL_FAILURE");
221+
}
222+
223+
// Push all collected events individually (GTM requirement)
224+
dataLayerEvents.forEach((event) => {
225+
this.dataLayer.push({ event });
226+
});
227+
228+
// Push all collected variables at once
229+
if (Object.keys(dataLayerData).length > 0) {
230+
this.dataLayer.push(dataLayerData);
251231
}
252232

253233
this.attachEventListeners();

0 commit comments

Comments
 (0)