Support Google Tag Manager Data Layer

[brobatr]

Q	A
Fixed Issues?	N
Patch: Bug Fix?	N
Minor: New Feature?	Y
Major: Breaking Change?	N
Tests Added + Pass?	Yes
Documentation Provided	Yes (code comments and or markdown)
Any Dependency Changes?
License	Apache License, Version 2.0

See discussion #2565

The PR allows renaming of the Data Layer. Together with the bugfix #2620 (previously merged) this allows a generic data layer to be configured, i.e. remove ACDL, rename, without making a breaking change. If GTM code is on the page and the Data Layer name is changed to the Google default name of dataLayer, the array will be consumed and extended by GTM thus creating a Google Event-Driven Data Layer. The GDL push() method is available and very similar to that of the ACDL, so all related logic remains the same as before.

Note that support for GTag, the Google global tag, has not been included despite some earlier discussion. This would have been an experimental feature and a significantly more complex implementation. This could be a future enhancement.

The screenshot below shows the Core Component Data Layer used be Google Tag Manager, with a Google event ID and normal OOTB GTM gtm.start timing event added as normal by GTM.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (b35fe5a) 87.32% compared to head (43094fe) 87.33%.

Additional details and impacted files

@@            Coverage Diff            @@
##               main    #2657   +/-   ##
=========================================
  Coverage     87.32%   87.33%           
- Complexity     2655     2659    +4     
=========================================
  Files           232      232           
  Lines          7100     7105    +5     
  Branches       1081     1082    +1     
=========================================
+ Hits           6200     6205    +5     
  Misses          357      357           
  Partials        543      543           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[LSantha]

@brobatr , could you please add verification instructions for this enhancement?

[brobatr]

@brobatr , could you please add verification instructions for this enhancement?

hi @LSantha just to check what you would like. Do you mean to test that the datalayer renaming works? Or is it related to testing whether Google Tag Manager will consume the data layer correctly and push(stuff) will work OK?

[LSantha]

@brobatr , could you please add verification instructions for this enhancement?

hi @LSantha just to check what you would like. Do you mean to test that the datalayer renaming works? Or is it related to testing whether Google Tag Manager will consume the data layer correctly and push(stuff) will work OK?

@brobatr, in principle both but most importantly the later.

[brobatr]

hi @LSantha,

I hope this is quick and painless - it should not take more than 15 mins:

Go to https://tagmanager.google.com/ and add a new account including a web container

Under admin (top menu) choose import container and import the JSON below (options: existing, overwrite). This just catches events and has a couple of test variables.

Then Admin->Install Google Tag Manager . This contains the script snippets needed in a page and where to put them.

Edit the CC Page component head.html add add the header snippet before the closing template tag in CRX DE as described. You can ignore the noscript one for the body.

In conf enable the data layer, change the name to dataLayer and disable the ACDL as described in the CC Datalayer docu included in the PR

Open a page in AEM for example http://localhost:4502/content/wknd/us/en/about-us.html?wcmmode=disabled

Install Google Tag Assistant Chrome extension: https://chromewebstore.google.com/detail/tag-assistant-companion/jmekfmbnaedfebfnmakmokmlfpblbfdm

Click on the blue Tag Assistant icon in the plugins area in Chrome and create a new domain with the URL of the AEM page you’re testing.

In the Chrome tabs a Google debug tab will open and should show something like this:

Working from the last event and message from the bottom up you can check:

the build of the data layer contents
CC cmp:* events (triggers added in GTM)
default Google events (gtm.dom etc)
All with GTM meta such as unique event IDs
In the variables tab you can see two custom variables are set (dl_eventinfo and dl_eventinfo_lang as configured in GTM). These contain Core Components data. dl_eventinfo_lang is testing access to the nested JSON

cmp:show is monitored so a carousel change will also show in the debugger:

http://localhost:4502/content/wknd/language-masters/en/adventures/climbing-new-zealand.html?wcm_mode=disabled

cmp:click on the main nav (page unload can be stopped by

window.addEventListener('beforeunload', (event) => {
  // Cancel the event as stated by the standard.
  event.preventDefault();
  // Chrome requires returnValue to be set.
  event.returnValue = '';
});

Accordian: http://localhost:4502/content/wknd/language-masters/en/faqs.html

Of course if you would like more or there are any issues please let me know

Rob

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues

Measures
0 Security Hotspots
No data about Coverage
No data about Duplication

See analysis details on SonarCloud

[LSantha]

Hello @brobatr , thank you for the verification instructions and for your contribution. I could follow the steps and see the new features in action. It will be available in the upcoming release.