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.

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.

abandon cart campaign using gtm

Once you finish creating the campaign you need to click on save and launch. 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 event on Add to Cart 

What is 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 data layer you can refer to Google’s documentation.

An example of data layer  – with products 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 event for 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.

  1. 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.                                                                                             abandon cart using gtm datalayer variablesThe 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 in your website’s data layer.                                                                   abandon cart using gtm user defined variablesConfigure 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 in website is –

    window.dataLayer = window.dataLayer || [];

     window.dataLayer.push({

     ‘products’ : {

      “id”: “346P”,

      “price”: “$550”,

      “productname”: “Samsung On5 Pro”,

     }

     });

    Then Data layer variable name will be

    product.id, 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                                                                                                                  abandon cart using gtm datalayer variable configure

  2. Create Trigger
    Navigate to Trigger in GTM dashboard then create a trigger.Select custom event > Add the event nameIt will be the same you added in 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 textabandon cart using gtm create trigger
  3. 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 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 “Buy now” button or any button where you have added the code, you’ll see all variables and event associated with it.                                                                                                             abandon cart using gtm tag preview
  4. 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 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.abandon cart using gtm configure tag

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.

Free trial for push notification