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 rCDP using Google Tag Manager (GTM), without requiring repeated changes to your website’s code..

Once the 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 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 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:

GTM Setup and rCDP SDK Integration

To start tracking clickstream events with 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:

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 JavaScript SDK on every page. Follow these steps.

  1. In your GTM workspace, go to the left sidebar and click TagsNew.

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

  3. In the HTML field, paste the following 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 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 rCDP - Init.

  1. Test and Publish.

  2. Use GTM Preview Mode to test the tag on your website.

    1. Verify that the rCDP SDK loads correctly and events fire as expected.

    2. Once validated, click Submit and Publish the container.

XXXX

Why Load rCDP Through GTM?

Inject the rCDP SDK via GTM and fire clickstream events from Custom HTML tags — no site code changes needed.

Step 1 — Inject the rCDP SDK via GTM

Create a Custom HTML tag in GTM that loads the JS SDK on every page.

  1. Open GTM → Tags → New

    In your GTM workspace, click Tags in the left sidebar, then New.

  2. Choose 'Custom HTML' as tag type

    Click the Tag Configuration panel and select Custom HTML.

  3. Paste the SDK loader script

    Paste the following into the HTML field:

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

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

  6. Set Triggering → All Pages

    Under Triggering, select the built-in All Pages trigger so the SDK loads on every page view.

  7. Name & Save

    Name the tag " rCDP SDK Loader" and click Save.

Step 2 — Creating Custom HTML Tags to Track Customer Events

After setting up the 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 TagsNewCustom 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:

  3. Specify a Name for the tag for example " – 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 " rCDP SDK Loader" tag firing on Container Loaded.

  3. On the same page, confirm that the " – 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:

Related guides