Tracking Abandoned Cart

Under active development

This feature is currently under active development and not ready for wide release. If you are interested, please reach out to us at at support@spektrix.com

This guide outlines how to enable Abandoned Cart tracking on your website.

Once installed, this setup allows Dotdigital to track users who begin but don’t complete a purchase, and trigger personalised reminder emails through an automated program.

How it works

The spektrix-basket-summary web component already reads the contents of the customer's basket. When Dotdigital Basket Insights is enabled on the component, it also pushes identity and basket data into the data layer as the basket changes.

The Dotdigital tag — loaded through Google Tag Manager — reads those events and sends them to Dotdigital, where you build the abandoned cart program.

You do not need to write any tracking logic yourself. The mapping from Spektrix basket data to the Dotdigital schema is handled by the component.

Requirements

There are three parts to the setup:

The Basket Summary web component, configured for Basket Insights
An attribute in Spektrix marking which items may appear in abandonment emails
Google Tag Manager, to load the Dotdigital tag

1. Basket Summary Web Component

Many clients already have this step implemented if they are already using the basket-summary web component. If so, you only need to add the two Basket Insights Attributes described below.

Identify whether the Basket Summary web component is already implemented

To identify whether the Basket Summary web component is already implemented, check whether spektrixBasket appears in developer tools > Application > Local Storage. If it does, the component is running.

This component does not need to be rendered on the page, it just needs to be running in the background to capture basket data. So you can either implement the full component, including the markup, and display the basket summary to the end customer as per documentation, OR you can implement the minimum as outlined below.

Loading code

Between the <head> tags of your page, ensure you have the following script which defines the custom element. If you are already using any of the Spektrix web components, you should already have this in place:

<script src="https://webcomponents.spektrix.com/stable/spektrix-component-loader.js" async></script>

Loading the web component

You will need to change the client-name and custom-domain to match those of your client's. Optionally, you can populate the component with markup to display the basket summary, as per documentation.

<spektrix-basket-summary
    client-name="thetheatre"
    custom-domain="tickets.thetheatre.org"
    dd-basket-insights-active
    dd-basket-insights-cart-url="https://www.thetheatre.org/checkout">
</spektrix-basket-summary>

Basket Insights attributes

Attribute	Required	Type	Purpose
`dd-basket-insights-active`	Yes	Boolean	Turns on the Dotdigital Basket Insights data layer pushes. Present means on; omit the attribute to turn it off.
`dd-basket-insights-cart-url`	Yes	String	The URL used for the "return to cart" link in your abandonment emails. This should be a page on your site that loads the Spektrix basket.

warning

The component must be present on every page where a customer can add to or change their basket, including the pages hosting your Spektrix iframes. If it is missing from a step in the purchase path, changes made on that step will not be tracked.

2. Mark items for inclusion

Items are only sent to Dotdigital if they have been explicitly opted in. This gives you control over which shows and products can appear in a reminder email.

In Settings in Spektrix, create a Check-box attribute named exactly:

Include In Abandoned Email

Then tick that Attribute in Admin on each Event and Merchandise item you want included.

Supported item types

The first release supports Event tickets and Merchandise only. Donations, memberships, gift vouchers and ticket subscriptions are not included in the basket data sent to Dotdigital. Baskets containing these items will still be tracked — those items are simply omitted from the products list.

3. Google Tag Manager (GTM)

If GTM is already installed on your website, you can import the pre-configured container into your existing setup. If GTM is not installed on your website, follow the available resources provided by Google on setting up and installing Google Tag Manager.

GTM Container

We are still working on the GTM container but we will publish it soon and make it available to download here. You can complete the rest of the steps on GTM configuration once we share the GTM container.

Because the component now builds the Dotdigital payload itself, the container only needs your Dotdigital Tag ID. Delay, program selection and campaign content are all configured directly inside Dotdigital.

Data Layer Reference

You do not need to read this section to complete the setup. It is provided so developers can verify the integration and debug it in GTM Preview mode.

Every payload is namespaced under spektrixDD, and each push is preceded by { ecommerce: null, spektrixDD: null } to clear stale values from GTM's merged data layer state.

`spektrix.ddIdentify`

Pushed when a signed-in customer is detected. It is deduplicated by email address, so it only fires again if the signed-in customer changes.

{
  event: 'spektrix.ddIdentify',
  spektrixDD: {
    email: 'john@doe.com',
    firstName: 'John',
    lastName: 'Doe',
    mobileNumber: '+447700900000'
  }
}

