Install abandoned cart scripts for Shopify

Learn how to manually install the scripts that power the abandoned cart module for Shopify.

Overview

If you choose to install the abandoned cart module for Shopify manually, there are a number of scripts that will need to be placed on your site. This article will show you how.

Before you start

Things you need to know:

  • You must get the unique ID for your Web behaviour tracking profile. To find it, go to Settings > Access > Web behavior profiles.

    You must be an account owner or have the Can manage account permission enabled to see the Access menu item. To learn more about user permissions, check out the Restrict and grant user access permissions article.

WBT_profile_ID.png

This page provides some example scripts, however for Shopify we recommend you use the scripts provided in this article.

  • Make a note of the ID of your abandoned cart program. This ID is in the URL of the program page, for example https://r1-app.dotdigital.com/Program/Edit?``id=XXXXXX.
  • If you have one set, clear the default abandoned checkout enrolment in the Shopify Plus connector to avoid any potential enrolment conflicts or duplicate enrolments. To do this go to Settings > Shopify > Store in your Dotdigital account, and expand the Enrol Abandoned Checkouts to drop-down menu and select No program selected.
    abandoned_checkout.png

Install the Web behavior tracking script

The Web Behavior Tracking script is essential to allow Dotdigital to track when your customers leave any page of your site with items left in their cart.

In order to track your customers' carts as soon as they're identified on your store:

  1. Log in to your Shopify Admin
  2. Go to SALES CHANNELS > Online Store > Themes
  3. Select Actions > Edit Code > theme.liquidshopify_cart_insight.png
  4. Insert the following script before the </head> tag, and replace the %uniqueID% placeholder with the unique ID for your web behavior tracking profile. The code must be wrapped within <script></script> .
var dm_insight_id ='uniqueID';

(function(w,d,u,t,o,c){w['dmtrackingobjectname']=o;c=d.createElement(t);c.async=1;c.src=u;t=d.getElementsByTagName
(t)[0];t.parentNode.insertBefore(c,t);w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments);};w[o]('track');
})(window, document, '//static.trackedweb.net/js/_dmptv4.js', 'script', 'dmPt');

Install the CartInsight script

This script sends the details of a customer’s cart to Dotdigital to allow this information to be used in your abandoned cart campaigns and programs.

  1. Before the </body> tag, copy and paste the following script:
    <script>

    // <<< Dotdigital Abandoned cart script >>>

    var dmPt = dmPt ? dmPt : {};

    // Change this value to true if you want to enable guest abandoned cart

    dmPt.enableGuestAbandonedCart = false;

    // Id or selector expression to return the newsletter sign up forms of your store

    dmPt.newsletter_form_id="#ContactFooter";

    !function(u){function e(t){var e,n,r,i=(e=t.target,n="input[type=email]",(r=e.querySelector(n))&&r.value?r.value:null);i&&a(i)}function a(t){n("dm-subscriber",t,365)}function n(t,e,n){var r;e&&((r=new Date).setTime(r.getTime()+24*n*60*60*1e3),u.cookie=t+"="+e+"; expires="+r.toGMTString()+"; path=/")}function t(t){for(var e=t+"=",n=u.cookie.split(";"),r=0;r<n.length;r++){for(var i=n[r];" "==i.charAt(0);)i=i.substring(1,i.length);if(0==i.indexOf(e))return i.substring(e.length,i.length)}return null}dmPt&&(dmPt.enableGuestAbandonedCart&&u.querySelectorAll(dmPt.newsletter_form_id).forEach(function(t){t.addEventListener("submit",e,!1)}),dmPt.emailSubmitted=t("dm-subscriber"),a(dmPt.emailSubmitted),dmPt.cartId=t("cart"),n("dm-cart",dmPt.cartId,15))}(document);

    {% if customer.email and customer.accepts_marketing %}

    dmPt("identify", "{{ customer.email }}");

    {% else %}

    if(dmPt.enableGuestAbandonedCart && dmPt.emailSubmitted && dmPt.emailSubmitted !== ""){

    dmPt("identify", dmPt.emailSubmitted);

    }

    {% endif %}

    if(dmPt.cartId && dmPt.cartId !== ""){

    dmPt("cartInsight", {

    "programID": %programID%,

    "cartDelay": %cartDelay%,

    "cartID": dmPt.cartId, //This value is retrieved from a Shopify cookie

    "cartPhase": "CUSTOMER_LOGIN",

    "currency": "{{ shop.currency }}",

    "subtotal": {{ cart.total_price }}/100,

    "discountAmount": {{ cart.original_total_price | minus: cart.total_price }}/100,

    "taxAmount": 0,

    "grandTotal": {{ cart.total_price }}/100,

    "cartUrl": "{{ shop.url }}/cart/{% for item in cart.items %}{{item.variant_id}}:{{ item.quantity }}{% if forloop.last == false %},{% endif %}{% endfor %}",

    "lineItems": [

    {% for item in cart.items %}

    {

    "sku": "{{ item.sku }}",

    "name": "{{ item.title }}",

    "description": "{{ item.product.description | strip_html | escape | strip_newlines }}",

    "category": "{% for collection in item.product.collections %}{{ collection.title }} {% endfor %}",

    "other": "{% for tag in product.tags %}{{ tag }} {% endfor %}",

    "unitPrice": {{ item.original_price }}/100,

    "salePrice": {{ item.price }}/100,

    "quantity": {{ item.quantity }},

    "totalPrice": {{ item.line_price }}/100,

    "imageUrl": "{{ item.image | img_url: 'small' | prepend:'https:'}}",

    "productUrl": "{{ shop.url }}{{ item.url}}",

    } {% if forloop.last == false %},{% endif %}

    {% endfor %}

    ]

    });

    }

    </script>
  2. Replace the %programID% placeholder with the ID of the program you want to enrol your contacts on, and replace the %cartDelay% placeholder with the number of minutes that you want Dotdigital to wait after a customer exits your store before enrolling them on the program
  3. Save theme.liquid

