Google Tag Manager Integration

Install and manage the Idlen Pixel through Google Tag Manager (GTM) for easier deployment and tag management.

Setup Overview

1. Add the Idlen Pixel base tag
2. Configure page view tracking
3. Set up conversion triggers
4. Test and publish

Step 1: Add the Base Tag

Create a new Custom HTML tag in GTM:

Tag Name: Idlen Pixel - Base

<script>
!function(i,d,l,e,n){i.idlen=i.idlen||function(){
(i.idlen.q=i.idlen.q||[]).push([].slice.call(arguments))};
var s=d.createElement('script');s.async=1;
s.src='https://pixel.idlen.io/v1/pixel.js';
d.head.appendChild(s)}(window,document);

idlen('init', '{{Idlen Advertiser ID}}');
</script>

Trigger: All Pages (Page View)

Step 2: Page View Tracking

Create a new Custom HTML tag:

Tag Name: Idlen Pixel - PageView

<script>
if (window.idlen) {
  idlen('track', 'PageView');
}
</script>

Trigger: All Pages (Page View)

Tag Sequencing: Set this tag to fire after Idlen Pixel - Base

Step 3: Conversion Tracking

Form Submission

Create a trigger for form submissions:

Trigger Name: Form - Signup Submit

• Trigger Type: Form Submission
• Form ID: signup-form (or use CSS selector)

Create the conversion tag:

Tag Name: Idlen Pixel - Signup Conversion

<script>
if (window.idlen) {
  idlen('track', 'Conversion', {
    eventName: 'signup'
  });
}
</script>

Trigger: Form - Signup Submit

Button Click

Trigger Name: Button - Purchase Click

• Trigger Type: Click - All Elements
• Click ID: purchase-button

Tag Name: Idlen Pixel - Purchase Conversion

<script>
if (window.idlen) {
  idlen('track', 'Conversion', {
    eventName: 'purchase',
    value: {{Purchase Value}}
  });
}
</script>

Custom Event (DataLayer)

If your application pushes events to the dataLayer:

// Your application code
dataLayer.push({
  event: 'purchase_complete',
  transaction_value: 99.99
});

Create a trigger:

Trigger Name: DataLayer - Purchase Complete

• Trigger Type: Custom Event
• Event Name: purchase_complete

Create a DataLayer Variable:

Variable Name: DLV - Transaction Value

• Variable Type: Data Layer Variable
• Data Layer Variable Name: transaction_value

Tag Name: Idlen Pixel - Purchase from DataLayer

<script>
if (window.idlen) {
  idlen('track', 'Conversion', {
    eventName: 'purchase',
    value: {{DLV - Transaction Value}}
  });
}
</script>

SPA (Single Page Application) Tracking

For SPAs using History API, create a trigger:

Trigger Name: History Change

• Trigger Type: History Change

Tag Name: Idlen Pixel - SPA PageView

<script>
if (window.idlen) {
  idlen('track', 'PageView');
}
</script>

Trigger: History Change

Variables Reference

Testing

GTM Preview Mode

1. Click Preview in GTM
2. Navigate your website
3. Check that tags fire correctly
4. Verify in the Tags tab

Idlen Debug Mode

Add debug mode to the base tag:

<script>
idlen('init', '{{Idlen Advertiser ID}}', { debug: true });
</script>

Open browser console to see:

[Idlen Pixel] Initialized
[Idlen Pixel] PageView tracked: /
[Idlen Pixel] Conversion tracked: signup

Verify in Ads Manager

1. Go to Ads Manager > Settings > Pixel
2. Check "Recent Events" section
3. Confirm events are being received

Publishing

Once tested:

1. Remove debug: true from the base tag
2. Click Submit in GTM
3. Add version name: "Idlen Pixel Setup"
4. Click Publish

Troubleshooting

Tags Not Firing

• Check trigger conditions
• Verify tag sequencing (base tag must fire first)
• Ensure no JavaScript errors in console

Events Not Appearing in Ads Manager

• Confirm advertiser ID is correct
• Check network requests for pixel.idlen.io/v1/track
• Verify CORS isn't blocking requests

Duplicate Events

• Check for multiple triggers firing
• Ensure base tag only fires once per page
• Use tag firing options: "Once per page"