How to Track Abandoned Checkouts on Teachable

Track Abandoned Checkouts on Teachable

If you have some experience in selling online, you would know how important it is to track cart abandonment. As per Barilliance, the cart abandonment rate in 2016 was 77.24%.

In other words, over 3/4 of shoppers choose to leave the site without completing a purchase. Even though this statistics is not just for online courses but it still shows how significant an issue checkout abandonment is.

In order to reduce the potential loss from checkout abandonment, you must track and retarget the abandoned visitors. Typically that would involve tracking users via Facebook Pixel or other tracking codes and then run retargeting ads.

But Teachable doesn't allow you to place any tracking code on the checkout pages on the platform and so, it's not possible to track checkout page visits directly.

More...

So, how do you track abandoned checkouts on Teachable?

I had to play around with a few tools and test a few ideas before I could find a way to track abandoned checkout visits on Teachable, which you can implement as well without requiring to code or hiring a developer.

You will need to use Google Tag Manager (GTM) to achieve your objective of tracking checkout abandonment.

GTM is a free tool that makes it simple to place pixels and tracking scripts on your site and further allows you to track various user actions on your site.

In this tutorial, I am going to show you step-by-step how to use GTM to track abandoned cart visits on Teachable and then create a custom audience on Facebook for retargeting purpose.

Let's get started.

Step #1: Create & Setup a Google Tag Manager Account

The very first thing that you need to do is to visit the Google Tag Manager site and you can sign up for GTM using your Google/Gmail account.

Create a Google Tag Manager Account

Once you login to the Tag Manager, you will be asked to add a new account. Enter an account name and click on the 'Continue' button.

Add an Account on Tag Manager

Enter the domain name on which Teachable is hosted, select 'Web' and then click on the 'CREATE' button.

Tag Manager Account Details

On the next screen, you will see a message 'Install Google Tag Manager'. You need to copy the code snippet in the box and paste it in the head of your Teachable website. This snippet is a tracking code and will be used to track user actions on your Teachable school.

You don't need to install the second code snippet, the '<noscript>' one as that is used only for tracking in certain cases and it's not important in most cases.

Copy Google Tag Manager Code

Once you have copied the code, go to the admin dashboard on your Teachable school and go to Site -> Code Snippets. Paste the copied code in both 'Logged In' and 'Logged Out' boxes.

Paste GTM Code in Teachable

Now that you have successfully placed the GTM tracking code in the head of your Teachable site, go back to the Tag Manager, close the 'Install Tag Manager' overlay and you will see your 'WORKSPACE'.

This is where all your GTM tags and triggers will appear. You can also create new ones or modify existing ones here.

Let me actually explain how GTM works and what are it's two main parts:

Most of the things that you will do in GTM will revolve around Tags and Triggers and in the next step, I will show you how to setup the right triggers in GTM.

  • check
    Triggers - Tell GTM when to take an action. Some examples of triggers are when someone visits a page or when someone clicks a link etc.
  • check
    Tags - Tell GTM what action to take. Some examples of actions are fire a FB pixel or send page view to Google Analytics etc.

Step #2: Create Triggers in Google Tag Manager

This is the most important as well as interesting step in the entire process. Since Teachable doesn't allow you to place any code on the checkout page, I had to find an alternate way to achieve our objective.

So, rather than tracking checkout page visits, we will track the enroll button clicks on the course sales pages. This works perfectly because everyone who clicks on one of the enroll buttons goes to the checkout page.

There is a very small possibility that someone clicks on the enroll button but actually drops off before the checkout page loads. This is really insignificant and we don't need to worry about it at all.

Before we can create triggers, we need to do some small configuration. Click on 'Variables' in the left panel.

Configure GTM variables

Click on 'CONFIGURE' buttons to configure variables.

Configure GTM Variables

Select the checkboxes next to the options under 'Clicks'. This will enable us to use Click Variables in our triggers.

Select Click Elements

Once you have configured the Click variables, go to your main dashboard and click on the 'Trigger' option in the left panel. On the next screen, you'll see an option to create a new Trigger.

Give your Trigger a Name and then click in the 'Trigger Configuration' area.

Name Your Trigger

A new window will pop up and you can select the trigger event here. You should select 'All Elements' under 'Click' as your trigger. Basically GTM will trigger whenever user clicks on any element on your Teachable school.

Select All Elements

Under trigger configuration, select 'Some Clicks' and define conditions as shown in the image below.

These conditions will make sure that the trigger will be fired only on certain clicks on our website and not every click. Because someone can click on the 'Sign Up' button or on an image or something random but we don't want to track those things in the current case.

Once you have defined the conditions, click on the 'Save' button at the top and your trigger will be successfully created.

Enroll Button Click1

