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 the code examples below.

To track any events beyond basic page views, you must manually implement event tracking using the hardal.track() method:

hardal.track(eventName, eventProperties);

Common Event Examples

Below are examples for commonly tracked e-commerce events. You must add these scripts to your site to track these events:

<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