This is an advanced setup - you must be an expert with Google Tag Manager or involve a developer from your team to follow these instructions.
You must be using GA4 to use the following GTM set up to configure Cometly Ecommerce tracking.
Step 1: Create a Google Tag Manager Account
Navigate to the Google Tag Manager website.
Click "Start for free."
Sign in with your Google account.
After signing in, you'll be directed to the GTM Account Setup page. Here, you'll need to provide an account name (usually your business name) and select your country.
Click "Continue."
Step 2: Set Up a Web Container
Next, you'll need to set up a container. Usually, you'll want to create a container for each separate web domain you have.
Enter the name for your container. This could be the name of your website.
Choose "Web" container.
Click "Create."
Step 3: Add GTM Code to Your Website
You will see a pop-up window with two blocks of code. The first block should be added as close as possible to the opening
<head>tag. The second block should be added immediately after the opening<body>tag. This code should be added to every page of your website.After you've added the code to your website, click "OK."
Step 4: Create Cometly Base Code Tag
Important: Ensure that you do not have the Cometly base code pixel hard coded on your site and in GTM. This will cause the pixel to be added on your website twice and will cause tracking issues. If you are setting up with Google Tag Manager, ensure it's only in Google Tag Manager and not hard coded on the site.
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'.
Step 5: Create Cometly Fingerprint Data Layer Push Tag
In your GTM workspace, click "Add a New Tag."
Name your tag 'Cometly - Fingerprint DL Push'
Click on "Tag Configuration" and choose a custom HTML tag.
Copy and paste the following code into the HTML tag:
<script>
cometFingerprint().then(function(fp) {
window.dataLayer.push({
"event": 'cometFingerprint',
"fingerprint": fp
});
})
</script>
Navigate to 'Advanced Settings' > Tag Sequencing, and select 'Fire a tag before Cometly - Fingerprint DL Push fires'. Choose the Setup tag 'Cometly Base Code'
Note: For any additional Cometly events, the Cometly Base Code must fire before those events fire.
Set the Triggering to 'All Pages'.
Step 6: Add Two Separate Tags for Add To Cart and Initiate Checkout
In your GTM workspace, click "Add a New Tag."
Name your tag 'Cometly - Add To Cart'
Click on "Tag Configuration" and choose a custom HTML tag.
Enter the Cometly Add To Cart event:
<script>
comet('add_to_cart');
</script>
Navigate to 'Advanced Settings' > Tag Sequencing, and select 'Fire a tag before Cometly - Fingerprint DL Push fires'. Choose the Setup tag 'Cometly Base Code'.
Choose the appropriate trigger to fire depending on your set up. The easiest solution is to create a Page View trigger that fires on a Page URL that contains cart:
Create a new tag for Initiate Checkout and follow the same steps as above for Add To Cart, however, you use the following script for Initiate Checkout:
<script>
comet('initiate_checkout');
</script>
Step 7: Storing The Cometly Fingerprint
In order to send the fingerprint with the purchase from your server-side container that you will set up later in the instructions, you need to create a first party cookie to store the fingerprint.
In your GTM workspace, click "Add a New Tag."
Name your tag 'html - cookie fingerprint'
Click on "Tag Configuration" and choose a custom HTML tag.
Use the following code below:
<script>
(function(){
var cookieName = "cometFingerprint"; // Name of the cookie
var cookieValue = "{{dlv - fingerprint (Cometly)}}"; // Value of the cookie
var expirationTime = 1800; // One month in seconds
expirationTime = expirationTime * 1000; // Converts expirationtime to milliseconds
var date = new Date();
var dateTimeNow = date.getTime();
date.setTime(dateTimeNow + expirationTime); // Sets expiration time (Time now + one month)
var date = date.toUTCString(); // Converts milliseconds to UTC time string
document.cookie = cookieName+"="+cookieValue+"; SameSite=None; Secure; expires="+date+"; path=/; domain=." + location.hostname.replace(/^www\./i, ""); // Sets cookie for all subdomains
})();
</script>
Create a custom event trigger named 'Cometly - Fingerprint', and use Event name cometFingerprint
Navigate to 'Variables' and create a new data layer variable named dlv - fingerprint (Cometly) and set the Data Layer Variable Name to fingerprint
You must name the variable dlv - fingerprint (Cometly) as that data layer variable is referenced in the fingerprint first party html cookie code. If you want to use another name, you must change the code inside the html cookie code.
Navigate to 'Variables' and create a new 1st Party Cookie called 1st party - cometFingerprint and set the Cookie Name as cometFingerprint
Step 8: Create Other Variables
To send customer information & purchase information to Cometly, you must set up other variables. The MINIMUM REQUIREMENT PAYLOAD FOR PURCHASE EVENTS that you will set up in the following steps on the server-side container:
{
"event_name" : "purchase",
"email" : "developers@cometly.com",
"fingerprint" : "abcdef1234567890",
"ip" : "123.123.123.123",
"first_name" : "John",
"last_name" : "Smith",
"amount" : 55.44,
"event_time" : 1677093110
}
Create data layer variables for the following:
First Name
Last Name
Email
Amount
IP Address
Event Time (of purchase)
Step 9: Configure GA4 Tag and GA4 Events Tag
Create a tag or update existing Google Analytics: GA4 Configuration
Ensure you have both options checked (Send a page view event when this configuration loads and Send to a server container)
Paste the Server Container URL so you are sending events from GA4 to your Server Container. (You will create your server container on Step 9)
Create a tag or update existing Google Analytics: GA4 Event
This is different for all types of Ecommerce set ups. Make sure that you include the variables that you want to send with your purchase event that you will set up using the HTTP request in the server container.
Step 10: Create Server Container
You will use the server-side container to send HTTP request directly to the Cometly API. You can learn more about our API documentation here.
Create a new Server-side Container
Sign in to your Google Tag Manager account.
Select the account in which you want to create the container.
Click on "Create Container."
Name your container and select "Server" from the target platform options.
Click "Create."
Setup a Server
Once the container is created, GTM will ask you to set up a server. This server is where GTM will send the data it collects.
Click on "Add new server," then you can either choose Google Cloud (if your project is linked) or another cloud provider.
Select the region closest to your users, then click "Create."
Google Tag Manager will then create the server and provide you with a unique URL that will be used as an endpoint for the client to send data.
Step 11: Set Up HTTP Request For Purchases In Server Container
In the server container, create a new tag and select 'HTTP Request'.
For the Destination URL, use: https://app.cometly.com/public-api/v1/events
Select 'Post' as the HTTP Method.
In the Request Headers area, enter the following keys and values:
*Retrieve your API key from your Cometly account in the Space Settings page.
Key: Authorization
Value: Bearer {{YOUR API KEY}}
Key: Accept
Value: application/json
Key: Content-Type
Accept: application/json
For the Request Body, please refer to our API Documentation for the Minimum Requirement Payload For Purchase Events.
{
"event_name" : "purchase",
"email" : "developers@cometly.com",
"fingerprint" : "abcdef1234567890",
"ip" : "123.123.123.123",
"first_name" : "John",
"last_name" : "Smith",
"amount" : 55.44,
"event_time" : 1677093110
}
You need to set up variables in the server container to dynamically include the variables inside the Request Body. You can either use a query parameter for every variable to retrieve from the web container or use event data. This depends on your GTM set up.
For the Trigger for the HTTP Request, you can set up any purchase trigger to fire the Post HTTP request. Here's an example of how many users will set this up:
