Google Tag Manager (GTM)

Using Google Tag Manager (GTM), 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.

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.

1. Create a GTM Account and Container

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)

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

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

If you installed the SDK directly

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.

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

1. Select init in the Tag type field

2. Copy the Browser SDK key for your Hackle Workspace and paste it into the SDK Key field

3. Keep the Hackle Client Name as the default value hackleClient

4. In Triggers, select the Consent Initialization type (Consent Initialization - All Pages)

5. Click Save and save the tag name as Hackle Browser SDK

Tag configuration

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