In a similar manner, create two more triggers with following conditions:

Once you're done creating the three triggers, they should appear in your trigger list.

Now let me explain why I have created three triggers and what are these conditions for. The explanation below is a little technical and if you want, you can skip it and move to the next section.

In terms of CSS class, a Teachable Sales Page can have 3 different types of enroll buttons:

  • The first button type is an individual button (Css class: btn-header-enroll) that either takes you to the checkout page or takes you to the pricing section depending on whether you have single or multiple pricing plans. We don't want to include the button type which acts as a scroller and so we have excluded the scroller button's unique CSS class 'payment scroller' while creating the condition.
  • The second type is the enroll button (CSS class: btn-enroll) and it always takes you to the checkout page.
  • The third one is actually the small enroll buttons you will see in a pricing table (CSS class: product-enroll). This button will always take you to the checkout page.

This is the reason why we've created three triggers based on three different conditions in GTM. With this trigger setup, you can be confident that you're only tracking those enroll button clicks that takes a user to the checkout page.

Step #3: Install Facebook Pixel on Your Teachable School via GTM Tags

This step is really straightforward and you just need to be familiar with your Facebook Ads account to install the pixel. 

Note: If you've installed FB pixel directly in the head of your Teachable site, you'll need to remove that as we're going to place the pixel via GTM.

Login to your Facebook Ads account and go to the Pixels tab. Under Pixels tab, select Set Up Pixel.

Then Select 'Use an integration or tag manager'.

Select Tag Manager

Select 'Google Tag Manager'.

Select GTM

Select 'Quick Install'.

Select Quick Install

Select the GTM account you have created in the Step #1 and then select the GTM container(your site).

Select GTM Account

In step 3, just click on the Next button. Now you will see the 'Add or edit tags' window where a tag to fire the Pixel Base Code has already been created. 

Click on 'Add new tag' button to create a new tag.

Enter a unique name for your tag and select 'Add To Cart' as the event. The trigger will be one of the triggers you created in GTM in Step #2.

Create tag

In a similar manner, add two more tags for button click 2 and button click 3. So you should have a tag for Pixel Base Code and 3 tags for Add to Cart event. Click on the Next button and publish all the tags on the next screen.

Publish GTM tags

The tags will be created in GTM and here's what will happen:

  • check
    Whenever someone visits a page on your Teachable school, FB Base Pixel will be fired
  • check
    Whenever someone clicks on the enroll button on your sales page, AddToCart Event Pixel will be fired

Now go back to your GTM account and check the tags option in the left panel. You should see the tags you created using Facebook listed there:

If you wish to verify whether everything is working correctly or not, you can do it in two ways:

  • check
    Install Facebook Pixel Helper Chrome Extension. Go to your Teachable school and click on an enroll button and see if the correct pixel is being fired or not.
  • check
    You can also click on the 'Preview' button in the top panel of your GTM account and enable the 'Preview' mode. After that, just visit your Teachable school in the same window and see if the tag is being fired or not.

You're all set to track the abandoned checkouts on your Teachable school. In the next step, I will show you how to create a custom audience in FB based on that.

Step #4: Create a Custom FB Audience to Retarget Abandoned Checkout Visitors

In order to create a custom audience, you need to login to your Facebook Ads account. Go to the Audiences tab in your ads account and select Custom Audience.

Then select to create audience using 'Website traffic'.

On the next screen, you'll be able to create an audience based on the actions that users have taken on your website.

Let's say we want to create an audience for users who have visited the checkout page of a particular course only so that we can run retargeting ads.

You should start by including everyone who has clicked  on the enroll button (AddToCart Event). However if you have multiple courses, this will track button clicks on all sales pages rather than doing it on a particular course sales page.

FB allows you to further refine your audience and you can enter the URL of your course sales page to consider enroll button clicks only on the specific sales page.

Next you will need to exclude anyone who completed the purchase. You can achieve that by simply excluding everyone who visited the course thank you page.

You should now have an audience who visited the checkout page but didn't complete the purchase. You can target this audience by running Facebook ads.

I am not going to cover how to run Facebook Retargeting Ads in this tutorial. You can check this guide for some ideas on running retargeting ads.

Wrapping Up...

This tutorial was focused on creating a custom audience on Facebook but the steps described in this tutorial can be used in different ways. 

You can use it to run retargeting ads using Adwords or you can simply pass the information to Google Analytics.

If you use a CRM solution like Infusionsoft that allows you to track site visitors using their code snippets, you can retarget the abandoned visitors via email as well. However, that will require a lot of custom coding and thus extra work.

Now it's your turn to implement what you learnt in this tutorial. Follow the exact steps and you'll be fine.

And if you have any questions or have some ideas, feel free to share them in the comments below.

Filed Under: Market Your Course