Documentation

# Link Tracking

# General Overview

The activity map or interaction tracking needs 2 parameters to be set link id or name and region where that link appears. In order to get the exact data, we defined the format for each one of those parameters. The link name will use data-s-object-id attribute on the links and buttons and data-s-region-id attribute to be set on regions.

The expectation is that data-s-region-id is set on each section of pages. In AEM these are set programmatically on the server to minimize user error and to have consistent data. In AEM the last value of user authentication state will be omitted and will be set by JavaScript. Since Luminate knows about user's authenticated status it will render that data on each page to improve site performance.

In Luminate the data-s-region-id attribute was manually set, so it is rendered server-side where it applies. The Sponsorship & Member Center JavaScript apps include the same markup in those page templates as well. The main wrapper in Luminate will be set to contain these values, so any simple default content will include necessary tags. Any major page section additions in Luminate will require this data to be set by the authors who will be creating those sections.

# Luminate presets

A session variable was created in Luminate so the user's authentication state can be easily rendered on all pages. To render the value just type in [[S80:userState]]. Example from reus_nav__ecommerce, <nav class="nav--secondary" data-s-region-id="Navigation|Gift Catalog|||[[S80:userState]]">

If the JavaScript is used to render the content, the user's authentication state can be grabbed from the body data attribute. Ex: $body.attr('data-user-state');

# Fancybox overlays

Please use the global fancybox settings. That is, assign fancybox, fancybox--teal or fancybox--plum class to your link and allow global function to render the overlay. If the fancybox link is rendered by JS just call $container.enableFancybox() on the newly added container and the links will be enabled with the standard settings. If you are manually triggering the $.fancybox.open(), then be sure to pass through the global settings, $.fancybox.open(window.fancyboxSettings) The standard settings behave as follows:

  • The fancybox will initialize with data-s-region-id="Overlay||||" attribute added to the outmost container with the fancybox-wrap class. This is a fallback in case admins do not specify anything, this way the data will show that the interaction has happened inside an unspecified overlay.
  • Then the script will look for a data-s-region-id attribute on the link with a fancybox class that triggered the overlay and move that attribute to the outermost container that has a class fancybox-wrap. This allows admins to specify custom names for overlays that open images and videos in an iframe.
  • Otherwise it will check if the overlay is of type inline, that means we are opening an HTML container. It will look for the data-s-region-id on the target's outermost elements, if it finds one, it will move that attribute to the outermost container that has a class fancybox-wrap.

# Technical Details

# Interactive Element

Specific element must have an assigned data-s-object-id attribute to be properly recorded in analytics. See general overview section to find out more about cases when this value is not set by the code.

Note: The interactive element names will be set with data-s-object-id. Most of them are dynamically computed and set on <a> and <button> element on page load by the JavaScript function in stc-analytics-data-layer.js or by data-link-type attribute.

Note: If the link is rendered by Javascript after the initial page load the data-s-object-id cannot and will not be automatically set. The only exception is one-page apps that record a virtual page view, in those cases the function to set data-s-object-id parameters will be run. All links rendered on the page with JavaScript after the page is loaded should contain the data-s-object-id attribute with the proper data populated per format below.

Format: ${linkType}|${linkName}|${linkTitle}

  • ${linkType}: One of the three values:

    • Button
    • Image
    • Text The data can be optionally set by data-link-type attribute to quickly determine the link type, if data-s-object-id is not specified on the element. If neither attributes set, the analytics script will compute this value based on the element tag name and assigned classes.

  • ${linkName}: Will be computed in the following order of prefernce: data-name attribute, name attribute, inner text of the image, alt attribute of the inner image, if present.

  • ${linkTitle}: Will pull in title attribute of the field, if present. If specifying manually, set a uniquely identifying value here, to help differentiate it from other elements.

  • | Separator will always be present even if there is no data for ease of creation of computed variables.

# Interactive Region

The interactive region will be defined by using data-s-region-id attribute on closest parent container. In most cases it will be the <section> tag, in the <header> and <footer> sections it will be set on <ul> tags of the menus and closest parent containers where it applies.

Format: ${regionType}|{$regionSection}|${regionPosition}|${gridPosition}|${loggedInState}

  • ${regionType}: Top level name of the region that will be set to one of the following values:

    • Alert, denotes HTML <section> tag with a class section--alert that appears on top of the page, also includes CookieBot, incompatible browser and cookies disabled alerts
    • Banner, denotes hero images, <section> HTML tag with a class that starts with keyword banner--
    • Body, should never be set on final HTML, this is a default fallback value when region attribute is not found
    • Grid, denotes HTML containers that have class column or rectangle--
    • Map, denotes an interactive map
    • Navigation, denotes a navigation
    • Overlay, denotes all pop-ups and interstitials that get popped up using fancybox plugin
    • Panel, denotes page sections, top-level HTML tag <section>
    • Related Links, denotes the custom related links section
    • Tab, denotes tab component that currently appears on the homepage

  • ${regionSection} More exact name of the region/section, in most cases it will be set programmatically, based on the name or headline of the section. For content panels a user-entered input may be required in AEM. All existing content in Luminate will be marked up manually, new page additions would require the entry by the authors. Examples are: Main, Footer,Gift Catalog.

  • ${regionPosition} The position of the region within the page. Since top/middle/bottom are a bit ambiguous the position will be set mathematically. It will include the order of the current section among the list of all top-level section in the page. The value will be set in the format Region 1 of X, where X is the total number of top-level <section> tags that appear within the <main> container, including the banner.

  • ${gridPosition} Will denote the position of a column, a rectangle or a tab is a set of many. The value will be set in the format Grid 1 of X, where X is the total number of top-level <div class="column">, <div class="rectangle--X">, <div class="tab__item">, <div class="tab"> tags that appear within the <div class="column__row">, <div class="rectangle__container">, <div class="tab_nav"> or <div class="tab__contents"> containers respectively. Rebecca will try to set the full information about the parent section and the grid item into data-s-region-id on the grid items. However, if that proves impossible she will set data-s-subregion-id on the item that will only contain the grid position data. Javascript would them be used to merge the data from the data-s-region-id on the parent container with the data-s-subregion-id on the child container. to set data-s-region-id attribute on the grid item container.

  • ${loggedInState} This information will be added programatically with JavaScript into all data-s-region-id attributes on the page in AEM (or Drupal) since it does not know user's state until the user is logged in. In Luminate, the value will be set server-side as all the users authenticate against the Luminate server and that value is known on page load.

← Launch configuration →