# Google Tag Manager (GTM)

Using [Google Tag Manager (GTM)](https://developers.google.com/tag-platform/tag-manager?hl=ko), you can use the Hackle JavaScript SDK through GTM.

GTM is available in PC and Mobile Web environments. It also supports shopping malls like Cafe24 and web views in hybrid apps.

{% hint style="info" %}
Using the GTM template, developers can easily integrate the Hackle SDK and collect events and marketing analytics without directly modifying site code.

When integrating the Hackle SDK via GTM, log collection accuracy may be lower compared to integrating the SDK directly.
{% endhint %}

## 1. Create a GTM Account and Container

[![](https://img.shields.io/badge/GTM%20Template-Available-0099ff)](https://tagmanager.google.com/gallery/#/owners/hackle-io/templates/gtm-template)

Log in to Google Tag Manager and select the account/container to integrate with Hackle.\
If you do not have an account/container, create a new one.

A container is the unit for deploying GTM tags to your website or app.\
If you have more than one domain in service, we recommend creating a separate container per domain for better event data management.

## 2. Install Template

1. Hackle Browser SDK template ([link](https://tagmanager.google.com/gallery/#/owners/hackle-io/templates/gtm-template))
2. In your working container, go to Workspace > click the `Templates` menu
3. Click the `Search Gallery` button in `Tag Templates`
4. Search for `Hackle Browser SDK`, select it, and click `Add to workspace`

![Import template](/files/5PoNzvPm8bIPCGkywb1g)

## 3. Configure the Hackle SDK

First, check the SDK Key you want to use in the Hackle Dashboard. Insert this SDK key using the method below to initialize and prepare the SDK for use. [Get SDK Key](/en/sdk-link-info/sdk-info.md)

### If you installed the SDK directly

{% hint style="success" %}
To use all features provided by Hackle beyond just event tracking — such as A/B Tests and Remote Config — you need to install the SDK directly.

For direct installation, refer to the [SDK integration page](/en/development-guide/javascript.md).
{% endhint %}

If you inserted the JavaScript SDK script directly into HTML via CDN or installed the SDK via a package manager like npm/Yarn and initialized it directly, you do not need to insert an additional SDK key via GTM (GTM's init).

However, in this case, you must expose the initialized SDK instance as a global window variable.

```
const hackleClient = Hackle.createInstance("YOUR_BROWSER_SDK_KEY"); // existing initialization code
window.hackleClient = hackleClient // code to add for GTM
```

### If using GTM only

1. Select the `Tags` menu on the Tag Manager main screen
2. Click `New` → `Tag Configuration` → select `Hackle Browser SDK`

![Select tag type](/files/eMD3LMp5AXUIztwfJGrL)

3. Select `init` in the Tag type field
4. Copy the Browser SDK key for your Hackle Workspace and paste it into the SDK Key field
5. Keep the Hackle Client Name as the default value `hackleClient`
6. In `Triggers`, select the `Consent Initialization` type (Consent Initialization - All Pages)
7. Click `Save` and save the tag name as `Hackle Browser SDK`

![Tag configuration](/files/bAizrnTyT6i3ReF5VPrA)

## 4. Track Events

### Event

1. Select the `Tags` menu on the Tag Manager main screen
2. Click `New` → `Tag Configuration` → select `Hackle Browser SDK`
3. Select `track(send event)` in the Tag type field
4. Enter the Event Key name (e.g., view\_home) or select a variable to use a pre-configured event from GTM
5. If an Event Property exists, enter the corresponding key and value
6. In `Triggers`, select the trigger type for the Event Key
7. Click `Save` and save the tag name


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.hackle.io/en/development-guide/google-tag-manager.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.