GTM Integration

Clickstream events, such as page views, button clicks, add-to-cart actions, and checkout steps, can be easily tracked and sent to the Algonomy rCDP using Google Tag Manager (GTM), without requiring repeated changes to your website’s code..

Once the Algonomy rCDP SDK is deployed through a Custom HTML tag in GTM, you can track important clickstream events by creating additional tags and triggers in GTM.

Understanding Google Tag Manager

Google Tag Manager is a tag management tool that allows you to add and manage tracking scripts on your website without repeatedly modifying the site’s code, it's an easy and flexible deployment of the rCDP SDK on your website. It acts as an intermediary layer between your website and third-party tools like Algonomy rCDP or analytics platforms.

To learn more about GTM, see About Google Tag-Manager (external Google link).

What Are Tags

Tags are small pieces of tracking code. In GTM, you create tags that contain Algonomy event code to capture user events.

Where GTM is Used?

GTM is widely used on websites, especially native or custom-built eCommerce platforms, where multiple tracking and marketing tools need to be integrated. Instead of embedding different scripts across the codebase, GTM centralizes all tracking in one place.

How GTM Works

Initially, developers add the GTM container snippet to the website. After this one-time setup, tags such as the rCDP SDK can be configured within GTM using features like Custom HTML tags. Tracking events—such as page views, clicks, or add-to-cart actions—are set up using triggers. Once configured, all changes can be tested and published directly from GTM without further code modifications.

Direct Integration Vs GTM Integration

Area Direct Integration GTM Integration
SDK Installation Code change GTM tag
Event Tracking JS in code GTM triggers
Deployment Dev release Instant publish
Ownership Engineering Marketing / Product

Key Benefits of Tracking Clickstream Events through GTM

Deploying the rCDP SDK through GTM (instead of hard-coding it directly into your website) provides greater flexibility, control, and speed. The following are the key benefits of tracking clickstream events through GTM:

  • Reduces dependency on developers — Routine tracking updates no longer require engineering team involvement.

  • Empowers marketing and product teams — Allows them to add, modify, or pause events independently without code changes.

  • Accelerates implementation — Updates can be tested and published instantly from the GTM interface, bypassing lengthy development cycles.

  • Improves maintainability — All tags, triggers, and events are organized and managed in a single centralized interface.

  • Minimizes risk to core site functionality — All changes are made outside the main application code, reducing the chance of breaking the website.

  • Provides full control over rCDP events — You can precisely control when and how clickstream events are sent to the Algonomy rCDP.

  • Enables safe testing — GTM’s built-in Preview and Debug Mode allows thorough testing before publishing.

GTM Setup and rCDP SDK Integration

To start tracking clickstream events with Algonomy rCDP, you need to set up Google Tag Manager (GTM) and configure the rCDP SDK in GTM. The process involves two main steps:

  1. GTM Container Setup (One-time Developer Task)

  1. rCDP SDK Deployment through GTM

After completing these steps, the rCDP SDK will be active on your website, and you can begin configuring clickstream event tracking using GTM tags and triggers.

Setting up GTM Container

Google Tag Manager (GTM) container setup on a website is a simple, one-time installation done by developers. Once the GTM container code (snippet) is added to the website, all further tracking tags, triggers, and updates can be managed directly from the GTM interface without touching the website code again.

  1. Developers create a GTM account and container in the GTM interface.

  2. They copy the GTM container snippet (two small code blocks: one <script> for the <head> section and one <noscript> for the <body> section).

  3. This snippet is added to every page of the website (usually in the site template or layout file).

    Once installed, no further code changes are needed on the website. All tracking tags (e.g., rCDP SDK via Custom HTML), triggers (for events like page views, clicks, add-to-cart), and variables are configured and published directly from the GTM web interface by marketing or product teams.

To learn more about GTM installation, see Get started with tag manager (external Google link).

Deploying rCDP SDK through GTM

Prerequisite

Before you start deploying rCDP SDK through GTM:

  • You must have already setup the Google Tag Manager container snippet on your website (one-time developer task).

  • You should have access to the Algonomy rCDP JS SDK loader script provided by Algonomy.

  • Basic understanding of GTM Tags and Triggers is recommended.

Step 1 — Injecting rCDP SDK via GTM

To inject the rCDP SDK in GTM, create a new Custom HTML tag in GTM that loads the Algonomy JavaScript SDK on every page. Follow these steps.

  1. In your GTM workspace, go to the left sidebar and click Tags → New.

  2. Under Tag Configuration → Tag Type, select Custom HTML as the tag type.

  3. In the HTML field, paste the following Algonomy rCDP JS SDK loader script 

    4. <script type="text/javascript"
src="https://rcdp-us.algonomy.com/js/<TENANT_HASH>/<SITE_HASH>.js"
async>
</script>

  1. Replace <TENANT_HASH> and <SITE_HASH> with your actual values from Algonomy onboarding.

  2. Click on Triggering drop-down and choose a trigger.

    For loading the SDK on every page, use the built-in All Pages trigger

  3. Click Save.

  4. Provide a name and save the tag.
    Give the tag a clear name, for example: rCDP SDK - Page Loader or Algonomy rCDP - Init.

Step 2 — Creating Custom HTML Tags to Track Customer Events

After setting up the Algonomy rCDP SDK via Google Tag Manager, you can configure event tracking by creating Custom HTML tags. These tags capture user interactions and send event data to rCDP based on defined triggers, allowing flexible tracking without modifying site code.

For every page or interaction you want to track, create another Custom HTML tag that calls:

rcdp.executeEventByData(eventData, eventType);

Each tag should have a trigger that matches the specific page or event (e.g., a Page View trigger filtered by URL path).

Example — Category Page Event

Below is an example of firing eventCategory when a user views a category/listing page.

  1. Create a new Custom HTML tag, go to Tags → New → Custom HTML and paste the following script:

    <script>
rcdp.executeEventByData({
parentCategoryId: "parent001",
categoryId: "cat001"
}, "eventCategory");
</script>

  2. Create a trigger for category pages, click Triggers → New → Page View, then set:

    • Trigger fires on: Some Page Views

    • Condition: Page URL contains /collections/ (or your category URL pattern)

  3. Specify a Name for the tag for example "Algonomy – Category Page Event" and Save.

    4. GTM — Custom HTML Tag: Category Page Event

Dynamic Category IDs

For production, always pull category IDs dynamically from the GTM Data Layer or JavaScript variables instead of hard-coding them. This ensures your tracking adapts automatically to changes and is easier to maintain.

<script>
// Use GTM Variables or dataLayer values for dynamic IDs
var catId   = {{DL - categoryId}};   // Data Layer Variable
var parentId = {{DL - parentCategoryId}};

rcdp.executeEventByData({
parentCategoryId: parentId,
categoryId: catId
}, "eventCategory");
</script>

Verify Setup in GTM Preview Mode

To preview your setup:

  1. Click Preview in your GTM workspace.

  2. Navigate to a category page on your site — the debug panel should show the "Algonomy rCDP SDK Loader" tag firing on Container Loaded.

  3. On the same page, confirm that the "Algonomy – Category Page Event" tag fires on Page View.

  4. Open DevTools → Network and filter for rCDP and verify that the API call is successfully sent.

All Event Samples

The Category Page example above uses the same rcdp.executeEventByData() pattern for every event. See the full list of events — Home, Search, Product, Add to Cart, Checkout, Transaction, Login, and more — with ready-to-use code:

  • View all event samples

  • Event Taxonomy Reference

  • JS SDK Quick Start

  • Consent Management

  • Direct REST APIs