How to Setup Cart Abandonment using GTM

Cart Abandonment notifications implementation has a dependency on your developers for integration, you might be a developer but not willing to make the code changes so Google Tag manager comes into play. It is a very friendly tool for marketers and developers who are not willing to make changes to the code only to integrate a marketing tool. You can install PushEngage using GTM.

Cart Abandonment is implemented in three parts

  1. Creating Campaign
  2. Placing the dataLayer on the website along with the event on button click.
  3. Configuring GTM and creating dataLayer

Create the campaign in PushEngage dashboard

For creating the campaign you need to login to your PushEngage dashboard. After that navigate to Automation > Cart Abandonment > Create

You need to make the changes in the pre-filled template of the campaign according to your website or product.

create cart abandonment campaign

Once you finish creating the campaign you need to click on Create Cart Autoresponder. You need to have the client-side code but we will come back to it after configuring the GTM.

Place the data layer in your website along with the event on Add to Cart

What is the data layer?

Google says, “To ensure maximum flexibility, portability, and ease of implementation, Google Tag Manager functions best when deployed alongside a data layer. A data layer is an object that contains all of the information that you want to pass to Google Tag Manager. Information such as events or variables can be passed to Google Tag Manager via the data layer, and triggers can be set up in Google Tag Manager based on the values of variables”

First, you need to create a data layer if you are not a developer you can ask your developer to do it for you. A data layer object has nothing but variables in an array to fetch information dynamically,  you can also use your product feed to fetch this data.

To read more about the data layer you can refer to Google’s documentation.

An example of a data layer with a product array is shown below. (While placing the data layer please make sure you do not change the format as it is case sensitive.)

abandon cart using gtm datalayer

Next, you need to place the code that will push the event for the data layer and trigger only on custom button click. This button will be your “Add to Cart” or “Buy Now”.

abandon cart using gtm push event add cart
  • Give specific classes and id for your button where the code is to be fired

Configure GTM to complete the implementation

There are multiple things you need to configure in GTM to implement cart Abandonment.

Create Variables

First Navigate to Variables in your GTM Dashboard and click on Configure, scroll down to clicks, and check all the attributes of click. These variables are important as it is used to call the event on add to cart button / Buy button.


The second part is to create User-Defined Variables to use them in the data layer. It will be variables regarding all the items you have placed on your website’s data layer.


Configure Data layer variable in the following manner -Here accessing the item id through product has a syntax which should be followed, if the incorrect syntax is used while configuring these variables, It will create an error and dynamic values may not be fetched.

  • If product array is placed on the website is

window.dataLayer = window.dataLayer || []; window.dataLayer.push({ ‘products’ : {  “id”: “346P”,  “price”: “$550”,  “productname”: “Samsung On5 Pro”, }    });

  • Then the Data layer variable name will be:, product.price , product.productname.

  • If the code you placed in the data layer is

window.dataLayer = window.dataLayer || [];  window.dataLayer.push({  ‘productid’ : ‘345P’,  ‘productprice’ : ‘$550’,  ‘productname’ : ‘Samsung On5 Pro’  });

  • Then Data layer variable name will be:

productid, productprice, productname                                                                      


Create Trigger

Navigate to Trigger in the GTM dashboard then create a trigger. Select custom event > Add the event name. It will be the same you added in the button on-click attribute on your website. Next, configure Trigger fires on option, choose some custom events. Then set a condition in below example it is added it on – Click the text


Obtain event names and variable name through GTM console

When you are not sure of the event name or click classes text or Id, you can click on preview mode in the GTM dashboard and then refresh the page where your GTM is implemented and data layer code is added. You’ll see a console when you click on the “Buy now” button or any button where you have added the code, you’ll see all variables and events associated with it.                                                                                                             

Configure Tag with dataLayer variables and triggers.

Go to your PushEngage dashboard Automation > Cart Abandonment > Analytics > Click on the campaign you created > Edit > Click on Your code ButtonCopy either legacy or the async version of the code. Then in your GTM Dashboard create the tag with abandon cart code and add the dataLayer variables to it, you can see in the below example.

Your setup is completed, first, you can check the implementation in preview mode on click of the add to cart button tag will fire. You can then go ahead and publish your tag.

This way you can successfully complete the Abandoned Cart installation using GTM. You can also create segments dynamically through GTM.

If your website is based on Shopify, you can use the push notification app. In that case, cart abandonment campaigns can be activated in a single click. It has the pre-filled templates. Just activate to re-engage the cart abandonment users.

Cart Abandonment is important for every e-commerce company. Create a plan to reduce cart abandonment for your websites.  This way you can segment users based on different attributes. Cart abandonment is a trigger push notification campaign. You can also set up browse abandonment push notification using PushEngage.

Free trial for push notification

Reply Cancel Reply

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

4 comments on “How to Setup Cart Abandonment using GTM

  1. this post is missing a screenshot of the tag itself. Towards the end you reference “Then in your GTM Dashboard create the tag with abandon cart code and add the dataLayer variables to it, you can see in the below example.” without an example available.

    Please update with an example tag setup image.

  2. also I’m assuming there’s a point where we’ll need to add the pushEngage script to the custom tag? That part could be more clear on this post.


Engage and Retain Visitors AfterThey’ve Left Your Website

Increase the value of every web visit with Push Notifications that are hard to miss.

  • Forever Free Plan
  • Easy Setup
  • 5 Star Support