`spektrix.ddCartUpdate`

Pushed whenever the contents of the basket change. Unchanged and empty baskets are skipped.

{
  event: 'spektrix.ddCartUpdate',
  spektrixDD: {
    cartId: 'a1b2c3d4-...',
    currency: 'GBP',
    subtotal: 45.00,
    grandTotal: 40.00,
    cartUrl: 'https://www.thetheatre.org/checkout',
    products: [
      {
        sku: '2603_event',
        productId: '2603_event',
        name: 'Romeo and Juliet',
        description: '<html>...',
        categories: ['Tickets'],
        unitPrice: 25.00,
        quantity: 2,
        totalPrice: 50.00,
        imageUrl: 'https://...',
        productUrl: 'https://www.thetheatre.org/whats-on/romeo-and-juliet'
      }
    ]
  }
}

`spektrix.ddPurchaseComplete`

Pushed on order confirmation, so that Dotdigital can close the cart and suppress the reminder email. It repeats the last cart payload and adds the Spektrix transaction ID as orderId.

{
  event: 'spektrix.ddPurchaseComplete',
  spektrixDD: {
    cartId: 'a1b2c3d4-...',
    currency: 'GBP',
    subtotal: 45.00,
    grandTotal: 40.00,
    cartUrl: 'https://www.thetheatre.org/checkout',
    products: [ ... ],
    orderId: 'TXN-12345'
  }
}

Cart fields

Field	Description
`cartId`	Identifier that groups related cart updates together. It is stored in local storage on a 72 hour sliding window and is reset once an order is confirmed.
`currency`	Your Spektrix system currency, e.g. `GBP`.
`subtotal`	Basket total before discounts.
`grandTotal`	Basket total after discounts.
`cartUrl`	The value of `dd-basket-insights-cart-url`.
`products`	The opted-in items in the basket.
`orderId`	Spektrix transaction ID. Present on `spektrix.ddPurchaseComplete` only.

Product fields

Field	Description
`sku`	Item identifier, e.g. `2603_event`.
`productId`	Same value as `sku`.
`name`	Event or merchandise item name.
`description`	The item description from Spektrix.
`categories`	Array containing the item's category, e.g. `['Tickets']`.
`unitPrice`	Price of a single item.
`quantity`	Number of that item in the basket.
`totalPrice`	`unitPrice` multiplied by `quantity`.
`imageUrl`	The item's image in Spektrix, if one is set.
`productUrl`	The item's Web URL in Spektrix, if one is set.

Items that share the same sku and unitPrice are condensed into a single product entry with the quantity and total price aggregated.

Item types

Basket item	SKU format	Category
Event tickets	`{EventID}_event`	`Tickets`
Merchandise	`{StockItemID}_merchandise`	`Merchandise`

The Dotdigital tracking must only run after the user has accepted tracking cookies. To be GDPR compliant, you must get consent from your users if your site uses any non-essential cookies. Using Google Tag Manager means that all analytics behavior will respect a customer's choice but it will not implement this behavior. You can do this with a cookie management solution and can find our details on cookies here.

DotDigital setup

Dotdigital Tag ID

In Dotdigital, navigate to:

Connect > Connect Website > New connection

The following settings need to be configured:

Website Name – Your website URL
Domains – Add your website domain and your custom iframe domain.
Each domain must be listed on a separate line.
Enable Web behavior tracking – Yes

Once this is done, you’ll return to the Connect Website page and be given a Tag ID. This is the only Dotdigital value you need to enter in Google Tag Manager.

Abandoned cart program

Build the program that sends your reminder email in Dotdigital, using its Basket Insights triggers.

The delay before a customer enters the program, and the content of the email, are both set in Dotdigital. You do not need to pass a Program ID or a delay to Spektrix or to Google Tag Manager.

You do not need to activate the program until you're ready to start sending emails.

Known limitations

Item types. Only Event tickets and Merchandise are sent in the first release.
Opt-in required. Items without the Include In Abandoned Email attribute ticked will not appear in abandonment emails.

How it works​

Requirements​

1. Basket Summary Web Component​

Loading code​

Loading the web component​

Basket Insights attributes​

2. Mark items for inclusion​

3. Google Tag Manager (GTM)​

Data Layer Reference​

spektrix.ddIdentify​

spektrix.ddCartUpdate​

spektrix.ddPurchaseComplete​

Cart fields​

Product fields​

Item types​

Cookie Consent​

DotDigital setup​

Dotdigital Tag ID​

Abandoned cart program​

Known limitations​