All Collections
Integrations
Google Tag Manager
(Advanced) Google Tag Manager setup for Ecommerce event tracking
(Advanced) Google Tag Manager setup for Ecommerce event tracking

Set up Cometly for a custom ecommerce store tracking using Google Tag Manager (GTM).

Updated over a week ago

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

  1. Navigate to the Google Tag Manager website.

  2. Click "Start for free."

  3. Sign in with your Google account.

  4. 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.

  5. Click "Continue."

Step 2: Set Up a Web Container

  1. Next, you'll need to set up a container. Usually, you'll want to create a container for each separate web domain you have.

  2. Enter the name for your container. This could be the name of your website.

  3. Choose "Web" container.

  4. Click "Create."

Step 3: Add GTM Code to Your Website

  1. 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.

  2. After you've added the code to your website, click "OK."

Step 4: Create Cometly Base Code Tag

  1. In your GTM workspace, click "Add a New Tag."

  2. Name your tag 'Cometly Base Code'

  3. Click on "Tag Configuration" and choose a custom HTML tag.

  4. Set Trigger to 'All Pages'.

    1. Each space (workspace) inside Cometly has a unique script. It's a requirement that the script is installed on each page of your site just above the </head> tag for Cometly to accurately attribute events

      Obtaining Your Script

      Cometly accounts can have multiple spaces (workspaces) and each space has a unique script. Ensure you are installing the correct script on your site if you have multiple spaces.

      Visit the Events Manager page inside your Cometly account to retrieve the script.

Step 5: Create Cometly Fingerprint Data Layer Push Tag

  1. In your GTM workspace, click "Add a New Tag."

  2. Name your tag 'Cometly - Fingerprint DL Push'

  3. 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

  1. In your GTM workspace, click "Add a New Tag."

  2. Name your tag 'Cometly - Add To Cart'

  3. Click on "Tag Configuration" and choose a custom HTML tag.

  4. Enter the Cometly Add To Cart event:

    1. <script>
      comet('add_to_cart');
      </script>
  5. Navigate to 'Advanced Settings' > Tag Sequencing, and select 'Fire a tag before Cometly - Fingerprint DL Push fires'. Choose the Setup tag 'Cometly Base Code'.

  6. 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.

  1. In your GTM workspace, click "Add a New Tag."

  2. Name your tag 'html - cookie fingerprint'

  3. 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

  1. Sign in to your Google Tag Manager account.

  2. Select the account in which you want to create the container.

  3. Click on "Create Container."

  4. Name your container and select "Server" from the target platform options.

  5. Click "Create."

Setup a Server

  1. 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.

  2. Click on "Add new server," then you can either choose Google Cloud (if your project is linked) or another cloud provider.

  3. Select the region closest to your users, then click "Create."

  4. 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:

Did this answer your question?