Googl-Tag-Manager

With this integration, you can initialize Twinalyze Analytics, enable automatic tracking, and send custom events from Google Tag Manager.

Overview

The Twinalyze GTM integration works like this:

Website
   ↓
Google Tag Manager
   ↓
Twinalyze Initialize SDK Tag
   ↓
Twinalyze Web Analytics SDK
   ↓
Automatic Tracking + Custom Events
   ↓
Twinalyze Dashboard

Feature	Description
Initialize SDK	Loads and initializes the Twinalyze Web Analytics SDK.
Page View Tracking	Tracks page visits.
Scroll Depth Tracking	Tracks how far users scroll.
Element Click Tracking	Tracks clicks on buttons, links, menus, and other elements.
Form Tracking	Tracks form start and form submit activity.
Site Search Tracking	Tracks search keywords from URL parameters.
File Download Tracking	Tracks downloadable file clicks.
Custom Event Tracking	Sends custom business events from GTM to Twinalyze.

Before you start, make sure you have:

A Twinalyze account
A Twinalyze project
API Key and Public Key
A Google Tag Manager account
GTM container access
Website code or admin access

Use only client-safe keys inside Google Tag Manager because GTM runs in the browser.

Install Google Tag Manager

First, add the Google Tag Manager script to your website.

Open your GTM container

Open Google Tag Manager and select your website container.

Copy GTM install code

Click your GTM container ID, such as GTM-XXXXXXX. Google Tag Manager will show two code snippets.

Add script in head

Add the first GTM script as high as possible inside your website <head> tag.

Add noscript in body

Add the second GTM noscript code immediately after the opening <body> tag.

Publish website changes

Save and publish your website changes.

Head script:

<!-- 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 -->

Body noscript:

<!-- 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) -->

Replace GTM-XXXXXXX with your actual Google Tag Manager container ID.

Initialize Twinalyze SDK

After GTM is installed, create the Twinalyze initialization tag.

Create new tag

In Google Tag Manager, go to Tags and click New.

Choose Twinalyze template

In Tag Configuration, select Twinalyze Web Analytics SDK.

Select Initialize SDK

In the Tag Type dropdown, select Initialize SDK.

Add project details

Enter your API Key, Public key, and API Base URL.

Enable tracking options

Enable the tracking options you need, such as page view, scroll depth, element click, form, site search, and file download tracking.

Add trigger

Select the All Pages trigger.

Save tag

Name the tag Twinalyze - Initialize SDK and save it.

Recommended setup:

Field	Recommended value
Tag name	Twinalyze - Initialize SDK
Template	Twinalyze Web Analytics SDK
Tag Type	Initialize SDK
Trigger	All Pages
API Base URL	https://api.twinalyze.com
Debug mode while testing	Enabled
Debug mode in production	Disabled

The Initialize SDK tag should fire on All Pages. This makes Twinalyze available across your complete website.

API Key

Your Twinalyze project API Key. This connects website activity with your Twinalyze project.

Public key

Your Twinalyze project Public Key. This is used by the Web SDK while sending analytics data from the browser.

API Base URL

The API endpoint where Twinalyze events are sent.

Default value: <code>https://api.twinalyze.com</code>

Automatic tracking options

You can enable page view, scroll depth, element click, form start/submit, site search, and file download tracking.

Site Search Params

Add search URL parameters used by your website.

Recommended value: <code>q,s,search,query</code>

File Download Extensions

Add file extensions you want to track.

Example: <code>pdf,zip,apk,doc,docx,xls,xlsx,ppt,pptx</code>

Advanced - Debug Mode

Enable debug mode while testing. Disable it before publishing to production.

Advanced - SDK Version and SDK URL

SDK version example: 1.0.19

SDK URL example: <code>https://cdn.jsdelivr.net/npm/@twinalyze/web-analytics</code>

Track Custom Events

To track custom actions like add to cart, purchase, signup, or form submit, push an event into GTM dataLayer. Example website code:

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: "add_to_cart",
  product_id: "125",
  product_name: "Premium Hair Pin",
  price: 499,
  currency: "INR",
  quantity: 1
});
</script>

Common event examples:

Event name	When to send
add_to_cart	When user adds a product to cart.
checkout_started	When user starts checkout.
purchase_completed	When user completes a purchase.
signup_completed	When user creates an account.
button_clicked	When user clicks an important button.
form_submitted	When user submits a form.

