Shopify Plus connector - Enrolling customers on an abandoned cart program

Contents

Adding the script to your store's source code
Testing the abandonded cart functionality

Summary

This article explains how to automatically enrol customers on a program when they abandon a cart from any page of your store.

The advantage of this option over the default abandoned checkout enrolment is that contacts with items in their cart can be enrolled on a program when they leave your site from any page, not just the checkout page.

To set up this option, you need to add some JavaScript to your store's source code.

Prerequisite

This feature relies on advanced personalisation. Please contact us to enable advanced personalisation on your account.

Adding the script to your store's source code

Before adding the script to your store

  • Get the unique ID for your web behavior tracking profile. This ID is in account settings person-and-cog_icon.png > Access > Web behavior profiles. We recommend that you ignore the scripts that are created on this page, and instead use the scripts in this article.
  • Create an abandoned cart program and make a note of its ID. This ID is in the URL of the program page, for example https://r1-app.dotmailer.com/Program/Edit?id=XXXXXX.
  • Clear the default abandoned checkout enrolment in the Shopify Plus connector to avoid any potential enrolment conflicts or duplicate enrolments.

    Shopify_connector_enrol_abandoned_checkouts_to.png

In order to track your customers' carts as soon as they're identified on your store, please follow these steps:

    1. Log in to your Shopify Admin
    2. Go to SALES CHANNELS > Online Store > Themes
    3. Click on Actions > Edit Code > theme.liquid
      shopify_cartinsight_edit_theme_code.png
    4. If you haven't done this before, insert the following script before the </head> tag, and replace the %uniqueID% placeholder with the unique ID for your web behavior tracking profile:
      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');
    5. Before the </body> tag, copy and paste the following script:
      <script>
      // <<< dotmailer 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="#contact_form";
      
      !function(n,t){function e(t,e,i){var r=new Date;r.setTime(r.getTime()+24*i*60*60*1e3);var m="expires="+r.toUTCString();n.cookie=t+"="+e+";"+m+";path=/"}function i(t){for(var e=t+"=",i=n.cookie.split(";"),r=0;r<i.length;r++){for(var m=i[r];" "==m.charAt(0);)m=m.substring(1);if(0==m.indexOf(e))return m.substring(e.length,m.length)}return""}dmPt.enableGuestAbandonedCart&&(t(dmPt.newsletter_form_id).submit(function(){dmPt&&t("input[type=email]").val()&&(dmPt.emailSubmitted=t("input[type=email]").val(),e("dm-subscriber",dmPt.emailSubmitted,{expires:1}))}),dmPt.emailSubmitted=i("dm-subscriber")),dmPt&&(dmPt.cartId=i("cart"),e("dm-cart",dmPt.cartId,{expires:1}))}(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  | money_without_currency  }},
          "discountAmount": {{ cart.original_total_price | minus: cart.total_price | money_without_currency  }},
          "taxAmount": 0,
          "grandTotal": {{ cart.total_price  | money_without_currency  }},
          "cartUrl": "{{ shop.url }}/cart/{% for item in cart.items %}{{item.variant_id}}:{{ item.quantity }}{% if forloop.index < cart.item_count %},{% 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  | money_without_currency  }},
              "salePrice": {{ item.price  | money_without_currency  }},
              "quantity": {{ item.quantity }},
              "totalPrice": {{ item.line_price | money_without_currency  }},
              "imageUrl": "{{ item.image | img_url: 'small' | prepend:'https:'}}",
              "productUrl": "{{ shop.url }}{{ item.url}}",
            } {% if forloop.index != cart.item_count %},{% endif %}
            {% endfor %}
          ]
        });
      }
      </script>
      
    6. Make sure you 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 dotmailer to wait after a customer exits your store before enrolling them on the program
    7. Save theme.liquid
    8. To prevent abandoned cart emails being sent if an order is complete, navigate to Settings > CheckoutOrder 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');
      
      // <<< dotmailer 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>
      
    9. Make sure you replace the %programID% placeholder with the ID of the program you want to enrol your contacts on. Replace the %cartDelay% placeholder with the number of minutes that you want dotmailer to wait after a customer exits your store before enrolling them on the program. And, Replace the %uniqueID% placeholder with the unique ID for your web behavior tracking profile
    10. Save and test

Testing the abandoned cart functionality

We recommend thorough testing of the whole abandoned cart process on your development store before finalising your changes. You can also filter contacts as they enter your abandoned cart program, using exit criteria or decision nodes.

  • Once the scripts above are in place, log in to your store, start adding some items in the cart and log out
  • Wait a few minutes, head to the 'Manage contact' page of the customer in dotmailer, click on the Insight data tab and check that the CartInsight record has been synchronised correctly
  • Wait a few more minutes (depending on the cart delay as set above) and verify that your contact has successfully entered the selected program
Have more questions? Submit a request

Comments