Tag Manager Integration

This guide covers deploying the Permutive SDK through popular tag management systems.

Google Tag Manager

Tealium

Adobe Launch

Overview

When deploying via tag manager:

High priority execution - Permutive should load before ad tags
Data layer integration - Pass page properties from your data layer
Consistent deployment - Use variables for credentials and properties

Google Tag Manager

Step 1: Create Permutive SDK Tag

Go to Tags > New
Click Tag Configuration > Custom HTML
Name it “Permutive SDK”
Add the SDK code:

<script>
  !function(e,o,n,i){if(!e){e=e||{},window.permutive=e,e.q=[];var t=function(){return([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,function(e){return(e^(window.crypto||window.msCrypto).getRandomValues(new Uint8Array(1))[0]&15>>e/4).toString(16)})};e.config=i||{},e.config.apiKey=o,e.config.workspaceId=n,e.config.environment=e.config.environment||"production",(window.crypto||window.msCrypto)&&(e.config.viewId=t());for(var g=["addon","identify","track","trigger","query","segment","segments","ready","on","once","user","consent"],r=0;r<g.length;r++){var w=g[r];e[w]=function(o){return function(){var n=Array.prototype.slice.call(arguments,0);e.q.push({functionName:o,arguments:n})}}(w)}}}(window.permutive,"{{Permutive API Key}}","{{Permutive Workspace ID}}",{});
</script>
<script async src="https://{{Permutive Organization ID}}.edge.permutive.app/{{Permutive Workspace ID}}-web.js"></script>

Step 2: Create Credential Variables

Go to Variables > User-Defined Variables > New
Create a Constant variable for API Key:
- Name: Permutive API Key
- Value: Your API key
Create a Constant variable for Workspace ID:
- Name: Permutive Workspace ID
- Value: Your workspace ID

Step 3: Set Up Trigger

Under the tag, click Triggering
Select All Pages trigger
Click Advanced Settings > Tag Firing Options
Set Tag firing priority to 9999 (highest priority)

Step 4: Create Web Addon Tag

Create another Custom HTML tag named “Permutive Web Addon”
Add the web addon code:

<script>
  permutive.addon('web', {
    page: {
      type: '{{Page Type}}',
      article: {
        title: '{{Page Title}}',
        categories: {{Page Categories}},
        authors: {{Page Authors}}
      }
    }
  });
</script>

Set trigger to All Pages
Set Tag Sequencing to fire after “Permutive SDK” tag

Step 5: Create Data Layer Variables

Create variables to read from your data layer:

Page Type (Data Layer Variable)
- Variable Name: page.type
Page Title (Data Layer Variable)
- Variable Name: page.title
- Or use built-in {{Page Title}}

Page Categories (Custom JavaScript Variable)

function() {
  var dl = window.dataLayer || [];
  for (var i = 0; i < dl.length; i++) {
    if (dl[i].page && dl[i].page.categories) {
      return dl[i].page.categories;
    }
  }
  return [];
}

Step 6: Data Layer Setup

On your website, push data to the data layer before GTM loads:

<script>
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    page: {
      type: 'article',
      title: 'Article Title',
      categories: ['news', 'technology'],
      authors: ['Jane Smith']
    }
  });
</script>
<!-- GTM Container -->

Complete GTM Example

Tag 1: Permutive SDK