Sending to Non-Subscribers

You can choose to enrol non-subscribed contacts on your abandoned cart program from your store settings by going to Settings > Shopify > Store in your Dotdigital account. Under the heading Abandoned cart, set Allow abandoned cart for non-subscribed contacts to YES.

If you want to make this change to the script directly, you need to make the following adjustments:

  • Non Subscribed Customers
    • Change this line {% if customer.email and customer.accepts_marketing %} to {% if customer.email %}
  • Guests
    • Change this line dmPt.enableGuestAbandonedCart = false; to dmPt.enableGuestAbandonedCart = true;

Install the Order success script

This script is implemented on the Order Processing page to prevent abandoned cart emails from being sent if the contact completes the purchase.

  1. In your Shopify store admin go to Settings > Checkout > Order processing and paste the following script in Additional scripts:
    <script>
    var dm_insight_id ='uniqueID';

    (function(w,d,u,t,o,c){w['dmtrackingobjectname']=o;c=d.createElement(t);c.async=1;c.src=u;t=d.getElementsByTagName
    (t)[0];t.parentNode.insertBefore(c,t);w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments);};w[o]('track');
    })(window, document, '//static.trackedweb.net/js/_dmptv4.js', 'script', 'dmPt');

    // <<< Dotdigital Abandoned cart script >>>
    var dmPt = dmPt ? dmPt : {};
    // Change this value to true if you want to enable guest abandoned cart
    dmPt.enableGuestAbandonedCart = false;

    !function(i){function t(t){for(var n=t+"=",r=i.cookie.split(";"),e=0;e<r.length;e++){for(var d=r[e];" "==d.charAt(0);)d=d.substring(1);if(0==d.indexOf(n))return d.substring(n.length,d.length)}return""}dmPt.enableGuestAbandonedCart&&(dmPt.emailSubmitted=t("dm-subscriber")),dmPt.cartId=t("dm-cart")}(document);

    {% if customer.email and customer.accepts_marketing %}
    dmPt("identify", "{{ customer.email }}");
    {% else %}
    if(dmPt.enableGuestAbandonedCart && dmPt.emailSubmitted && dmPt.emailSubmitted !== ""){
    dmPt("identify", dmPt.emailSubmitted);
    }
    {% endif %}

    if(dmPt.cartId && dmPt.cartId !== ""){
    dmPt("cartInsight", {
    "programID": %programID%,
    "cartDelay": %cartDelay%,
    "cartID": dmPt.cartId,
    "cartPhase": "ORDER_COMPLETE",
    "grandTotal": {{ total_price | money_without_currency }},
    "currency": "{{ shop.currency }}",
    "subtotal": {{ total_price | money_without_currency }},
    "discountAmount": 0,
    "taxAmount": 0,
    "cartUrl": "{{ shop.url }}",
    "lineItems": []
    });
    }
    </script>
  2. Replace the following placeholders:
    1. The %uniqueID% placeholder with the unique ID for your Web behavior tracking profile
    2. The %programID% placeholder with the ID of the program you want to enrol your contacts in
    3. The %cartDelay% placeholder with the number of minutes that you want Dotdigital to wait after a customer exits your store before enrolling them on the program.
  3. When finished, select Save.

Sending to Non-Subscribers

The following adjustments need to be made to the script:

  • Non Subscribed Customers
    • {% if customer.email and customer.accepts_marketing %} to {% if customer.email %}
  • Guests
    • dmPt.enableGuestAbandonedCart = false; to dmPt.enableGuestAbandonedCart = true;
Did you find this article helpful?

Can we help?

Thanks for using Dotdigital. If you need more help or support, then contact our support team.