Complete Guide: Setting Up Google Tag Manager Integration

Table of Contents▼

Introduction

Google Tag Manager (GTM) is the industry standard for managing analytics and marketing tags on your website. When integrated with Hikari, you gain a powerful combination: GTM's flexible tag management paired with Hikari's intuitive analytics dashboard.

This comprehensive guide walks you through the entire integration process, from initial setup to advanced troubleshooting. By the end, you'll have a fully functional analytics implementation that captures the data you need.

Prerequisites

Before starting, ensure you have:

A Hikari account (sign up free if you don't have one)
A Google Tag Manager account with a container set up
Admin access to your website's code or CMS
Basic understanding of HTML and JavaScript (helpful but not required)

What You'll Need

Item	Where to Find It
GTM Container ID	GTM Admin > Container Settings
Hikari Tracking ID	Hikari Dashboard > Settings > Tracking
Website Access	Your CMS or hosting provider

Step 1: Create a GTM Account and Container

If you already have a GTM account, skip to Step 2.

Navigate to Google Tag Manager
Sign in with your Google account
Click Create Account

GTM Create Account screen showing account setup form with fields for account name and container setup

1.2 Set Up Your Container

Enter your Account Name (typically your company name)
Enter your Container Name (use your website domain)
Select Web as the target platform
Click Create

1.3 Accept Terms of Service

Review and accept the GTM Terms of Service. Your container is now ready.

Step 2: Install the GTM Code on Your Website

2.1 Get Your GTM Code

Open your GTM container
Click on your container ID (format: GTM-XXXXXXX)
A modal will appear with two code snippets

GTM Install Code modal showing head and body code snippets

2.2 Add Code to Your Website

Option A: Direct HTML Installation

Add the following code as high as possible in the <head> of your website:

<!-- Google Tag Manager -->
<script>
  (function (w, d, s, l, i) {
    w[l] = w[l] || [];
    w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
    var f = d.getElementsByTagName(s)[0],
      j = d.createElement(s),
      dl = l != 'dataLayer' ? '&l=' + l : '';
    j.async = true;
    j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
    f.parentNode.insertBefore(j, f);
  })(window, document, 'script', 'dataLayer', 'GTM-XXXXXXX');
</script>
<!-- End Google Tag Manager -->

Add this code immediately after the opening <body> tag:

<!-- Google Tag Manager (noscript) -->
<noscript
  ><iframe
    src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
    height="0"
    width="0"
    style="display:none;visibility:hidden"
  ></iframe
></noscript>
<!-- End Google Tag Manager (noscript) -->

Important: Replace GTM-XXXXXXX with your actual container ID.

Option B: CMS-Specific Installation

CMS	Installation Method
WordPress	Use a plugin like "GTM4WP" or add to theme's header.php
Shopify	Add to theme.liquid file in the Layouts folder
Webflow	Add to Custom Code in Site Settings
Squarespace	Use Code Injection in Advanced Settings
Next.js	Create a GTM component and include in _app.tsx

2.3 Verify Installation

Use the GTM Preview mode or a browser extension like "Tag Assistant" to verify your installation:

Open GTM and click Preview
Enter your website URL
Look for "Tag Manager connected" message

GTM Preview mode showing successful connection to website

Step 3: Connect GTM to Hikari

3.1 Get Your Hikari Tracking ID

Log in to your Hikari dashboard
Navigate to Settings > Tracking
Copy your Tracking ID (format: HKR-XXXXXXXX)

Hikari Settings page showing tracking ID and integration options

3.2 Create the Hikari Tag in GTM

In GTM, go to Tags > New
Name your tag: "Hikari - Page View"
Click Tag Configuration
Select Custom HTML

GTM New Tag configuration screen

3.3 Add the Hikari Tracking Code

Paste this code into the HTML field:

<script>
  (function (h, i, k, a, r, i) {
    h['HikariObject'] = r;
    h[r] =
      h[r] ||
      function () {
        (h[r].q = h[r].q || []).push(arguments);
      };
    h[r].l = 1 * new Date();
    a = i.createElement(k);
    a.async = 1;
    a.src = 'https://cdn.hikari.io/tracker.js';
    var s = i.getElementsByTagName(k)[0];
    s.parentNode.insertBefore(a, s);
  })(window, document, 'script', 'hikari');
 
  hikari('init', 'YOUR_TRACKING_ID');
  hikari('pageview');
</script>

Replace YOUR_TRACKING_ID with your actual Hikari tracking ID.

3.4 Set Up the Trigger

Scroll down to Triggering
Click the pencil icon or Add Trigger
Select All Pages
Click Save

GTM Trigger configuration showing All Pages trigger selected

3.5 Save and Publish

Click Save to save your tag
Click Submit in the top right
Enter a version name (e.g., "Initial Hikari Setup")
Click Publish

Step 4: Configure Event Tracking

Basic page views are just the beginning. Let's set up event tracking to capture meaningful user interactions.

4.1 Track Button Clicks

Create a Click Trigger:

Go to Triggers > New
Name it: "Click - CTA Buttons"
Trigger Type: Click - All Elements
This trigger fires on: Some Clicks
Condition: Click Text contains Sign Up (or your CTA text)
Save

Create the Event Tag:

Go to Tags > New
Name: "Hikari - Event - CTA Click"
Tag Type: Custom HTML
HTML:

<script>
  hikari('event', 'cta_click', {
    button_text: '{{Click Text}}',
    button_url: '{{Click URL}}',
    page_path: '{{Page Path}}'
  });
</script>

Trigger: Select "Click - CTA Buttons"
Save and publish

4.2 Track Form Submissions

Create a Form Trigger:

Go to Triggers > New
Name: "Form - Contact Form"
Trigger Type: Form Submission
This trigger fires on: Some Forms
Condition: Form ID equals contact-form (adjust to your form ID)
Check "Wait for Tags" and set timeout to 2000ms
Save

Create the Form Event Tag:

<script>
  hikari('event', 'form_submission', {
    form_name: 'Contact Form',
    page_path: '{{Page Path}}'
  });
</script>

4.3 Track Scroll Depth

Create a Scroll Trigger:

Go to Triggers > New
Name: "Scroll - 50%"
Trigger Type: Scroll Depth
Check Vertical Scroll Depths
Select Percentages: 50
Save

Create the Scroll Tag:

<script>
  hikari('event', 'scroll_depth', {
    depth: '50%',
    page_path: '{{Page Path}}'
  });
</script>

Step 5: Set Up Data Layer Variables

The data layer is GTM's way of passing information between your website and tags. Here's how to set up useful variables.

5.1 Create Data Layer Variables

Go to Variables > User-Defined Variables > New
Configure these common variables:

Variable Name	Variable Type	Data Layer Variable Name
Page Category	Data Layer Variable	pageCategory
User ID	Data Layer Variable	userId
Product Price	Data Layer Variable	productPrice
Transaction ID	Data Layer Variable	transactionId

5.2 Push Data to the Data Layer

Add this code to your website where relevant:

// Example: On product pages
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'productView',
  pageCategory: 'Product',
  productId: 'SKU-12345',
  productName: 'Premium Widget',
  productPrice: 99.99
});

