Clerk.io GTM tag template

The Clerk.io template covers personalised search, recommendations and audience tracking in GTM, with five action types: Initialize, Track Product View, Track Cart, Track Purchase/Sale and Track Search.

It loads clerk.js from Clerk's CDN and passes your data through from there.

• Five action types in one template
• Initialize loads clerk.js from https://cdn.clerk.io/clerk.js and sets your API key
• Configurable language locale and email collection (collect_email)
• Product view tracking sends product IDs for behavioural profiling
• Cart tracking syncs the full cart state as an array of product IDs
• Purchase tracking logs order ID, product IDs and optionally the customer email for post-purchase recommendations
• Search tracking captures queries for Clerk's search analytics

• In your GTM workspace, go to Templates, then Tag Templates, then Search Gallery.
• Search for Clerk.io and add the template.
• Create one Initialize tag for all pages, plus a tag per tracking action you need.

Step 1. Initialize. Set Action Type to Initialize and enter your API Key. Optionally set Language for a multi-language store and enable Collect Email. This tag has to fire on every page so clerk.js loads.

Step 2. Product views. Action Type Track Product View, with Product IDs mapped to a Data Layer Variable that resolves to the current product ID on detail pages.

Step 3. Cart state. Action Type Track Cart, with Product IDs mapped to a variable returning the array of products currently in the cart. Fire it on cart updates: add, remove and cart page views.

Step 4. Purchases. Action Type Track Purchase/Sale, mapping Order ID and Product IDs to your confirmation page variables. Add the customer email if you want post-purchase email recommendations.

Step 5. Searches. Action Type Track Search, with Search Query mapped to the visitor's search term. Fire it when a search happens, usually on the results page or a custom search event.

Sequencing. Set the Initialize tag as a setup tag for all the others, so clerk.js is loaded before anything tries to use it.

// product detail page
dataLayer.push({
  event: 'view_item',
  clerk_product_ids: ['PROD-12345']
});

// on cart change
dataLayer.push({
  event: 'cart_update',
  clerk_cart_product_ids: ['PROD-12345', 'PROD-67890']
});

// order confirmation
dataLayer.push({
  event: 'purchase',
  clerk_order_id: 'ORD-2024-001',
  clerk_product_ids: ['PROD-12345', 'PROD-67890'],
  clerk_email: 'customer@example.com'
});

// on search
dataLayer.push({
  event: 'search',
  clerk_search_query: 'blue running shoes'
});

clerk.js not loading. Check the Initialize tag fires and look in the Network tab for https://cdn.clerk.io/clerk.js. A blocked request points at an ad blocker or your content security policy.

API key error in the console. Confirm the key matches the public API key in your Clerk.io dashboard under Settings, API Keys. Do not use the private key.

Product views not registering. Check in Preview that the Product IDs variable resolves on product pages, and that the values match the product IDs in your Clerk.io feed.

Cart out of sync. Track Cart sends the entire cart state, not incremental changes. The variable has to return the complete array at the moment the tag fires.

Purchases missing. The Order ID has to be unique per transaction, since Clerk.io deduplicates on it. Also check the Product IDs array isn't empty.

Searches not tracked. The Search Query variable has to return the actual string, not undefined or empty. Fire the trigger after the search is submitted, not on every page load.

• Clerk.io documentation: https://docs.clerk.io/docs/clerkjs-quick-start
• Clerk.io dashboard: https://my.clerk.io/
• GTM Community Template Gallery: search Clerk.io
• GTM Help Center: https://support.google.com/tagmanager/