Before you start

Things you need to know:

You must already have configured and published the Dotdigital Tag to your site.
Learn more in Add the Dotdigital Tag to your website.
The below additions must come after the Dotdigital Tag when placed on your site, to ensure that the window.ddg.track function is available when you call it.
Place the script just before the closing </body> tag of your site to ensure all page elements are loaded.

Abandoned carts

By implementing our abandoned cart script, you can start gathering abandoned cart data for your contacts. Once you set this up, abandoned cart data is populated in an Insight data collection against a contact's record and can be used to power abandoned cart messages and automations.

🚧
The code to supply the visitor’s cart data must be executed on every single page of your site after the cart has been created. Failure to do so may result in abandoned cart emails being triggered too early.

window.ddg.cartUpdate({
  cartId: "123ABCZZFSEFSEFESZZZZZee",
  currency: "USD",
  subtotal: 35.98,
  shipping: 8,
  discountAmount: 0,
  taxAmount: 0,
  grandTotal: 35.98,
  cartUrl: "https://www.example.com/checkout/cart",
  products: [
    {
      sku: "576879",
      name: "Shirt",
      description: "A super great description of the product",
      category: "Shirts >> T-Shirts >> Blue",
      other: {"fieldName": "This can be a string or any value you like"},
      unitPrice: 11.99,
      salePrice: 11.99,
      quantity: 20,
      totalPrice: 23.98,
      imageUrl: "http://www.example.com/a/p/shirt.jpeg",
      productUrl: "http://www.example.com/index.php/shirt.html"
    }
  ]
});

📘
Cart update data has an optional property of cartPhase. You can choose the value to send for this property, but suggested values are ORDER_PENDING, ORDER_CHECKOUT or CUSTOMER_LOGIN.
If no value is specified, then for ddg.cartUpdate we set cartPhase to ORDER_PENDING and for ddg.purchaseComplete we set it to ORDER_CHECKOUT.

Purchase complete

window.ddg.purchaseComplete({
  cartId: "123ABCZZFSEFSEFESZZZZZee",
  orderId: "45645",
  currency: "USD",
  subtotal: 35.98,
  shipping: 0,
  discountAmount: 0,
  taxAmount: 0,
  grandTotal: 35.98,
  cartUrl: "https://www.example.com/checkout/cart",
  products: [
    {
      sku: "576879",
      name: "Shirt",
      description: "A super great description of the product",
      category: "Shirts >> T-Shirts >> Blue",
      other: {"fieldName": "This can be a string or any value you like"},
      unitPrice: 11.99,
      salePrice: 11.99,
      quantity: 20,
      totalPrice: 23.98,
      imageUrl: "http://www.example.com/a/p/shirt.jpeg",
      productUrl: "http://www.example.com/index.php/shirt.html"
    }
  ]
});

📘
When this method is used, the cartinsight's CartPhase in Dotdigital is set to ORDER_CHECKOUT .

Identify

By default, the Dotdigital Tag identifies a user when a recipient clicks through from one of your Dotdigital campaigns to your website. You might have additional ways that a user provides you with their information whilst visiting your site, for example, a customer login form or newsletter subscribe option at checkout.

We recommend that you also implement the Identify method to submit the user's email address or mobile number as they provide it to you. Without this, we might not be able to send messages to site visitors who have arrived on your site without clicking through from a Dotdigital campaign.

At least one identifier is required; either email address or mobile number.

window.ddg.identify({
  email: "[email protected]",
  mobileNumber: "+447911123456",
  firstName: "Jane",
  lastName: "Doe",
  fullName: "Jane Doe"
});

🚧
User identification
You must replace the example email address or mobile number in the above code with the actual user's email address or mobile number dynamically, as they provide it to you through your website.
This will be a customised process unique to your site, so you must make the necessary amendments to the script to enable this.

Abandoned browse

The script below extends the data collected by the Dotdigital Tag to include the last browsed product variables:

productId
sku
name
url
imageUrl
imageThumbnailUrl
price
salePrice
currency
priceInclTax
salePriceInclTax
status
stock
description
categories
extraData
lang
brand
variantId
variants

📘
Variables in bold are required, as they’re used to power the default content in the Last browsed product block.

The below productBrowse script, as well as the identify method, must be added to the product description pages (PDPs) of your site.

