Cart Abandonment
This guide outlines how to enable Cart Abandonment 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.
Requirements
There are two components to the setup:
1. Basket Summary Web Component
Many clients already have this step implemented if they are already using the basket-summary web component. If so, this step can be skipped.
To identify whether the Basket Summary web component is already implemented, check whether spektrixBasket appears in developer tools > Application > Local Storage. If it does, this step can be skipped.
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">
</spektrix-basket-summary>
2. 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.
Download the pre-built GTM container
We provide a pre-built GTM container to simplify setup.
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.
Import the container to your Google Tag Manager.
GTM Configuration
Once imported, open the folder Dotdigital Tracking Settings and configure the following variables:
| Variable | Description |
|---|---|
commaSeparatedListOfTrackedDomains | Your primary and iframe domains, e.g. tickets.sampletheatre.com, .sampletheatre.com |
currency | GBP or USD |
dotdigitalAbandonedCartDelayInMins | Minutes after abandonment before the user enters the program (e.g. 30) |
dotdigitalAbandonedCartProgramId | The Program ID for your Dotdigital abandoned cart program — found at the end of the program URL. See instructions below |
dotdigitalAccountId | Your Dotdigital Tag ID — created under Connect > Connect Website by a user with the Manage Account role. See instructions below |
fallbackUrlForCartAbandonmentCampaign | A general fallback page, e.g. your What’s On page, used if an event has no Web URL in Spektrix |
siteDomain | Your main website domain, e.g. sampletheatre.com |
spektrixCustomDomain | The domain hosting your Spektrix iframes, e.g. tickets.sampletheatre.com |
Cookie Consent
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. You can do this with a cookie management solution. You 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.
Program ID
Create or edit a Program in Dotdigital that will be used to send the cart abandonment email.
For setup, this can be a program with only a start node.
In the program builder, copy the Program ID — this is the string of numbers found at the end of the URL in your browser.
Save the program. You do not need to activate it until you're ready to start sending emails.