​
Overview

The Hardal Web Script enables you to track user behavior and collect analytics data from your web applications. This guide will walk you through the basic installation and configuration process.

​
Prerequisites

Before you begin the installation, ensure you have:

  • Access to your website’s HTML source code
  • Admin access to your Hardal dashboard
  • Basic knowledge of HTML and JavaScript

You should create a custom domain for first-party data ownership. It is best practice to create one before the installation.

​
Installation

1

Get your Hardal Script

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

2

Add the Script

Add your Hardal Script to your HTML file, preferably in the <head> section. The script should look like the following:

<script>
  !function() {
    var hardalEndpoint = "https://<your-hardal-signal-id>-signal.usehardal.com";
    
    // Create script element
    var script = document.createElement('script');
    script.async = true;
    script.src = hardalEndpoint + "/hardal";
    
    // Add data attributes for configuration
    script.setAttribute('data-website-id', '<your-hardal-signal-id>'); 
    script.setAttribute('data-host-url', hardalEndpoint);
    script.setAttribute('data-auto-track', 'true');
     
    // Insert script into the document
    var firstScript = document.getElementsByTagName('script')[0];
    firstScript.parentNode.insertBefore(script, firstScript);
  }();
</script>

Replace <your-hardal-signal-id> with your actual Signal ID.

If you create a custom domain and check it within the same setup page, your Hardal Script will be updated with the corresponding endpoint.

3

Verify Installation

To verify your installation:

  1. Open your browser’s developer tools (F12 or right-click → Inspect)
  2. Go to the Network tab
  3. Refresh your page
  4. Look for requests to your Hardal endpoint
  5. Verify that page view events are being sent successfully
  6. Check your Hardal Dashboard to see real-time events are reflected accordingly

​
Custom Event Tracking

Hardal script only sends page view events automatically. All other events (purchases, add to cart, etc.) must be explicitly added using one of the methods below.

​
Method 1: Using Hardal Data Layer (Preferred)

The recommended way to track custom events is using the Hardal Data Layer. This approach provides better compatibility with tag management systems and easier debugging.

Initialize the data layer and push events to it:

window.hardalDataLayer = window.hardalDataLayer || [];
window.hardalDataLayer.push({
  event: 'event_name',
  property1: value1,
  property2: value2
});

​
Common Event Examples (Data Layer Method)

<script>
window.hardalDataLayer = window.hardalDataLayer || [];
window.hardalDataLayer.push({
  event: 'add_to_cart',
  currency: "TRY",
  value: dataLayerValue,
  items: dataLayerItems
});
</script>

​
Method 2: Using hardal.track() (Alternative)

You can also use the hardal.track() method to send custom events:

hardal.track(eventName, eventProperties);

​
Common Event Examples (hardal.track Method)

<script>
hardal.track("add_to_cart", {
  currency: "TRY",
  value: dataLayerValue,
  items: dataLayerItems
});
</script>

​
Data Layer Variables

In a Google Tag Manager implementation, you would typically reference data layer variables using double curly braces. For example: DLV - Value, DLV - Transaction ID, and DLV - ecommerce.items.

The exact variable names will depend on your specific implementation.

Each client may have different variable names for:

  • Transaction IDs
  • Product values
  • Item arrays
  • Currency formats

Work with your development team to ensure the correct variables are used for your specific implementation.

​
Troubleshooting

​
Common Installation Issues