​
Overview

Hardal provides a server-side analytics solution that helps you collect and process visitor data through a first-party data pipeline. This guide will walk you through implementing Hardal on your website using Google Tag Manager (GTM), which simplifies deployment and management.

Installing Hardal via GTM allows you to easily manage analytics implementation without changing your website code directly.

​
Prerequisites

Before you begin the installation, ensure you have:

  • Access to your Google Tag Manager account
  • A Hardal account with your signal ID and endpoint URL
  • Admin privileges to publish GTM container changes
  • Basic understanding of GTM triggers and variables

​
Hardal Tag Installation

1

Get your Hardal Script

  1. Log into your Hardal account
  2. Navigate to settings
  1. Copy your Hardal Script from “Setup” tab
2

Create a Hardal Tag

  1. Log in to your Google Tag Manager account
  2. Select your web GTM container
  3. In the left sidebar, go to Tags
  4. Click New to create a new tag
  5. Name your tag “Hardal”
  6. Click on the tag configuration area
  1. Select Custom HTML as the tag type
3

Add the Hardal Script

  • Paste your Hardal Script you Tag’s HTML code.

If you have a custom domain set up for Hardal, use that domain as your hardalEndpoint instead of the default endpoint.

4

Set Up Trigger for Tag

  1. Click on the Triggering section
  2. Select the All Pages trigger to fire the tag on all pages
  3. Alternatively, create a custom trigger if you only want to track specific pages
5

Save the Tag

  1. Click Save to save your tag configuration

Important: The base Hardal installation ONLY tracks page views automatically. You must set up additional tags to track other events such as purchases, add to cart actions, etc.

​
Setting Up Event Tracking

Since the base Hardal tag only tracks page views, you need to create separate tags for each event you want to track:

1

Create Event-Specific Tags

For each event you want to track, create a new Custom HTML tag in GTM:

  1. Go to Tags and click New
  2. Name your tag (e.g., “Hardal - Purchase”, “Hardal - Add To Cart”, etc.)
  1. Select Custom HTML as the tag type
2

Add Event Tracking Code

Add the appropriate code snippet for the event you want to track. Here are examples for common e-commerce events:

Purchase Event:

<script>
hardal.track("purchase", {
  transaction_id: dataLayerTransactionId, // Replace with GTM variable reference
  currency: dataLayerCurrency, //Replace with GTM variable reference
  value: dataLayerValue, // Replace with GTM variable reference
  items: dataLayerItems // Replace with GTM variable reference
});
</script>

Add to Cart Event:

<script>
hardal.track("add_to_cart", {
  currency: dataLayerCurrency, //Replace with GTM variable reference
  value: dataLayerValue, // Replace with GTM variable reference
  items: dataLayerItems // Replace with GTM variable reference
});
</script>

View Item Event:

<script>
hardal.track("view_item", {
  currency: dataLayerCurrency, //Replace with GTM variable reference
  value: dataLayerValue, // Replace with GTM variable reference
  items: dataLayerItems // Replace with GTM variable reference
});
</script>

In Google Tag Manager, replace the placeholder variables (like dataLayerValue) with your actual GTM variables using the variable selection interface.

3

Set Up Triggers for Event Tags

  1. Click on the Triggering section for each event tag
  2. Create or select the appropriate trigger for the event
  1. Common triggers include:
    • Custom Event triggers (e.g., “Custom Event - Purchase”)
    • Click triggers (for tracking button clicks)
    • Form submission triggers
    • History change triggers (for single-page applications)
4

Save and Test Each Event Tag

  1. Save each event tag after configuration
  2. Test the tags individually using GTM Preview mode (see Verification section)

​
Variable Implementation

To properly track events, you’ll need to set up GTM variables that correspond to your specific data layer structure.

In Google Tag Manager, you select variables by clicking on the variable selection button (puzzle piece icon) when editing tags.

Common variables you’ll need to set up:

Data You NeedVariable PurposeDescription
Transaction IDFor purchase eventsUnique ID for purchase transactions
ValueFor monetary valuesMonetary value of the event
ItemsFor product detailsArray of product information
CurrencyFor transaction detailsTransaction currency
CustomFor custom needsCustom data

To create these variables:

  1. Go to Variables in GTM
  2. Click New under User-Defined Variables
  3. Select Data Layer Variable as the type
  4. Enter the data layer path (e.g., “ecommerce.items”)
  5. Save the variable with an appropriate name

​
Publishing Your Configuration

1

Preview and Test

  1. Click Preview to test your tags before publishing
  2. Verify that all tags fire as expected (see Verification section)
2

Submit and Publish

  1. Once testing is complete, click Submit
  2. Add a version name and description
  3. Click Publish to make your changes live

​
Verification

After installation, verify that Hardal is working correctly:

1

Use GTM Preview Mode

  1. Click Preview in your GTM interface
  2. Enter your website URL and click Start
  3. Your website will open with the GTM debug panel
  4. Verify that the Hardal base tag fires on page load
  5. Perform actions that should trigger your event tags (purchases, add to cart, etc.)
  6. Confirm these tags fire at the appropriate times
2

Check Network Requests

  1. Open your browser’s developer tools (F12 or Right-click > Inspect)
  2. Go to the Network tab
  3. Refresh the page
  4. Look for requests to your Hardal endpoint domain
  5. Verify that events are being sent successfully
3

Check Hardal Dashboard

  1. Log in to your Hardal dashboard
  2. Navigate to the analytics section
  3. Verify that data is being collected and displayed correctly

​
Troubleshooting

Was this page helpful?