<script>
  !function(e,o,n,i){if(!e){e=e||{},window.permutive=e,e.q=[];var t=function(){return([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,function(e){return(e^(window.crypto||window.msCrypto).getRandomValues(new Uint8Array(1))[0]&15>>e/4).toString(16)})};e.config=i||{},e.config.apiKey=o,e.config.workspaceId=n,e.config.environment=e.config.environment||"production",(window.crypto||window.msCrypto)&&(e.config.viewId=t());for(var g=["addon","identify","track","trigger","query","segment","segments","ready","on","once","user","consent"],r=0;r<g.length;r++){var w=g[r];e[w]=function(o){return function(){var n=Array.prototype.slice.call(arguments,0);e.q.push({functionName:o,arguments:n})}}(w)}}}(window.permutive,"{{Permutive API Key}}","{{Permutive Workspace ID}}",{});
</script>
<script async src="https://{{Permutive Organization ID}}.edge.permutive.app/{{Permutive Workspace ID}}-web.js"></script>

Trigger: All Pages
Priority: 9999

Tag 2: Permutive Web Addon

<script>
  (function() {
    var pageType = {{DL - Page Type}} || 'page';
    var pageTitle = {{Page Title}};
    var pageCategories = {{DL - Page Categories}} || [];

    permutive.addon('web', {
      page: {
        type: pageType,
        article: pageType === 'article' ? {
          title: pageTitle,
          categories: pageCategories
        } : undefined
      }
    });
  })();
</script>

Trigger: All Pages
Tag Sequencing: After “Permutive SDK”

Tealium

Step 1: Create JavaScript Code Extension

Go to Extensions > Add Extension
Select JavaScript Code
Set Scope to Pre Loader (runs before all tags)
Add the SDK code:

// Permutive SDK Loader
!function(e,o,n,i){if(!e){e=e||{},window.permutive=e,e.q=[];var t=function(){return([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,function(e){return(e^(window.crypto||window.msCrypto).getRandomValues(new Uint8Array(1))[0]&15>>e/4).toString(16)})};e.config=i||{},e.config.apiKey=o,e.config.workspaceId=n,e.config.environment=e.config.environment||"production",(window.crypto||window.msCrypto)&&(e.config.viewId=t());for(var g=["addon","identify","track","trigger","query","segment","segments","ready","on","once","user","consent"],r=0;r<g.length;r++){var w=g[r];e[w]=function(o){return function(){var n=Array.prototype.slice.call(arguments,0);e.q.push({functionName:o,arguments:n})}}(w)}}}(window.permutive,b["permutive_api_key"],b["permutive_workspace_id"],{});

// Load SDK
(function() {
  var script = document.createElement('script');
  script.src = 'https://' + b["permutive_organization_id"] + '.edge.permutive.app/' + b["permutive_workspace_id"] + '-web.js';
  script.async = true;
  document.head.appendChild(script);
})();

Step 2: Set Up Data Layer Variables

In Tealium, map your data layer to variables:

permutive_api_key → Your public API key
permutive_workspace_id → Your workspace ID
permutive_organization_id → Your organization ID
page_type → Page type
page_title → Page title
page_categories → Categories array

Step 3: Create Web Addon Extension

Add another JavaScript Code extension with All Tags scope:

// Permutive Web Addon
permutive.addon('web', {
  page: {
    type: b["page_type"] || 'page',
    article: {
      title: b["page_title"],
      categories: b["page_categories"] || []
    }
  }
});

Step 4: Configure Execution Order

Set the SDK loader extension order to 1 (first)
Set the web addon extension order to 2 (second)

Adobe Launch

Step 1: Create Core Extension Action

Go to Rules > Add Rule
Name it “Permutive SDK”
Under Events, add:
- Extension: Core
- Event Type: Library Loaded (Page Top)

Step 2: Add SDK Action

Under Actions, click Add
Select:
- Extension: Core
- Action Type: Custom Code
- Language: JavaScript
Check Execute globally
Add the SDK code:

// Permutive SDK
!function(e,o,n,i){if(!e){e=e||{},window.permutive=e,e.q=[];var t=function(){return([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,function(e){return(e^(window.crypto||window.msCrypto).getRandomValues(new Uint8Array(1))[0]&15>>e/4).toString(16)})};e.config=i||{},e.config.apiKey=o,e.config.workspaceId=n,e.config.environment=e.config.environment||"production",(window.crypto||window.msCrypto)&&(e.config.viewId=t());for(var g=["addon","identify","track","trigger","query","segment","segments","ready","on","once","user","consent"],r=0;r<g.length;r++){var w=g[r];e[w]=function(o){return function(){var n=Array.prototype.slice.call(arguments,0);e.q.push({functionName:o,arguments:n})}}(w)}}}(window.permutive,_satellite.getVar('Permutive API Key'),_satellite.getVar('Permutive Workspace ID'),{});

// Load SDK
(function() {
  var script = document.createElement('script');
  script.src = 'https://' + _satellite.getVar('Permutive Organization ID') + '.edge.permutive.app/' + _satellite.getVar('Permutive Workspace ID') + '-web.js';
  script.async = true;
  document.head.appendChild(script);
})();

Step 3: Create Data Elements

Go to Data Elements > Add Data Element
Create these data elements:
- Permutive API Key (Constant)
- Permutive Workspace ID (Constant)
- Permutive Organization ID (Constant)
- Page Type (JavaScript Variable or Custom Code)
- Page Categories (JavaScript Variable or Custom Code)

Step 4: Create Web Addon Rule

Create a new rule “Permutive Web Addon”
Event: DOM Ready
Add Custom Code action:

permutive.addon('web', {
  page: {
    type: _satellite.getVar('Page Type') || 'page',
    article: {
      title: document.title,
      categories: _satellite.getVar('Page Categories') || []
    }
  }
});

Step 5: Set Rule Order

Set “Permutive SDK” rule order to 1
Set “Permutive Web Addon” rule order to 10

Data Layer Best Practices

Standardize Your Data Layer

Use consistent property names across your site:

// Recommended data layer structure
window.dataLayer = window.dataLayer || [];
dataLayer.push({
  event: 'pageview',
  page: {
    type: 'article',        // article, homepage, section, video
    title: 'Page Title',
    categories: ['cat1', 'cat2'],
    tags: ['tag1', 'tag2'],
    authors: ['Author Name']
  },
  user: {
    isLoggedIn: true,
    hashedEmail: 'abc123...'  // SHA-256 hashed
  }
});

Handle Identity in Tag Manager

// In a separate tag, after SDK loads
if (dataLayer) {
  for (var i = 0; i < dataLayer.length; i++) {
    var data = dataLayer[i];
    if (data.user && data.user.hashedEmail) {
      permutive.identify([
        { tag: 'email_sha256', id: data.user.hashedEmail }
      ]);
      break;
    }
  }
}

Troubleshooting Tag Manager Deployments

Tags firing in wrong order

Problem: Web addon fires before SDK loads.Solutions:

Use tag sequencing/ordering features
Set SDK tag priority to highest (e.g., 9999)
Use permutive.ready() in dependent tags

Variables not resolving

Problem: Data layer variables return undefined.Solutions:

Verify data layer is populated before GTM loads
Check variable names match exactly
Use default values: {{Variable}} || 'default'
Debug with GTM Preview mode

SDK not loading consistently

Problem: SDK sometimes loads, sometimes doesn’t.Solutions:

Check trigger conditions
Verify no JavaScript errors blocking execution
Ensure async script loading works in your environment
Test with tag manager debug/preview mode

Consent not working with tag manager

Problem: Events not tracking with consent management.Solution: Create a consent tag that fires before web addon:

// Consent Tag (fire when CMP grants consent)
permutive.consent({ opt_in: true, token: 'consent_token' });

Then use tag sequencing to fire web addon after consent.

Best Practices

Use Variables for Credentials

Never hardcode credentials directly in tags. Use tag manager variables for easy updates across environments.

Test in Preview/Debug Mode

Always test tag firing order and variable values in the tag manager’s preview mode before publishing.

Document Your Setup

Keep notes on:

Tag names and purposes
Variable mappings
Data layer requirements
Firing order dependencies

Version Control

Use tag manager’s versioning features and maintain a changelog of deployments.

Installation

All installation methods

Initialization

Configuration options

Verification

Verify your integration

Consent

Consent with tag managers

Get Started

Products

SDKs

Governance

Tag Manager Integration

Google Tag Manager

Tealium

Adobe Launch

Overview

Google Tag Manager

Step 1: Create Permutive SDK Tag

Step 2: Create Credential Variables

Step 3: Set Up Trigger

Step 4: Create Web Addon Tag

Step 5: Create Data Layer Variables

Step 6: Data Layer Setup

Complete GTM Example

Tealium

Step 1: Create JavaScript Code Extension

Step 2: Set Up Data Layer Variables

Step 3: Create Web Addon Extension

Step 4: Configure Execution Order

Adobe Launch

Step 1: Create Core Extension Action

Step 2: Add SDK Action

Step 3: Create Data Elements

Step 4: Create Web Addon Rule

Step 5: Set Rule Order

Data Layer Best Practices

Standardize Your Data Layer

Handle Identity in Tag Manager

Troubleshooting Tag Manager Deployments

Best Practices

Installation

Initialization

Verification

Consent

Get Started

Products

SDKs

Governance

Google Tag Manager

Tealium

Adobe Launch

​Overview

​Google Tag Manager

​Step 1: Create Permutive SDK Tag

​Step 2: Create Credential Variables

​Step 3: Set Up Trigger

​Step 4: Create Web Addon Tag

​Step 5: Create Data Layer Variables

​Step 6: Data Layer Setup

​Complete GTM Example

​Tealium

​Step 1: Create JavaScript Code Extension

​Step 2: Set Up Data Layer Variables

​Step 3: Create Web Addon Extension

​Step 4: Configure Execution Order

​Adobe Launch

​Step 1: Create Core Extension Action

​Step 2: Add SDK Action

​Step 3: Create Data Elements

​Step 4: Create Web Addon Rule

​Step 5: Set Rule Order

​Data Layer Best Practices

​Standardize Your Data Layer

​Handle Identity in Tag Manager

​Troubleshooting Tag Manager Deployments

​Best Practices

​Related Documentation

Installation

Initialization

Verification

Consent

Overview

Google Tag Manager

Step 1: Create Permutive SDK Tag

Step 2: Create Credential Variables

Step 3: Set Up Trigger

Step 4: Create Web Addon Tag

Step 5: Create Data Layer Variables

Step 6: Data Layer Setup

Complete GTM Example

Tealium

Step 1: Create JavaScript Code Extension

Step 2: Set Up Data Layer Variables

Step 3: Create Web Addon Extension

Step 4: Configure Execution Order

Adobe Launch

Step 1: Create Core Extension Action

Step 2: Add SDK Action

Step 3: Create Data Elements

Step 4: Create Web Addon Rule

Step 5: Set Rule Order

Data Layer Best Practices

Standardize Your Data Layer

Handle Identity in Tag Manager

Troubleshooting Tag Manager Deployments

Best Practices

Related Documentation