Increase AOV with GTM

Increase Average Order Value (AOV) With Google Tag Manager’s Targeting

# Increase Average Order Value (AOV) With Google Tag Manager’s Targeting

increase average order value floating bar popup 1

Hi there, and welcome to our guide on driving up average order value (AOV)! Thanks for stopping by. Did you know that adding cart reminder popup can increase AOV by as much as ~50%? That’s because it allows you to immediately offer upsells and cross-sells to your visitors. We will create a popup which will show on /cart,reminding visitors to add a certain amount of product to get free shipping.

Let’s start!

Step 1: Create your Popupsmart account.

increase average order value floating bar popup 2

Step 2: You will be directed to your dashboard when you log in. Select a business goal right after you click the “Create a Popup” button on the upper right corner.

increase average order value floating bar popup 3

Step 3: You will create your popup on this 3rd stage. Customize your popup based on your needs. You can always use our showcase to clone a campaign template if you are indecisive.

increase average order value floating bar popup 4

Step 4: We will set a metadata code in GTM for our popup. Before, add smart tags to show these dynamic data. (cart amount and remaining amount for free shipping) Add for the cart amount, for the remaining amount. (TL is for the Turkish Lira, you can add a dollar sign or any other sign according to your currency.)

increase average order value floating bar popup 1

Step 5: We will open our Google Tag Manager. This step may be a little bit hard for you, but don’t worry. You can definitely do this on your own.

Open your Tag Manager and connect your website with Tag manager first. We have a shopify ecommerce site, and we connected GTM with Shopify.

Step 6: Let’s start. We will create these items one by one.

increase average order value floating bar popup 5

Start with Variables. We want to track cart value to show the customers a popup with the cart value. And we will tell them to add a certain amount of product to get free shipping.

Create a variable and call it “cartvalue_gtm”. We will select it as a DOM element, and set the method as CSS Selector since we are going to select a CSS copy in a minute.

increase average order value floating bar popup 6

At this step, go back to your shopify website.

Step 7: Go to your cart page, select the cart amount, right click it and select inspect. After you select inspect, go to cart amount value which will be highlighted, right click again and select “copy”, select “copy selector” & copy it.

increase average order value floating bar popup 7

increase average order value floating bar popup 8

Step 8: Go back to step 5 and paste the code into the CSS Selector tab.

increase average order value floating bar popup 9

Step 9: That is it for the Variable! Go back and select “Tag” this time. Select “Custom HTML” and copy & paste the code below.

<script>
  var cartvalue_gtm = {{cartvalue_gtm}};
  var remaining = 150 - cartvalue_gtm.replace('TL','').trim();
    psMetaData.add({
    cartValue: cartvalue_gtm,
    remaining: remaining,
  });
</script>
1
2
3
4
5
6
7
8

We have two variables; one is for the cart value, and the other is for the remaining amount to reach 150 dollars to get free shipping. We want to track both of them and show them in our popup.

increase average order value floating bar popup 10

Step 10: Last item we will create is a “Trigger”. Set a trigger for window loaded.

increase average order value floating bar popup 11

You can preview it with GTM if you want.

increase average order value floating bar popup 12

increase average order value floating bar popup 1

You are done!

Enjoy your popup 😃