Click Event Detection

Click Event Detection is a Pro Mode feature added in the v2.0.0 release. This feature detects when a user clicks on page elements, determines what type of click it is (Exit, Download, CTA, UI Element or Internal Navigation), and pushes an appropriate event to the data layer for each.

Click Event Detection may be enable or disabled (by licensed company users) all or in part based on the selection made within the Click Event Detection card of the extension configuration. When the "Detect click events and push them to the data layer" toggle is selected, four other selectors appear below which allow for individual selection and configuration of Exit, Download, CTA, UI Element, and Internal Anchor click detection.

Preferred Configuration (diabling AA link Tracking & ActivityMap)

This feature is designed to work in place of the automatic Adobe Analytics link tracking. If you are using the Adobe Analytics extension in Launch, please ensure that your Link Tracking settings look like this:

Turning off Adobe Analytics Link Tracking

This feature will take care of pushing click events onto the data layer. You will still need to create Launch Rules triggered by these pushes.

This feature causes click events to be pushed onto your data layer. You may then use those events to trigger Launch rules that accomplish your specific goals.

CTA Link Detection

CTA links (Calls To Action) are links that have been explicitly decorated in the markup with the html custom attribute, data-ea-cta-link. The value of this custom attribute (if provided) is included as linkInfo.linkCtaType in the payload pushed to the data layer.

Assuming that a user clicked on an HTML anchor tag that had data-ea-cta-link="Social Share", the data layer event pushed might look something like this:

{
  "event": "CTA Link Clicked",
  "linkInfo": {
    "linkText": "Share on Facebook",
    "linkRegion": "page-main|product-template|product-panel|social-sharing",
    "linkCtaType": "Social Share"
  }
}

Thedata-ea-cta-linkHTML attribute takes precedence over all other link types (Exit, Download, Internal Anchor).

UI Element Link Detection

UI Element clicks are similar to CTA links but are often used to describe interactions with UI controls like carousels or accordions. These links are detected via the HTML custom attribute, data-ea-ui-link. The value of this custom attribute (if provided) is included as linkInfo.uiElement in the payload pushed to the data layer.

Exit Link Detection

Exit links are links that have hrefs leading to any destination that is not considered to be "Internal". All domains included in the Launch Property's domain list are considered to be Internal. Any link may be explicitly designated as an exit link by including the HTML custom attribute, data-ea-exit-link.

Ifdata-ea-exit-linkhas a value, that value will be included as linkInfo.linkTarget in the payload pushed to the data layer. If no value is provided, the link's href will be used. Below is an example payload pushed due to Exit Link Detection.

{  
  "event": "Exit Link Clicked",
  "linkInfo": {
    "linkText": "Meyerweb URL Decoder",
    "linkRegion": "footer|temp-download-links",
    "linkTarget": "https://meyerweb.com/eric/tools/dencoder/"
  }
}

Download Link Detection

Download links are detected based on any of the following factors:

1. The presence of the HTML download attribute

2. A href for files having an any of the configured extensions (.pdf, .doc, .csv, etc)

3. The presence of the HTML custom attribute, data-ea-download-linkwith or without a value.

Ifdata-ea-download-linkhas a value, that value will be included as linkInfo.fileName in the payload pushed to the data layer. If no value is provided, the value of the link's download attribute will be used, otherwise the link's href will be used. Below is an example payload pushed due to Download Link Detection.

{
  "event": "Download Link Clicked",
  "linkInfo": {
    "linkText": "Dinner Menu",
    "linkRegion": "footer|download-links",
    "fileName": "menu_dinner.pdf"
  }
}

Internal Anchor Detection

Internal Anchors are links that fail to meet the qualifications of the above. They tend to facilitate navigation within a site or within a page. Below is an example data layer push payload for this type of link.

{  
  "event": "Navigation Link Clicked",
  "linkInfo": {
    "linkText": "Contact Us",
    "linkRegion": "footer|footer-nav",
    "linkTarget": "https://www.mysite.com/contact_us/"
  }
}

linkText and override with data-ea-link-text

The value of linkInfo.linkText is determined based on the following sequence. These conditions are evaluated in the order shown below. If any evaluation returns a value, we look no further and use that value. In the code below, element is the anchor tag that was clicked.

element.getAttribute("data-ea-link-text") ||
element.getAttribute("sObjectId") || //from AA ActivityMap logic
element.getAttribute("s-object-id") || //from AA ActivityMap logic
element.getAttribute("sObjectID") || //from AA ActivityMap logic
element.getAttribute("data-s-object-id") || //Intention of AA ActivityMap logic
element.innerText && element.innerText.trim() !== "" && element.innerText || //from AA ActivityMap logic
element.textContent && element.textContent.trim() !== "" && element.textContent || //from AA ActivityMap logic
element.querySelector("[alt]") && element.querySelector("[alt]").getAttribute("alt") || //from AA ActivityMap logic
element.querySelector("[title]") && element.querySelector("[title]").getAttribute("title") || //from AA ActivityMap logic
element.getAttribute("aria-label") ||
element.href || //from AA ActivityMap logic
"unknown";

Notice that much of the logic used in determining the value of linkInfo.linkText mirrors that of the ActivityMap module of Adobe Analytics. Other logic follows the spirit of the ActivityMap source code. This was done to preserve the value of existing markup done in support of ActivityMap.

Using the custom HTML attribute data-ea-link-text , you can override all of this logic and set the linkText directly.

linkRegion and data-ea-zone

The linkInfo.linkRegion variable provides context about the clicked element. The value is composed of a pipe delimited list of nested zones.

In the Navigation Link Clicked example above, "linkRegion": "footer|footer-nav" indicates that the clicked link was within the "footer-nav" zone which was within the "footer" zone.

In the CTA link Clicked example above, the linkRegion is "page-main|product-template|product-panel|social-sharing" indicating that the link clicked was within four nested zones.

Zones are defined the the HTML custom attribute data-ea-zonewhich must include a value describing that zone. By defining zones in this way, we have a flexible way of communicating the linkRegion on any page or any layout.

linkInfo.linkRegion is optional and set exclusively from the presence of data-ea-zone attributes in the HTML markup.

The use of nested zones can be incredibly powerful. Implementation is often done within the site's content management system. Start small with common zones such as header, page-main, and footer zones. Then add zone tagging to various repeatable content blocks or experience fragments.

AEM Asset ID tracking

If you are using Adobe's AEM and you have assetID markup already in place, you will see an additional field in the payloads of the data layer events. linkInfo.aemAssetId will be set with the value of data-aem-asset-idif provided on the clicked element.

Filtering Click Events using Launch Rule Conditions

At some point, you will probably find that you need to create a rule triggered by one of these events, but filtered by more information about the element clicked or the anchor tag associated with it. In order to support this, the payloads that are pushed to the data layer for these events convey some extra information. The information may be accessed from within Launch as %event.detail.__meta.clickedElement% and %event.detail.__meta.anchorElement%

These are references to the DOM elements that were identified by the click event. WIthin Launch Conditions and Launch Actions, you can use these references (and the attibutes of the elements referenced) to make your Launch rule as specific as you'd like. If accessing these from within custom code Conditions or Actions, use this form: _satellite.getVar('event.detail.__meta.clickedElement', event);

being sure to pass in the event as the second argument.