Are you currently running ads on Facebook to drive revenue for your Shopify store and giving people a discount?
Are you doing it like this?
“Go get it, with promo code 20EXTRA at checkout.”
WTF, Nike?
They’re making their customers ENTER A CODE MANUALLY AT CHECKOUT.
WHY? WHY? WHY?
Nobody likes to TYPE IN discount codes – and if you make people do it, you’re missing out on orders – period.
We want to make it as easy as possible and reduce friction to improve your conversion rates.
Tip: A great framework for those wanting to learn more about the behavioural principles behind this (reducing friction = improve ability + boosting motivation), I recommend BJ Fogg’s model.
In this article, you’ll learn the following – which in combination had a significant impact on my clients’ conversion rates:
- How to auto-apply discounts & coupons in Shopify using a link
- How to send people to the right page in your store
- Why leveraging Facebook’s tracking parameters is better than using the “Website URL” field
- Ways to show your audience that a discount has been applied on your site
- A ready-to-use popup with no other tools required you can use right off the bat
Without further ado, let’s get started…
Auto-Applying Discounts from your ads
This is quite straightforward. However, Shopify doesn’t explain much about it… so if you ended up getting lost like me, you found help 🤠
- After creating your discount code under Admin > Discounts, click on the discount code itself, find the button “Promote” at the top and click it.
You’ll find a link to “Get a shareable link” – click it.
So you can see how this system works – in order to apply a discount code, you just need to append it to this URL:
https://yourstoreurl.com/discount/[DISCOUNT_CODE]
Let me show you another useful feature: You may want to send people to a certain page and not your homepage. You can do this by adding a parameter to the URL:
https://yourstoreurl.com/discount/[DISCOUNT_CODE]?redirect=/products/awesome_product
which will send your visitors to https://yourstoreurl.com/products/awesome_product and apply the discount code.
How do I do this with Facebook?
You could just take it easy and use this as your landing page URL – but trust me, I have a better solution.
Instead of doing that, we’ll use Facebooks ‘tracking’ functionality.
Why? The website URL is part of your Facebook Post.
Why Facebook Post? Isn’t this for ads?
All ads are technically posts, too (some people refer to them as “dark posts”). And all social activity – likes, comments, shares – are saved for each specific post.
Which means if you’re making any change to the post, for example changing the URL, you’re creating a new post. And social activity starts at 0!
In most cases, you don’t want that, because you want to benefit from any social proof (likes, comments, shares) that the ad (post) has already received. Trust me, this affects your click-through rates A LOT. 😎
So keep your website URL as generic as possible – let’s not add the redirect here, neither do we add other URL parameters (e.g. UTM).
We’ll do it like this:
What’s next?
For our additional parameters, we’re using Facebooks “URL parameters” feature.
This is something you can change between ads – BUT the post itself can remain the same, meaning that you can channel all ad spend to one post to channel engagement or re-use old posts in ads and benefit from previous social engagement for social proof. 🤩
Technically this creates different URLs, but Facebook does not seem to bother. Doesn’t it feel good to outsmart Facebook? 🤗
Another benefit – for carousels with multiple URLs, you don’t need to add your UTM tags to each URL separately. Easier to manage!
So back to the URL parameters, what do we set here? Have a look at my example…
You can see that I’ve added the standard UTM tracking codes AND our redirect parameter at the end. And that’s it! We’re good to go here.
I’d recommend testing this by using the preview function and “share a link” to show the ad in your own newsfeed. From there, click the CTA and see if a) you get to the right page and b) if Shopify has applied the discount at checkout.
That’s a good first step, but still isn’t great – because your customers have no idea they’re getting a discount at this point, right?
Showing to your Audience that a Discount Has Been Applied
This is such a crucial part of doing discounting – because what do you think customers will do if they come to your page and DON’T SEE ANY INDICATION ON YOUR SITE they’re getting a discount?
They get confused. Their motivation is depleting. They need to think.
And bamm, they drop off!
Even if you’re communicating in your ads that your discount will be “applied at checkout” or similar – it’s just not as good as *actually* telling them on your website.
I’m not suggesting your customers are idiots, but still: make it idiot-proof. Keep it as simple and obvious as possible.
So how can we do that?
There are millions of ways to do this. You could…
- show a popup
- display a message at the top of the screen
- add a message somewhere else on the page
- show discounted *NEW* price of your products (I strongly recommend this!)
- a floating unicorn
- and so on!
Unfortunately, I can’t cover all of them in this article. 😅
I will show you one specific example (a popup) which you can literally copy and paste to your site, and it works. So bear with me 😎
All of these methods have one thing common: everything starts with the same TRIGGER:
The trigger: Someone visiting your website using a link which applies a discount
We need to configure a trigger that understands that we’ve got a customer coming from Facebook (for this example), who’s got a certain Discount Code.
In order to do this, we’ll simply leverage our UTM Parameters.
Step 1: Save UTM Parameters as Google Tag Manager Variables
In order to save them as a variable in GTM, we’ll first have to save our UTM parameters in your visitors localStorage.
Local Storage: A bit like cookies 🍪, but more delicious and easier to digest. More about it here.
This needs a helper function – simply create a Custom HTML Tag, give it a descriptive name and paste the code below.
Here’s the magic code… 🧙♂️
<script type="text/javascript">
/// get the url and the key to find
var url = window.location.href;
var keyToFind = 'utm_source';
var keyToFind2 = 'utm_campaign';
var keyToFind3 = 'utm_content';
/// is there a utm source ?
if(url.indexOf(keyToFind + '=') > -1)
{
var valueFound = url.substr(url.indexOf(keyToFind + '=') + keyToFind.length + 1).split('&')[0];
localStorage.setItem(keyToFind, valueFound);
}
if(url.indexOf(keyToFind2 + '=') > -1)
{
var valueFound = url.substr(url.indexOf(keyToFind2 + '=') + keyToFind2.length + 1).split('&')[0];
localStorage.setItem(keyToFind2, valueFound);
}
if(url.indexOf(keyToFind3 + '=') > -1)
{
var valueFound = url.substr(url.indexOf(keyToFind3 + '=') + keyToFind3.length + 1).split('&')[0];
localStorage.setItem(keyToFind3, valueFound);
}
</script>By the way, you can easily add other variables here (like UTM_medium). Just add them to the variables in the above code, and create another if function to look for a keyToFind4 and so on.
Use PageView as the trigger and save it. And we’re good to go! 🙌
Next up, we need to save our UTM parameters as variables.
Simply go to variables in Google Tag Manager, add a new variable with Custom Javascript, and create a variable for each of your UTM parameters like so…
Here’s the small bit of code we need:
function()
{
return localStorage.getItem('utm_campaign');
}In order to amend this for your other UTM parameters, just change the variable. E.g. for UTM_source, use:
function()
{
return localStorage.getItem('utm_source');
}You should end up with at least these 3 UTM parameters as separate variables:
Nice job so far – these variables are going to be our triggers.
NOTE: These variables will remain in your visitor’s browser until they clear the storage manually (delete their cookies). If you don’t want this, you could use the SessionStorage instead. Just replace it in our Helper function and the Custom Javascript to retrieve our Variables.
Let’s move on!
Step 2: Use your new triggers to show your visitors that a discount has been applied
As a said, there are a lot of ways to do this.
You could use a popup tool like Sumo or JustUno, for example.
Or you could have a bar at the top as part of your template which you hide it at default – only showing it when a discount is applied.
In this quick tutorial, I’m going to only use Google Tag Manager to create a simple popup. Thanks to Marthijn Hoiting for his awesome little popup (check it out!) which I’ve only slightly modified here.
We’re creating a popup, which will look like this:
How to do it?
Simply create a new HTML tag in Google Tag Manager 🤠
Just copy and paste the following:
<style>
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0);
background: url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAATSURBVBhXY2RgYNgHxGAAYuwDAA78AjwwRoQYAAAAAElFTkSuQmCC) repeat scroll transparent\9;
z-index: 9999;
color: #fff;
transition: opacity 0ms;
}
.popup {
margin: 0px;
padding: 20px;
text-align: center;
height: 150px;
background: #AFEEEE;
border-radius: 5px;
width: 400px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #000;
}
.popup h2 {
margin-top: 5px;
color: #333;
}
.popup .closeFB {
position: absolute;
top: 0px;
right: 15px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('body').prepend('<div class="overlay"><div class="popup"><h2>Congrats, you get 20% off.</h2><a class="closeFB" href="#">×</a><div class="content"><p>Your discount will be auto-applied at checkout 🤩</p></div></div></div>');
$('.closeFB').click(function() {
$('.overlay, .popup').fadeOut(500);
});
});
</script>And that’s it! 🤡
NOTE: You probably only want to show the popup once to your visitor. Follow Marthijn’s tutorial to disable showing the popup if the user has closed it before. Check the section “Check if the user has closed the Facebook popup” – you can use the exact same code for my variation.
Next up, we need to set a trigger! Let’s set up our example:
I’m assuming we’re using “fb” (facebook) for utm_source, “retargeting” as our utm_campaign and “20off” as our utm_content, like so:
https://yourstoreurl.com/discount/[DISCOUNT_CODE]?redirect=/products/awesome_product&utm_source=fb&utm_medium=ad&utm_campaign=retargeting&utm_content=20off
Note: You’re probably using utm_medium as well, but I’m going to ignore this here as it’s not necessary.
Next, create a new triggerand configure the page view event as follows:
Save it – and voila! It’s done.
Works for me! 🤓
Now you can run Facebook ads to your Shopify store, apply the discount and let your customers know about it. 🤩
No more manually typing in codes, no more guessing. Your (prospective) customers will love this. Now go and get these conversions up 🚀