Start Here 👋
This article will show you step-by-step how to setup tracking for the Add To Cart and Initiate Checkout events in your Shopify store.
Important: If you already have the Cometly base code pixel installed on your Shopify store in the theme.liquid, you will need to remove the base code as you will be installing it on Google Tag Manager in the steps below.
How to setup a new Google Tag Manager web container
Google Tag Manager is a tag management system (TMS) that allows you to quickly and easily update measurement codes and related code fragments collectively known as tags on your website.
How to install Google Tag Manager in your Shopify store
Please watch the video below for how to successfully install Google Tag Manager codes into your Shopify store in the theme.liquid.
Important: You cannot have the Cometly base code on your store twice or it will impact tracking. When the base code is added in GTM, it's adding the code to your site. You need to remove the Cometly base code from the theme.liquid if previously installed there.
Setup Cometly base code tag inside Google Tag Manager
Please watch the video below that will show you how to setup the Cometly base code pixel as a tag in your web container.
In this step you are going to create two tags separating the Cometly base code into two tags. The goal is to have the second tag firing AFTER the first tag fires.
Here is an example Cometly base code below:
(do not use the code below, this is for example purposes)
<script src="https://t.cometlytrack.com/e?uid=EXAMPLE"></script>
<script>
comet('init');
</script>
Your two tags will look like this:
Tag 1 - Cometly Base Code
(do not use the code below, this is for example purposes)
<script src="https://t.cometlytrack.com/e?uid=EXAMPLE"></script>
Tag 2 - Cometly Base Code
<script>
comet('init');
</script>
For Tag 2, navigate to 'Advanced Settings' > Tag Sequencing, and select 'Fire a tag before Tag 2: Cometly Base Code fires'. Choose the Setup tag 'Tag 1: Cometly Base Code'.
Step By Step Instructions:
Tag 1 Setup
In your GTM workspace, click Add a New Tag.
Name your tag 'Tag 1 - Cometly Base Code'
Click on Tag Configuration and choose a custom HTML tag.
Paste the first part of your Cometly base code:
(do not use the code below, this is for example purposes, use the workspace pixel)
<script src="https://t.cometlytrack.com/e?uid=EXAMPLE"></script>
Set Trigger to 'All Pages'.
Tag 2 Setup
In your GTM workspace, click Add a New Tag.
Name your tag 'Tag 2 - Cometly Base Code'
Click on Tag Configuration and choose a custom HTML tag.
Paste the second part of your Cometly base code:
(do not use the code below, this is for example purposes, use the workspace pixel)
<script>
comet('init');
</script>
For Tag 2, navigate to 'Advanced Settings' > Tag Sequencing, and select 'Fire a tag before Tag 2: Cometly Base Code fires'. Choose the Setup tag 'Tag 1: Cometly Base Code'.
Set Trigger to 'All Pages'.
Setup Add To Cart & Initiate Checkout Events
Setup tracking for the Add To Cart and Initiate Checkout events for your Shopify store.
Video Instruction Steps:
Add tag: Cometly base code
Configure Built-In Variables
Create All Clicks trigger
Test & preview in GTM to see the available Click Text & Click Classes for each Click
Add tag: Cometly - Add To Cart
Add tag: Cometly - Initiate Checkout
Add tag: Cometly - View Content
Events
Add To Cart
<script>
comet('add_to_cart');
</script>
Initiate Checkout
<script>
comet('initiate_checkout');
</script>
View Content
<script>
comet('view_content');
</script>
Pre-Purchase Upsell Apps: How to setup the Add To Cart trigger