Now create GTM variables, trigger, and tag.

Create Data Layer Variables

Go to Variables, create new Data Layer Variable entries, and use the exact keys from your dataLayer event.

Create Custom Event Trigger

Go to Triggers, create a Custom Event trigger, and enter the event name. For this example, use add_to_cart.

Create Twinalyze event tag

Go to Tags, create a new Twinalyze tag, select Track Event or your custom event option, and set event name as add_to_cart.

Map event properties

Map GTM variables as event properties, such as product_id, product_name, price, currency, and quantity.

Attach trigger

Attach your custom event trigger, such as CE - add_to_cart, to the Twinalyze custom event tag.

Recommended Data Layer Variables:

GTM variable name	Data Layer Variable Name
DLV - product_id	product_id
DLV - product_name	product_name
DLV - price	price
DLV - currency	currency
DLV - quantity	quantity

Custom Event Trigger example:

Field	Value
Trigger name	CE - add_to_cart
Trigger type	Custom Event
Event name	add_to_cart

Twinalyze custom event tag example:

Field	Value
Tag name	Twinalyze - Add To Cart
Template	Twinalyze Web Analytics SDK
Tag Type	Track Event / Custom Event
Event Name	add_to_cart
Trigger	CE - add_to_cart

Event property mapping:

Property name	GTM value
product_id
product_name
price
currency
quantity

Complete custom event flow:

User clicks Add to Cart
   ↓
Website pushes add_to_cart to dataLayer
   ↓
GTM Custom Event Trigger detects add_to_cart
   ↓
Twinalyze - Add To Cart tag fires
   ↓
Twinalyze receives the event
   ↓
Event appears in Twinalyze dashboard

Test and Publish

Test your setup before publishing.

Open GTM Preview Mode

In Google Tag Manager, click Preview and connect your website.

Check Initialize SDK tag

Visit your website and confirm that Twinalyze - Initialize SDK fires on page load.

Check custom event

Perform the action, such as clicking Add to Cart, and confirm that add_to_cart appears in GTM Preview Mode.

Check event tag

Confirm that Twinalyze - Add To Cart fires on the custom event.

Check Twinalyze dashboard

Open your Twinalyze dashboard and confirm that events are visible.

Publish container

Disable debug mode and publish your GTM container.

Production checklist:

GTM script is added to the website
Twinalyze Initialize SDK tag is firing
Initialize SDK trigger is set to All Pages
API Key is correct
Public key is correct
API Base URL is correct
Required automatic tracking options are enabled
Data Layer Variables are created correctly
Custom Event Trigger event name matches the dataLayer event
Twinalyze custom event tag is firing
Debug mode is disabled
GTM container is published
Events are visible in Twinalyze dashboard

Troubleshooting

GTM is not loading on website

Check that both GTM snippets are added correctly. The script should be inside <head> and the noscript should be immediately after <body>.

Initialize SDK tag is not firing

Check that the tag trigger is set to All Pages.

SDK is not loading

Check that the SDK URL is correct and allowed in template permissions.

Default SDK URL: <code>https://cdn.jsdelivr.net/npm/@twinalyze/web-analytics</code>

Custom event is not showing in GTM Preview Mode

Check that your website is pushing the event to window.dataLayer. The pushed event name must match the Custom Event Trigger name.

Event properties are empty

Check that Data Layer Variables use the exact same names as the keys pushed in dataLayer. For example, if dataLayer has product_id, the Data Layer Variable Name must also be product_id.

Events are not visible in Twinalyze

Check API Key, Public key, API Base URL, GTM publish status, Twinalyze tag firing status, and whether your website blocks the SDK CDN URL.

Duplicate events are coming

Make sure only one Twinalyze Initialize SDK tag is firing on the same page. Also check that your custom event is not pushed multiple times from your website code.

‹Previous Connect Slack with Twinalyze.

MARKETING

COMMUNICATION

Overview

Install Google Tag Manager

Initialize Twinalyze SDK

Track Custom Events

Test and Publish

Troubleshooting

​Overview

​Install Google Tag Manager

​Initialize Twinalyze SDK

​Track Custom Events

​Test and Publish

​Troubleshooting

Overview

Install Google Tag Manager

Initialize Twinalyze SDK

Track Custom Events

Test and Publish

Troubleshooting