Support Google Tag Manager Data Layer (#2657)

* fix datalayer ACDL inclusion logic issue
* fix datalayer ACDL inclusion logic issue - use v2 datalayer clientlib to ensure backwards compatibility
* Add support for Google Data Layers
* Google Data Layer support JS code refactoring

CONFIGS.md

@@ -11,7 +11,7 @@ AEM uses [OSGi configurations](https://experienceleague.adobe.com/docs/experienc
 | [ComponentConfigImpl](config/src/content/jcr_root/apps/core/wcm/config/com.adobe.cq.dam.cfm.impl.component.ComponentConfigImpl-core-comp-v1.config) | Enables Content Fragment management for [Content Fragment component](content/src/content/jcr_root/apps/core/wcm/components/contentfragment/v1/contentfragment). Reference documentation: https://experienceleague.adobe.com/docs/experience-manager-65/developing/extending-aem/content-fragments-config-components-rendering.html |
 | [RTEFilterServletFactory](config/src/content/jcr_root/apps/core/wcm/config/com.adobe.cq.ui.wcm.commons.internal.servlets.rte.RTEFilterServletFactory.amended-core-components.config) | Enables usage of RTE (Rich Text Editor) with [Text component](content/src/content/jcr_root/apps/core/wcm/components/text/v2/text). Reference documentation: https://experienceleague.adobe.com/docs/experience-manager-65/administering/operations/rich-text-editor.html |
 | [OEmbedClientImplConfigurationFactory](config/src/content/jcr_root/apps/core/wcm/config/com.adobe.cq.wcm.core.components.internal.services.embed.OEmbedClientImplConfigurationFactory-*.config) | Enables out-of-the-box OEmbed configurations for several services, with [Embed component](content/src/content/jcr_root/apps/core/wcm/components/embed/v1/embed) |
-| [AdaptiveImageServletMappingConfigurationFactory](config/src/content/jcr_root/apps/core/wcm/config/com.adobe.cq.wcm.core.components.internal.servlets.AdaptiveImageServletMappingConfigurationFactory-*.config) | Enables adaptive image support for [Image component](content/src/content/jcr_root/apps/core/wcm/components/image/v2/image) | 
+| [AdaptiveImageServletMappingConfigurationFactory](config/src/content/jcr_root/apps/core/wcm/config/com.adobe.cq.wcm.core.components.internal.servlets.AdaptiveImageServletMappingConfigurationFactory-*.config) | Enables adaptive image support for [Image component](content/src/content/jcr_root/apps/core/wcm/components/image/v2/image) |
 | [MailServlet](config/src/content/jcr_root/apps/core/wcm/config/com.day.cq.wcm.foundation.forms.impl.MailServlet-core-components.config) | Enables email support for user-submitted information in [Core Form container](content/src/content/jcr_root/apps/core/wcm/components/form/container/v2/container) |
 | [ServiceUserMapperImpl](config/src/content/jcr_root/apps/core/wcm/config/org.apache.sling.serviceusermapping.impl.ServiceUserMapperImpl.amended-componentsservice.config) | Enables access rights for [ClientLibraries](bundles/core/src/main/java/com/adobe/cq/wcm/core/components/models/ClientLibraries.java) and [ComponentFiles](bundles/core/src/main/java/com/adobe/cq/wcm/core/components/models/ComponentFiles.java) helpers |
 
@@ -28,11 +28,11 @@ The following [context-aware configurations](https://sling.apache.org/documentat
 | Configuration | Description |
 |---|---|
 | [HtmlPageItemsConfig](bundles/core/src/main/java/com/adobe/cq/wcm/core/components/config/HtmlPageItemsConfig.java) | Holds information on items to be included by [Page component](content/src/content/jcr_root/apps/core/wcm/components/page/v3/page): scripts, links, meta elements |
-| [PdfViewerCaConfig](bundles/core/src/main/java/com/adobe/cq/wcm/core/components/internal/services/CaConfigReferenceProvider.java) | Holds configuration for [PDF Viewer component](content/src/content/jcr_root/apps/core/wcm/components/pdfviewer/v1/pdfviewer) | 
-| [DataLayerConfig](bundles/core/src/main/java/com/adobe/cq/wcm/core/components/internal/DataLayerConfig.java) | Toggles the [Adobe Client Data Layer](https://github.com/adobe/adobe-client-data-layer) integration |
+| [PdfViewerCaConfig](bundles/core/src/main/java/com/adobe/cq/wcm/core/components/internal/services/CaConfigReferenceProvider.java) | Holds configuration for [PDF Viewer component](content/src/content/jcr_root/apps/core/wcm/components/pdfviewer/v1/pdfviewer) |
+| [DataLayerConfig](bundles/core/src/main/java/com/adobe/cq/wcm/core/components/internal/DataLayerConfig.java) | Toggles and configures the [Adobe Client Data Layer and Google Data Layer](https://github.com/adobe/adobe-client-data-layer) integrations |
 
 At the moment, there is no editing UI for context-aware configuration available out-of-the-box. Developers can either:
 
 * Deploy predefined context-ware configurations via content packages.
 * Change context-aware configurations using `SlingPostServlet` or `CRXDE Lite`.
-* Use the [wcm.io context-aware configuration editor](https://wcm.io/caconfig/editor/). An example setup is included with the Core Components Library example content (see https://github.com/adobe/aem-core-wcm-components/pull/1410) 
+* Use the [wcm.io context-aware configuration editor](https://wcm.io/caconfig/editor/). An example setup is included with the Core Components Library example content (see https://github.com/adobe/aem-core-wcm-components/pull/1410)

DATA_LAYER_INTEGRATION.md

@@ -16,33 +16,49 @@ limitations under the License.
 
 # Data Layer Integration with the Core Components
 
-The Core Components provide an out-of-the-box integration with the [Adobe Client Data Layer](https://github.com/adobe/adobe-client-data-layer), which for convenience is called data layer in this page.
+The Core Components provide an out-of-the-box integration with the [Adobe Client Data Layer](https://github.com/adobe/adobe-client-data-layer) and Google Tag Manager Data Layers. For convenience these are referred to in the page as ACDL and GDL.
 
 ## Enabling the Data Layer
 
-The data layer is disabled by default. 
+The data layer is disabled by default.
 
 To enable the data layer for your site:
 1. Create the following structure below the `/conf` node:
     `/conf/<my-site>/sling:configs/com.adobe.cq.wcm.core.components.internal.DataLayerConfig`
-1. Add the `enabled` boolean property and set it to `true`.
-1. Add a `sling:configRef` property to the `jcr:content` node of your site below `/content` (e.g. `/content/<my-site>/jcr:content`) and set it to `/conf/<my-site>`
+2. Add the `enabled` boolean property and set it to `true`.
+3. If a datalayer object name other than `adobeDataLayer` is required (e.g. `dataLayer` for most GDLs), add a string property `name` to the same node, with the required Data Layer object name as the value.
+4. Add a `sling:configRef` property to the `jcr:content` node of your site below `/content` (e.g. `/content/<my-site>/jcr:content`) and set it to `/conf/<my-site>`
 
-## Preventing the Data Layer client library from being included
+## Google Data Layer Creation
 
-The data layer client library is included by default by the Page component. As there are other ways to include this library (e.g. through Adobe Launch), it might be needed to prevent its inclusion through the Page component.
+While Core Components includes the ACDL Library unless explicitly disabled (below), it does not include the GDL library.  The Core Components code will create an appropriately named Data Layer array, but a standard Google Tag Manager code snippet must be included in the page to consume this array and create a full GDL.  This is done according to Google documentation and is not directly related to Core Components.
+
+## Google Global Tag - GTag
+
+Google's GTag code is not currently supported.
+
+## Generic Data Layer Use
+
+The Core Components Data Layer integration supports Data Layer name configuration, and the logic uses the standard JavaScript array push() method.  If the Data Layer is enabled, but the ACDL library is not loaded, and the Data Layer is not consumed by a Google solution, there will still be a plain JavaScript array available with the configured name, and containing Core Components data, although with 'event' entries that are intended for an Event-Driven Data Layer like the ACDL or GDL.  This plain array Data Layer is generic and may be suitable for other Data Layer providers or consumers.
+
+## Preventing the Adobe Data Layer client library from being included
+
+The ACDL library is included by default by the Page component.  If using a GDL, or already including the ACDL library in some other way such as using AEP Data Collection Tags, the ACDL library should not be loaded.
+
+To prevent the ACDL library from being included by the Page component:
 
-To prevent the data layer client library from being included by the Page component:
 1. Create the following structure below the `/conf` node:
    `/conf/<my-site>/sling:configs/com.adobe.cq.wcm.core.components.internal.DataLayerConfig`
-1. Add the `skipClientlibInclude` boolean property and set it to `true`.
-1. Add a `sling:configRef` property to the `jcr:content` node of your site below `/content` (e.g. `/content/<my-site>/jcr:content`) and set it to `/conf/<my-site>`
+2. Add the `skipClientlibInclude` boolean property and set it to `true`.
+3. Add a `sling:configRef` property to the `jcr:content` node of your site below `/content` (e.g. `/content/<my-site>/jcr:content`) and set it to `/conf/<my-site>`
 
 ## Data Layer State Structure
 
-When the data layer is enabled, the javascript `adobeDataLayer` object is available on the page and is populated with the components and their properties that are used on the page.
+When the data layer is enabled, a JavaScript Data Layer object will be available.  By default, the object name is `adobeDataLayer`.  If a name has been defined in the Data Layer configuration (see [Enabling the Data Layer](#enabling-the-data-layer)) the object will be named accordingly.  The Data Layer will be populated with the components and their properties that are used on the page.
 
-The data layer state (returned by calling `adobeDataLayer.getState()`) is an object with two objects (`page` and `component`). All the components are stored below the `component` object as a flat structure. The structure looks as follows:
+### Data Layer State - ACDL
+
+If an ACDL is used the data layer state (returned by calling `adobeDataLayer.getState()`) is an object with two objects (`page` and `component`). All the components are stored below the `component` object as a flat structure. The structure looks as follows:
 ```
 {
   "page": {
@@ -122,6 +138,9 @@ Calling `adobeDataLayer.getState()` in the browser console will return e.g.:
   }
 }
 ```
+### Data Layer State - GDL
+
+Google Data Layers do not have a getState() method which can provide a consolidated _computed state_ of the Data Layer.  To view the raw Data Layer enter the name of the Data Layer in the browser console, e.g. `dataLayer`.  The computed state can be viewed using Google and third party debugging tools.
 
 ## Components supporting the Data Layer
 

README.md

@@ -27,7 +27,7 @@ Set of standardized Web Content Management (WCM) components for [Adobe Experienc
 * **Cloud-Ready:** Whether on [AEM as a Cloud Service](https://docs.adobe.com/content/help/en/experience-manager-cloud-service/landing/home.html), on [Adobe Managed Services](https://github.com/adobe/aem-project-archetype/tree/master/src/main/archetype/dispatcher.ams), or on-premise, they just work.
 * **Versatile:** The components represent generic concepts with which the authors can assemble nearly any layout.
 * **Configurable:** Template-level [content policies](https://docs.adobe.com/content/help/en/experience-manager-65/developing/platform/templates/page-templates-editable.html#content-policies) define which features the page authors are allowed to use or not.
-* **Trackable:** The [Adobe Client Data Layer](DATA_LAYER_INTEGRATION.md) integration allows to track all aspects of the visitor experience.
+* **Trackable:** The [Adobe Client Data Layer and Google Data Layer](DATA_LAYER_INTEGRATION.md) integrations support the tracking of all aspects of the visitor experience.
 * **Accessible:** They comply [WCAG 2.1 standard](https://www.w3.org/TR/WCAG21/), provide ARIA labels, and support keyboard navigation.
 * **SEO-Friendly:** The HTML output is semantic and provides schema.org microdata annotations.
 * **WebApp-Ready:** The [streamlined JSON output](https://docs.adobe.com/content/help/en/experience-manager-learn/foundation/development/develop-sling-model-exporter.html) allows client-side rendering, still with a possibility of [in-context editing](https://docs.adobe.com/content/help/en/experience-manager-learn/sites/spa-editor/spa-editor-framework-feature-video-use.html).

bundles/core/src/main/java/com/adobe/cq/wcm/core/components/internal/DataLayerConfig.java

@@ -24,6 +24,8 @@
 @Configuration(label="Data Layer", description="Configure support for Adobe Client Data Layer")
 public @interface DataLayerConfig {
 
+    String DATALAYER_OBJECT_NAME_ADOBE = "adobeDataLayer";
+
     /**
      *
      * @return {@code true} if the data layer is enabled, {@code false} otherwise. It defaults to {@code false}.
@@ -39,4 +41,12 @@
     @Property(label="Data Layer client library not included")
     boolean skipClientlibInclude() default false;
 
+    /**
+     *
+     * @return the name of the datalayer
+     * Defaults to adobeDataLayer.
+     */
+    @Property(label = "Data Layer object name")
+    String name() default DATALAYER_OBJECT_NAME_ADOBE;
+
 }

bundles/core/src/main/java/com/adobe/cq/wcm/core/components/internal/models/v3/PageImpl.java

@@ -17,6 +17,7 @@
 
 import java.util.Optional;
 
+import org.apache.commons.lang3.StringUtils;
 import org.apache.sling.api.SlingHttpServletRequest;
 import org.apache.sling.caconfig.ConfigurationBuilder;
 import org.apache.sling.models.annotations.Exporter;
@@ -55,14 +56,25 @@ public boolean isClientlibsAsync() {
     @Override
     @JsonIgnore
     public boolean isDataLayerClientlibIncluded() {
+        return getDataLayerConfig()
+            .map(config -> !config.skipClientlibInclude())
+            .orElse(true);
+    }
+
+    @Override
+    @JsonIgnore
+    public String getDataLayerName() {
+        String name = getDataLayerConfig().map(DataLayerConfig::name)
+            .orElse("");
+        return StringUtils.isEmpty(name) ? DataLayerConfig.DATALAYER_OBJECT_NAME_ADOBE : name;
+    }
+
+    private Optional<DataLayerConfig> getDataLayerConfig() {
         return Optional.ofNullable(resource.adaptTo(ConfigurationBuilder.class))
-                .map(builder -> builder.as(DataLayerConfig.class))
-                .map(config -> !config.skipClientlibInclude())
-                .orElse(true);
+            .map(builder -> builder.as(DataLayerConfig.class));
     }
 
     protected NavigationItem newRedirectItem(@NotNull String redirectTarget, @NotNull SlingHttpServletRequest request, @NotNull LinkManager linkManager) {
         return new RedirectItemImpl(redirectTarget, request, linkManager);
     }
-
 }

bundles/core/src/main/java/com/adobe/cq/wcm/core/components/models/Page.java

@@ -22,6 +22,7 @@
 import java.util.Map;
 import java.util.Set;
 
+import com.adobe.cq.wcm.core.components.internal.DataLayerConfig;
 import org.jetbrains.annotations.NotNull;
 import org.jetbrains.annotations.Nullable;
 import org.osgi.annotation.versioning.ConsumerType;
@@ -467,4 +468,11 @@ default List<String> getRobotsTags() {
      */
     default boolean isDataLayerClientlibIncluded() {return true;}
 
+    /**
+     * Returns the name of the data layer.
+     *
+     * {@code true} if the data layer client library should be included.
+     * @since om.adobe.cq.wcm.core.components.models 12.24.0
+     */
+    default String getDataLayerName() { return DataLayerConfig.DATALAYER_OBJECT_NAME_ADOBE; }
 }

bundles/core/src/main/java/com/adobe/cq/wcm/core/components/models/package-info.java

@@ -34,7 +34,7 @@
  *      version, is bound to this proxy component resource type.
  * </p>
  */
-@Version("12.28.1")
+@Version("12.29.0")
 package com.adobe.cq.wcm.core.components.models;
 
 import org.osgi.annotation.versioning.Version;

bundles/core/src/test/java/com/adobe/cq/wcm/core/components/Utils.java

@@ -156,7 +156,18 @@ public static String getTestDataModelJSONPath(String testBase, String testResour
      * @param enabled {@code true} to enable the data layer, {@code false} to disable it
      */
     public static void enableDataLayer(AemContext context, boolean enabled) {
-        configureDataLayer(context, enabled, false);
+        configureDataLayer(context, enabled, false, "adobeDataLayer");
+    }
+
+    /**
+     * Sets the data layer context aware configuration of the AEM test context to enable the data layer, including a configured name.
+     *
+     * @param context The AEM test context
+     * @param enabled {@code true} to enable the data layer, {@code false} to disable it
+     * @param name a configured name for the data layer
+     */
+    public static void enableDataLayer(AemContext context, boolean enabled, String name) {
+        configureDataLayer(context, enabled, false, name);
     }
 
     /**
@@ -166,14 +177,19 @@ public static void enableDataLayer(AemContext context, boolean enabled) {
      * @param skip {@code true} to not include the data layer clientlib, {@code false} to include it
      */
     public static void skipDataLayerInclude(AemContext context, boolean skip) {
-        configureDataLayer(context, true, skip);
+        configureDataLayer(context, true, skip, "adobeDataLayer");
+    }
+
+    public static void configureDataLayer(AemContext context, boolean enabled, boolean skip) {
+        configureDataLayer(context,enabled,skip,"adobeDataLayer");
     }
 
-    private static void configureDataLayer(AemContext context, boolean enabled, boolean skip) {
+    public static void configureDataLayer(AemContext context, boolean enabled, boolean skip, String name) {
         ConfigurationBuilder builder = Mockito.mock(ConfigurationBuilder.class);
         DataLayerConfig dataLayerConfig = Mockito.mock(DataLayerConfig.class);
         lenient().when(dataLayerConfig.enabled()).thenReturn(enabled);
         lenient().when(dataLayerConfig.skipClientlibInclude()).thenReturn(skip);
+        lenient().when(dataLayerConfig.name()).thenReturn(name);
         lenient().when(builder.as(DataLayerConfig.class)).thenReturn(dataLayerConfig);
         context.registerAdapter(Resource.class, ConfigurationBuilder.class, builder);
     }

bundles/core/src/test/java/com/adobe/cq/wcm/core/components/internal/models/v3/PageImplTest.java

@@ -24,6 +24,7 @@
 import com.adobe.cq.wcm.core.components.models.NavigationItem;
 import com.adobe.cq.wcm.core.components.models.Page;
 
+import static com.adobe.cq.wcm.core.components.Utils.configureDataLayer;
 import static com.adobe.cq.wcm.core.components.Utils.skipDataLayerInclude;
 import static com.adobe.cq.wcm.core.components.internal.link.LinkTestUtils.assertValidLink;
 import static org.junit.jupiter.api.Assertions.assertEquals;
@@ -111,4 +112,19 @@ protected void testIsDataLayerClientlibIncluded_caconfig_false() {
         assertTrue(page.isDataLayerClientlibIncluded(), "The data layer clientlib should be included.");
     }
 
+    @Test
+    protected void testIsDataLayerName_caconfig_empty() {
+        Page page = getPageUnderTest(PAGE);
+        configureDataLayer(context,false, true, "");
+        assertTrue(page.getDataLayerName().equals("adobeDataLayer"), "The data layer name should be the default adobeDataLayer.");
+    }
+
+    @Test
+    protected void testIsDataLayerName_caconfig_configured() {
+        Page page = getPageUnderTest(PAGE);
+        configureDataLayer(context,false, true, "dataLayer");
+        assertTrue(page.getDataLayerName().equals("dataLayer"), "The data layer name should be the configured 'dataLayer'.");
+    }
+
+
 }

content/src/content/jcr_root/apps/core/wcm/components/accordion/v1/accordion/clientlibs/site/js/accordion.js

@@ -23,6 +23,7 @@
     }
     var dataLayerEnabled;
     var dataLayer;
+    var dataLayerName;
     var delay = 100;
 
     var NS = "cmp";
@@ -574,7 +575,10 @@
      */
     function onDocumentReady() {
         dataLayerEnabled = document.body.hasAttribute("data-cmp-data-layer-enabled");
-        dataLayer = (dataLayerEnabled) ? window.adobeDataLayer = window.adobeDataLayer || [] : undefined;
+        if (dataLayerEnabled) {
+            dataLayerName = document.body.getAttribute("data-cmp-data-layer-name") || "adobeDataLayer";
+            dataLayer = window[dataLayerName];
+        }
 
         var elements = document.querySelectorAll(selectors.self);
         for (var i = 0; i < elements.length; i++) {

content/src/content/jcr_root/apps/core/wcm/components/carousel/v1/carousel/clientlibs/site/js/carousel.js

@@ -23,6 +23,7 @@
     }
     var dataLayerEnabled;
     var dataLayer;
+    var dataLayerName;
 
     var NS = "cmp";
     var IS = "carousel";
@@ -679,7 +680,10 @@
      */
     function onDocumentReady() {
         dataLayerEnabled = document.body.hasAttribute("data-cmp-data-layer-enabled");
-        dataLayer = (dataLayerEnabled) ? window.adobeDataLayer = window.adobeDataLayer || [] : undefined;
+        if (dataLayerEnabled) {
+            dataLayerName = document.body.getAttribute("data-cmp-data-layer-name") || "adobeDataLayer";
+            dataLayer = window[dataLayerName];
+        }
 
         var elements = document.querySelectorAll(selectors.self);
         for (var i = 0; i < elements.length; i++) {