etracker for web tracking

Basics

Overview

Etracker is a web analytics tool that lets you track the behavior of users on your website. A typical use case is analytics in online stores, also known as e-commerce tracking. This article describes a sample implementation of e-commerce tracking with etracker and Optimizely Campaign.

Web tracking falls under the category of post-click tracking, which means tracking and recording the actions of a recipient after they have followed a link from a message to a website. In the case of e-commerce tracking, the linked website is an online store.

Etracker serves as the data source for the post-click tracking in Campaign. Code blocks (etracker tags) are embedded in your online store and establish a connection between the store and Campaign. This article explains how to combine Campaign and etracker. You should have a basic understanding of post-click tracking in Optimizely Campaign and of etracker before reading further.

Prerequisites

The following conditions must be met for e-commerce tracking with etracker:

• etracker Analytics is integrated into the online store, see Base Integration in the etracker documentation.
• etracker e-commerce tracking is integrated into the online store, see E-Commerce Tracking Integration in the etracker documentation.  
• Optimizely post-click tracking is active in Campaign and configured for etracker Analytics. This setup is performed by Optimizely customer support on request.
• The tracking parameter bmMailId is configured in Optimizely Campaign. Optimizely then automatically adds bmMailId to links in messages.
• A tracking pixel for etracker has been prepared in Campaign.

Technical Data Exchange Process

A recipient follows a link in a message to your store; the link contains the bmMailId parameter, which identifies the message from Campaign and thus also the recipient. Depending on the configuration, this parameter is stored either in the browser's local storage or in a cookie.

The pages of your store contain trigger scripts that are executed when certain events occur in the store, in order to communicate with etracker. Trigger scripts can load additional code from etracker onto the website. This makes it possible to influence the tracking behavior of your store by changing the etracker configuration, without requiring any changes to the store itself.

When information about an event in the store is transmitted to Campaign, this is done using a tracking pixel: the trigger script on the website loads a tag script from etracker, and this tag script requests a tracking pixel from the Campaign servers.

The tag script writes the bmMailId variable - that is, information about the message and recipient - and the current event into the request for the tracking pixel. Campaign reads this information and stores it in a tracking database that can be used when creating target groups.

Code for Data Exchange via LocalStorage

Overview

The following etracker tags are used to track users who have followed a tracking link to an online store.  The tags are scripts that are configured in etracker and loaded on the relevant pages.

SetBmMailIdInLocalStorage

Configure your tags in etracker so that this code is executed on all pages. When a visitor opens a page, the incoming HTTP request is searched for the bmMailId parameter. If this value is found, it is stored in the browser's local storage. From there, other scripts can access the value to identify the user and the message through which they reached the page.

<script>
  let bmMailId = new URL(window.location.href).searchParams.get("bmMailId") || undefined;
  if(bmMailId) {
    window.localStorage.setItem("bmMailId", bmMailId);
  }
</script>

ProductViewed

Configure your tags in etracker so that this code is executed on all product pages.  The code sends a request for a tracking pixel to Optimizely Campaign and adds the value of bmMailId from the browser's local storage to this request (see SetBmMailIdInLocalStorage above). Campaign reads this data and stores in its tracking database which recipient viewed which product in your store at what time.

<script>
(function () {
  const bmMailId = localStorage.getItem("bmMailId");
  if (!bmMailId || !Array.isArray(window.dataLayer)) return;

  const event = window.dataLayer.find(e => e?.etEvent === "viewProduct");
  const p = event?.product;
  if (!p?.id) return;

  const base = "https://"+{{OptimizelyTrackingDomain}}+"/pc?mg="+{{OptimizelyMailingGroupId}}+"&service=et_viewProduct_"+{{OptimizelyMailingGroupId}};

  const url = new URL(base);
  url.searchParams.set("bmMailId", bmMailId);
  url.searchParams.set("gvalue1", p.id);
  if (p.name) url.searchParams.set("gvalue2", p.name);
  if (p.category) url.searchParams.set("gvalue3", p.category);
  if (p.currency) url.searchParams.set("gvalue4", p.currency);
  if (p.price != null) url.searchParams.set("fvalue1", p.price);

  const img = document.createElement("img");
  img.src = url.toString();
  img.width = 1;
  img.height = 1;
  img.style.display = "none";

  document.body.appendChild(img);
})();
</script>

The script is used to automatically track product views and transmit them to Campaign's PostClickTracking system. The process consists of the following steps:

• Validation: The script first checks for the presence of the email identifier (bmMailId) in localStorage and verifies the existence of the eTracker data layer window.dataLayer.
• Data extraction: The dataLayer is searched specifically for the viewProduct event. If the event or the required product ID (id) does not exist, execution is terminated.
• Dynamic URL construction: Based on the configuration variables set in eTracker (OptimizelyTrackingDomain, OptimizelyMailingGroupId), the target URL is generated and sequentially expanded to include the available product metadata (ID, name, category, currency, price) as query parameters.
• Asynchronous data transfer (tracking pixel): Data is transmitted via the tracking pixel method. For this purpose, an invisible <img> element (1x1 pixel) is generated. By appending the element to the document (document.body), the browser triggers the HTTP request to Campaign.

ProductBuy

Configure your tags in etracker so that this code is executed on all order confirmation pages.  The code sends a request for a tracking pixel to Optimizely Campaign and adds the value of bmMailId from the browser's local storage to this request (see SetBmMailIdInLocalStorage above). Campaign reads this data and stores in its tracking database which recipient purchased which product at what time.

<script>
(function () {
  const bmMailId = localStorage.getItem("bmMailId");
  if (!bmMailId || !Array.isArray(window.dataLayer)) return;

  const event = window.dataLayer.find(e => e?.etEvent === "order");
  const items = event?.order?.basket?.products;
  if (!Array.isArray(items) || items.length === 0) return;

  const base =
    "https://"+{{OptimizelyTrackingDomain}}+"/pc?mg="+{{OptimizelyMailingGroupId}}+"&service=et_order_"+{{OptimizelyMailingGroupId}};

  items.forEach(item => {
    const p = item?.product;
    if (!p?.id) return;

    const url = new URL(base);
    url.searchParams.set("bmMailId", bmMailId);
    url.searchParams.set("gvalue1", String(p.id));
    if (p.name) url.searchParams.set("gvalue2", String(p.name));
    if (p.category) url.searchParams.set("gvalue3", String(p.category));
    const currency = event?.order?.currency || p.currency;
    if (currency) url.searchParams.set("gvalue4", String(currency));
    if (p.price != null) url.searchParams.set("fvalue1", String(p.price));
    if (item.quantity != null) url.searchParams.set("fvalue2", String(item.quantity));

    const img = document.createElement("img");
    img.src = url.toString();
    img.width = 1;
    img.height = 1;
    img.style.display = "none";
    document.body.appendChild(img);
  });
})();
</script>