adobe / aem-core-wcm-components

Standardized components to build websites with AEM.
https://docs.adobe.com/content/help/en/experience-manager-core-components/using/introduction.html
Apache License 2.0
733 stars 740 forks source link

Ready for PR: Support Google Tag Manager and GA4 Data Layers #2555

Open brobatr opened 1 year ago

brobatr commented 1 year ago

Feature Request (implementation ready for PR)

The Google data layer is an EDDL similar to the ACDL but far more widely used. It should also be supported and the effort required to do this is minor.

Describe the solution you'd like

GTM/push

The solution is to allow renaming of the data layer. Once that is supported, simply using the existing option to skip the inclusion of the ACDL code in clientlibs and then renaming the data layer to dataLayer is sufficient. GTM creates a helper object to consume a data layer array (whether it already exists or not) so there is no need to include Google code in Core Components. The push method is overriden by in the GDL similarly to the ACDL, but it's still essentially the same push(){}.

GA4/gtag

A further development, which I'm working on, would be to support push using gtag(). When GA4 is deployed without GTM the gtag function is used instead of push(). Code would then require conditional use of gtag() or push() and the data structure would be different. It is likely that this will be included in the PR.

progress

I have completed the GTM implementation so just need access to the repo to push a branch and create a PR. I tried aem-contrib-wcm-components but this seems to be out of use.

Are there alternatives? I have implemented the renaming solution as this could also possibly support other data layers. Another option would be use a conditional 'type', so: if (type is google) { create array called dataLayer } else {create array called adobeDataLayer }. A third type would be gtag.

Documentation Documentation would add the configuration option to the existing data layer docs and describe how to access the datalayer without the getstate() method. I intend to create an Adobe Tech Blog post on the configuration of GTM to use the feature (a minor fiddle needed in GTM) and to publicise.

kwin commented 1 year ago

@brobatr You don't need access to this repo to raise a PR: https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request-from-a-fork

brobatr commented 1 year ago

@brobatr You don't need access to this repo to raise a PR: https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request-from-a-fork

thanks!