window.ddg.productBrowse({  
    productId: 'uniqueproductid',  
    name: 'name',  
    price: 1.12,  
    imageThumbnailUrl: 'http://www.example.com/thumbnail.jpg',  
    imageUrl: 'http://www.example.com/image.jpg',  
    priceInclTax: 1.35,  
    salePrice: 3.2,  
    salePriceInclTax: 3.5,  
    sku: 'sku-123',  
    status: 'status',  
    stock: 1,  
    url: 'http://example.com/product.html',  
    brand: 'brand name',  
    lang: 'language',  
    categories: [  
        'category 1',  
        { categoryName: 'category 3', groupName: 'category group' }],  
    currency: 'currency',  
    description: 'description',  
    extraData: {  
        'string value': 'hello world',  
        'int value': 1542,  
        'float value': 1.12,  
        'boolean value': true  
    },  
    variantId: 'var1',  
    variants: [  
        {  
            id: 'var1',  
            image: 'http://www.example.com/image_a.jpg',  
            name: 'variation 1',  
            stock: 1,  
            url: 'http://example.com/product_variation1.html'  
        },  
        {  
            id: 'var2',  
            image: 'http://www.example.com/image_b.jpg',  
            name: 'variation 2',  
            stock: 1,  
            url: 'http://example.com/product_variation2.html'  
        }  
    ]  
});

🚧
Script requirements
For abandoned browse tracking to work correctly, you must complete the product variables with the product details from your site; name, url, sku, and so on, all need to be set.

Full code example

Here’s an example showing the Dotdigital Tag with the added abandoned cart and browse tracking scripts:

const ddgTagLoaded = function() {
        // --- Cart Update ---
    window.ddg.cartUpdate({
        cartId: "123ABCZZFSEFSEFESZZZZZee",
        currency: "USD",
        subtotal: 35.98,
        shipping: 8,
        discountAmount: 0,
        taxAmount: 0,
        grandTotal: 35.98,
        cartUrl: "https://www.example.com/checkout/cart",
        products: [
            {
                productId: 'uniqueproductid',
                sku: "576879",
                name: "Shirt",
                description: "A super great description of the product",
                category: "Shirts >> T-Shirts >> Blue",
                other: { fieldName: "This can be a string or any value you like" },
                unitPrice: 11.99,
                salePrice: 11.99,
                quantity: 20,
                totalPrice: 239.8,
                imageUrl: "http://www.example.com/a/p/shirt.jpeg",
                productUrl: "http://www.example.com/index.php/shirt.html"
            }
        ]
    });
    // --- Identify Contact ---
    window.ddg.identify({
        email: "[email protected]",
        mobileNumber: "+447911123456",
        firstName: "Jane",
        lastName: "Doe",
        fullName: "Jane Doe"
    });
    // --- Product Browse ---
    window.ddg.productBrowse({
        productId: 'uniqueproductid',
        name: 'name',
        price: 1.12,
        imageThumbnailUrl: 'http://www.example.com/thumbnail.jpg',
        imageUrl: 'http://www.example.com/image.jpg',
        priceInclTax: 1.35,
        salePrice: 3.2,
        salePriceInclTax: 3.5,
        sku: 'sku-123',
        status: 'status',
        stock: 1,
        url: 'http://example.com/product.html',
        brand: 'brand name',
        lang: 'language',
        categories: [
            'category 1',
            { categoryName: 'category 3', groupName: 'category group' }
        ],
        currency: 'currency',
        description: 'description',
        extraData: {
            'string value': 'hello world',
            'int value': 1542,
            'float value': 1.12,
            'boolean value': true
        },
        variantId: 'var1',
        variants: [
            {
                id: 'var1',
                image: 'http://www.example.com/image_a.jpg',
                name: 'variation 1',
                stock: 1,
                url: 'http://example.com/product_variation1.html'
            },
            {
                id: 'var2',
                image: 'http://www.example.com/image_b.jpg',
                name: 'variation 2',
                stock: 1,
                url: 'http://example.com/product_variation2.html'
            }
        ]
    });
    delete window.ddgTagLoaded;
}
!!window.ddg ? ddgTagLoaded() : window.addEventListener('ddgTagLoaded', ddgTagLoaded);