Understanding the FH Tag Manager Data Layer
The FirstHive CDP Tag Manager (FTM) data layer can be used to temporarily store and pass information to Tag Manager about specific actions triggered by visitors on your website.
By default, FTM tracks many common interactions like page views, link clicks, and scroll depth using built-in triggers and variables—no data layer needed.
However, when you need to track complex actions or pass information (like transaction details), the data layer becomes essential.
It is a JavaScript object (usually implemented as an array, e.g., window.dataLayer = []) that acts as a structured interface between your website’s front-end and FirstHive CDP Tag Manager. Developers can push event data and contextual metadata into this central location, which Tag Manager can then use.
Each push() to the data layer includes an object describing an event (e.g., event: ‘newsletterSignup’) and relevant parameters (e.g., formId). Tag Manager listens for the event, and triggers fire if conditions are met.
For Beginners
The data layer is like a digital clipboard.
Every time a user interacts with your website—clicking a button, viewing a product, or submitting a form—your site can record details of that action on the clipboard. Tag Manager then “reads” the clipboard to decide what to track and when.
Example: Adding ftm.push()
<script> window._ftm = window._ftm || []; window._ftm.push({ event: ‘newsletterSignup’, formLocation: ‘homepage’, userType: ‘guest’ }); </script>
This event is then available in FirstHive CDP reports when tied to a tag and trigger.
How the FTM Tracking Code Works
Before Tag Manager can track user interactions, it must be loaded on the page.
The FTM tracking code includes a call to _ftm.push() that initializes the data layer and signals when FTM should start listening for events.
Example Default FTM Tracking Code
<script> var _ftm = window._ftm = window._ftm || []; _ftm.push({‘ftm.startTime’: (new Date().getTime()), ‘event’: ‘ftm.Start’}); (function() { var d=document, g=d.createElement(‘script’), s=d.getElementsByTagName(‘script’)[0]; g.async=true; g.src=‘https://cdn.firsthive.com/container_AbC123.js’; s.parentNode.insertBefore(g,s); })(); </script> <!— End FirstHive CDP Tag Manager —>
What this does:
- Initialize data layervar _ftm = window._ftm = window._ftm || []; Creates a global _ftm array if none exists.
- Push default event_ftm.push({‘ftm.startTime’: (new Date().getTime()), ‘event’: ‘ftm.Start’}); Pushes a ftm.Start event with a timestamp. This helps FTM detect when the container starts loading.
- Load container script Dynamically loads the container file (e.g., container_AbC123.js) and executes tags configured in the container.
When to Use the Data Layer
Use the data layer if you need to:
- Track custom or complex interactions (AJAX forms, multi-step flows, embedded widgets).
- Pass structured data (order details, user role, product info).
- Fire tags based on specific conditions (purchase amount > $100, specific product category).
Common Use Cases
1. Newsletter Signup
window._ftm = window._ftm || []; window._ftm.push({ event: ‘newsletterSignup’, formLocation: ‘homepage’, userType: ‘guest’ });
- Trigger: Custom Event (newsletterSignup)
- Tag: FirstHive Analytics Tag → Event Tracking
- Reported in: Visits Log / Behavior → Events
2. Button Click with Attributes
<button id=“download-guide-button”>Download Guide</button>
<script> document.getElementById(‘download-guide-button’).addEventListener(‘click’, function () { window._ftm = window._ftm || []; window._ftm.push({ event: ‘ctaClick’, label: ‘Download Guide’, section: ‘homepage’ }); }); </script>
- Trigger: Custom Event (ctaClick)
- Variables: label, section
- Tag: FirstHive Analytics Tag
3. Ecommerce Purchase
<script> window._ftm = window._ftm || []; window._ftm.push({ event: ‘purchaseCompleted’, orderId: ‘ORD12345’, revenue: 189.99, products: [ { id: ‘SKU123’, name: ‘Backpack’, price: 49.99 }, { id: ‘SKU456’, name: ‘Red_Jacket’, price: 140.00 } ], }); </script>
Captures structured order details for ecommerce tracking.
Viewing the Data Layer
- FTM Preview & Debug Mode → Shows real-time events, triggers, tags, and variables.
- Browser Console → Type _ftm in DevTools Console to inspect current data layer contents.
Using FirstHive CDP Tag Manager with Google Tag Manager
- FTM uses _ftm
- GTM uses dataLayer
Both can coexist. Options:
- GTM not installed → Use _ftm only.
- GTM installed, sync disabled → Push events to both arrays manually.
- GTM installed, sync enabled → FirstHive CDP Tag Manager can automatically listen to events pushed to dataLayer.
If migrating from GTM to FirstHive CDP, FTM supports GTM-format data layers out of the box.
<script> dataLayer = [{ ‘variable-name’: ‘value’ }]; </script>