Step 6: Verify Your Setup

6.1 Use GTM Preview Mode

Click Preview in GTM
Enter your website URL
Interact with your site (click buttons, submit forms, scroll)
Verify that tags fire correctly

GTM Preview debug panel showing tags firing on page interactions

6.2 Check Hikari Dashboard

Open your Hikari dashboard
Navigate to Real-time > Events
Perform actions on your website
Verify events appear within seconds

6.3 Use Browser DevTools

Open Chrome DevTools (F12) and check:

Network tab: Look for requests to hikari.io
Console tab: Check for any JavaScript errors
Application tab: Verify cookies are being set

Troubleshooting Common Issues

Tags Not Firing

Symptoms: No data appearing in Hikari dashboard

Solutions:

Check trigger conditions: Ensure your triggers match the actual page elements
Verify tag firing: Use GTM Preview to see if tags are triggered
Check data layer: Ensure data layer variables are populated before tags fire

// Debug: Check if data layer exists
console.log(window.dataLayer);

Duplicate Events

Symptoms: Same event recorded multiple times

Solutions:

Check for multiple GTM containers on the page
Ensure tags aren't duplicated in GTM
Verify trigger conditions aren't too broad

Missing Data in Variables

Symptoms: Variables show undefined in GTM Preview

Solutions:

Check data layer variable names match exactly (case-sensitive)
Ensure data is pushed before the tag fires
Use gtm.load event for late-loaded data

GTM Blocking Page Load

Symptoms: Slow page performance after GTM installation

Solutions:

Use async loading for all tags
Limit the number of tags firing on page load
Consider using Tag Sequencing for non-critical tags

Advanced Configuration

E-commerce Tracking

For e-commerce sites, implement enhanced tracking:

<script>
  // Product View
  hikari('event', 'view_item', {
    'currency': 'USD',
    'value': 99.99,
    'items': [{
      'item_id': 'SKU-12345',
      'item_name': 'Premium Widget',
      'price': 99.99,
      'quantity': 1
    }]
  });
 
  // Purchase
  hikari('event', 'purchase', {
    'transaction_id': 'T-12345',
    'value': 149.99,
    'currency': 'USD',
    'items': [...]
  });
</script>

User Identification

Track users across sessions:

<script>
  // After user login
  hikari('identify', {
    user_id: 'user-123',
    email: 'user@example.com', // Optional, hashed
    plan: 'premium'
  });
</script>

Custom Dimensions

Pass custom data for segmentation:

<script>
  hikari('set', 'custom_dimension_1', 'Premium User');
  hikari('set', 'custom_dimension_2', 'US-West');
</script>

Best Practices

Use a naming convention: category_action_label (e.g., cta_click_header)
Document your tags: Keep a spreadsheet of all tags, triggers, and variables
Test in a staging environment: Never test new tags in production
Use workspaces: Create separate workspaces for major changes
Version control: Name your versions descriptively
Regular audits: Review tags quarterly to remove unused ones

Conclusion

You now have a fully functional GTM integration with Hikari. This setup provides a solid foundation for tracking user behavior and measuring marketing performance.

Remember to:

Test thoroughly before publishing changes
Document your implementation
Review your data regularly
Keep your tags organized

Need help? Check out our documentation or contact support.

Technical Team

Related Articles

Product Update: New Features for February 2026

5 Key Metrics Every Digital Marketer Should Track in 2026

Case Study: How an E-commerce Store Increased Conversions by 45%

Get Analytics Insights Delivered