> Site index: https://usehardal.com/llms.txt
> Every content route also serves markdown at <url>.md

# How to Set Up Hardal Custom Events with Google Tag Manager

Learn how to track custom events and send custom properties using Google Tag Manager with Hardal cookieless analytics.

Source: https://usehardal.com/hardal-custom-events-google-tag-manager
Published: 2025-12-12
Updated: 2025-12-12
Author: Emircan Uye

---

Google Tag Manager makes it easy to set up custom event tracking without modifying your website's code directly. This guide shows you how to track custom events with Hardal using GTM.

Before starting, ensure you have:
- Hardal tracking script installed via Google Tag Manager
- Access to your Google Tag Manager container
- Basic understanding of GTM tags and triggers

If you haven't set up Hardal with GTM yet, see our [GTM setup guide](https://usehardal.com/hardal-google-tag-manager-setup).

### Step 1: Create New Tag

In Google Tag Manager:
1. Navigate to **Tags**
2. Click **New**
3. Click on **Tag Configuration**
4. Select **Custom HTML**

![Screenshot: Google Tag Manager new tag creation dialog](https://imge.usehardal.com/cdn/website/blog-post/hardal-custom-events-google-tag-manager/qeymea76qsdl89feokwe.jpg)

### Step 2: Add Event Tracking Script

In the HTML field, add this code:

```html
<script>
  hardal.track('button_click');
</script>
```

This simple script tracks a button click event.

![Screenshot: Custom HTML tag with basic event tracking code](https://imge.usehardal.com/cdn/website/blog-post/hardal-custom-events-google-tag-manager/isdqsmfnjjtx3mhx272s.jpg)

### Step 3: Configure Tag Settings

**Enable document.write support:**
Check the box for "Support document.write" to ensure flawless tracking.

**Advanced Settings:**
- **Tag firing options:** Select "Once per event"
- **Consent Settings:** Choose "No additional consent required" (adjust based on your compliance needs)

![Screenshot: Tag settings showing document.write and advanced options](https://imge.usehardal.com/cdn/website/blog-post/hardal-custom-events-google-tag-manager/kzuvn91pexvz4eev53yu.jpg)

### Step 4: Set Up Trigger

Click on **Triggering** and select an appropriate trigger. For button clicks, use:
- Click - All Elements (for all buttons)
- Or create a specific Click trigger

![Screenshot: Trigger selection showing Click - All Elements](https://imge.usehardal.com/cdn/website/blog-post/hardal-custom-events-google-tag-manager/mx0yq0jkfhezp1zjrnmc.jpg)

### Step 5: Name and Save

Name your tag (e.g., "Hardal Button Click Event") and click **Save**.

To send additional data with your events, modify the script to include properties.

### Step 1: Modify the Script Structure

Click on your existing tag and update the code:

```html
<script>
  hardal.track('button_click', {
    button_name: 'Subscribe Button',
    button_page: '/pricing'
  });
</script>
```

### Step 2: Use GTM Variables

To make your events dynamic, use GTM variables with double curly braces `{{}}`:

```html
<script>
  hardal.track('button_click', {
    button_name: '{{Click Text}}',
    button_page: '{{Page Path}}',
    button_url: '{{Click URL}}'
  });
</script>
```

![Screenshot: Code showing GTM variables in curly braces](https://imge.usehardal.com/cdn/website/blog-post/hardal-custom-events-google-tag-manager/hwxfeeqr36q1sew2rhtn.jpg)

This automatically captures:
- The text of the clicked button
- The current page path
- The URL the button links to

### Step 3: Add More Properties

You can add as many properties as needed:

```html
<script>
  hardal.track('button_click', {
    button_name: '{{Click Text}}',
    button_page: '{{Page Path}}',
    button_url: '{{Click URL}}',
    button_id: '{{Click ID}}',
    timestamp: new Date().toISOString()
  });
</script>
```

### Track Form Submissions

```html
<script>
  hardal.track('form_submission', {
    form_id: '{{Form ID}}',
    form_name: '{{Form Name}}',
    page: '{{Page Path}}'
  });
</script>
```

Trigger: Form Submission - All Forms

### Track Video Engagement

```html
<script>
  hardal.track('video_play', {
    video_title: '{{Video Title}}',
    video_provider: '{{Video Provider}}',
    video_url: '{{Video URL}}',
    video_percent: '{{Video Percent}}'
  });
</script>
```

Trigger: Video - Video Progress

### Track Scroll Depth

```html
<script>
  hardal.track('scroll_depth', {
    scroll_percentage: '{{Scroll Depth Threshold}}',
    page: '{{Page Path}}'
  });
</script>
```

Trigger: Scroll Depth

### Track Add to Cart

```html
<script>
  hardal.track('add_to_cart', {
    product_id: '{{Product ID}}',
    product_name: '{{Product Name}}',
    product_price: '{{Product Price}}',
    product_category: '{{Product Category}}'
  });
</script>
```

Trigger: Click - Add to Cart Button

### Use GTM Preview Mode

1. Click **Preview** in Google Tag Manager
2. Enter your website URL
3. Trigger the events you configured
4. Verify tags are firing correctly

### Check Browser Network Tab

1. Open your website with DevTools (F12)
2. Go to Network tab
3. Trigger your custom events
4. Look for requests to Hardal with event data

### Verify in Hardal Dashboard

1. Go to **Analytics** > **Events**
2. Check for your custom events
3. Click events to view properties

After testing and verifying everything works:

1. Click **Submit** in GTM
2. Add a version name (e.g., "Added custom event tracking")
3. Add a description of changes
4. Click **Publish**

- **Test Before Publishing:** Always use Preview mode to test tags
- **Use Descriptive Names:** Name tags clearly (e.g., "Hardal - Add to Cart Event")
- **Leverage GTM Variables:** Use built-in variables for dynamic data
- **Document Your Setup:** Add notes in tag descriptions
- **Organize with Folders:** Group related tags in GTM folders
- **Version Control:** Use meaningful version names when publishing

Your custom events are now configured in Google Tag Manager, providing flexible and powerful tracking capabilities without touching your website's code.

For a more detailed walkthrough, check out our step-by-step guide. [How To Set Up Hardal Custom Events With Google Tag Manager](https://youtu.be/5olG8woYpok)