Google Tag Manager

Overview

Google Tag Manager (GTM) provides a flexible way to deploy Cryptique without modifying your website’s source code. This guide covers setup, configuration, and best practices.

Quick Setup

Open Google Tag Manager

Go to tagmanager.google.com and select your container

Create New Tag

Click Tags → New → Tag Configuration → Custom HTML

Add Cryptique Script

Paste the following code:

<script>
  var script = document.createElement('script');
  script.src = 'https://cdn.cryptique.io/scripts/analytics/1.0.1/cryptique.script.min.js';  
  script.setAttribute('site-id', 'YOUR_SITE_ID');
  script.setAttribute('auto-events', 'true');
  document.head.appendChild(script);
</script>

Replace YOUR_SITE_ID with your actual Site ID from Cryptique dashboard.

Set Trigger

Click Triggering → All Pages (or your preferred trigger)

Save and Publish

Click Save, then Submit to publish your changes

Configuration Options

Basic Configuration

<script>
  var script = document.createElement('script');
  script.src = 'https://cdn.cryptique.io/scripts/analytics/1.0.1/cryptique.script.min.js';  
  script.setAttribute('site-id', 'YOUR_SITE_ID');
  script.setAttribute('auto-events', 'true');
  document.head.appendChild(script);
</script>

Full Configuration

<script>
  var script = document.createElement('script');
  script.src = 'https://cdn.cryptique.io/scripts/analytics/1.0.1/cryptique.script.min.js';  
  script.setAttribute('site-id', 'YOUR_SITE_ID');
  script.setAttribute('auto-events', 'true');
  script.setAttribute('auto-events-disabled-paths', '/admin,/internal,/checkout');
  script.setAttribute('auto-events-disabled-events', 'text_selection,copy_action');
  document.head.appendChild(script);
</script>

Configuration Attributes

Attribute	Type	Default	Description
`site-id`	string	required	Your Cryptique site identifier
`auto-events`	boolean	`true`	Enable automatic event tracking
`auto-events-disabled-paths`	string	`''`	Comma-separated URL paths to exclude
`auto-events-disabled-events`	string	`''`	Comma-separated auto-events to disable

Using GTM Variables

You can use GTM variables in your configuration:

Site ID from Variable

Create a Constant variable for your Site ID
Reference it in the tag:

<script>
  var script = document.createElement('script');
  script.src = 'https://cdn.cryptique.io/scripts/analytics/1.0.1/cryptique.script.min.js';  
  script.setAttribute('site-id', '{{Cryptique Site ID}}');
  script.setAttribute('auto-events', 'true');
  document.head.appendChild(script);
</script>

Environment-Based Configuration

Use GTM’s environment feature for staging vs production:

<script>
  var siteId = '{{Cryptique Site ID}}'; // Different per environment
  var script = document.createElement('script');
  script.src = 'https://cdn.cryptique.io/scripts/analytics/1.0.1/cryptique.script.min.js';  
  script.setAttribute('site-id', siteId);
  script.setAttribute('auto-events', 'true');
  document.head.appendChild(script);
</script>

Custom Event Tracking

Via Data Layer

Push events to GTM’s data layer, then forward to Cryptique: On your website:

dataLayer.push({
  event: 'cryptique_event',
  eventName: 'button_clicked',
  eventProperties: {
    button_name: 'signup',
    button_location: 'header'
  }
});

GTM Tag (Custom HTML):

<script>
  if (window.Cryptique) {
    var eventName = '{{DL - eventName}}';
    var eventProps = '{{DL - eventProperties}}';
    window.Cryptique.track(eventName, eventProps);
  }
</script>

Trigger: Custom Event = cryptique_event

Direct Tracking

After Cryptique loads, you can track directly:

<script>
  // Wait for Cryptique to be available
  function trackWithCryptique(eventName, properties) {
    if (window.Cryptique) {
      window.Cryptique.track(eventName, properties);
    } else {
      setTimeout(function() {
        trackWithCryptique(eventName, properties);
      }, 100);
    }
  }
  
  trackWithCryptique('gtm_custom_event', {
    source: 'gtm',
    trigger: '{{Trigger Name}}'
  });
</script>

User Identification

Identify Users via GTM

Create a tag to identify users when they log in:

<script>
  if (window.Cryptique && '{{User ID}}') {
    window.Cryptique.identify('{{User ID}}');
    window.Cryptique.people.set({
      email: '{{User Email}}',
      name: '{{User Name}}',
      plan: '{{User Plan}}'
    });
  }
</script>

Trigger: Custom Event = user_logged_in

Wallet Connection

Track wallet connections:

<script>
  if (window.Cryptique && '{{Wallet Address}}') {
    window.Cryptique.walletAddress('{{Wallet Address}}');
  }
</script>

Trigger: Custom Event = wallet_connected

Trigger Configurations

All Pages (Recommended)

Load Cryptique on every page:

Trigger Type: Page View
Trigger fires on: All Page Views

Specific Pages Only

Load only on certain pages:

Trigger Type: Page View
Trigger fires on: Some Page Views
Condition: Page Path contains /app

Exclude Pages

Exclude admin or internal pages:

Create trigger: Page View - Some Page Views
Condition: Page Path does not contain /admin
AND Page Path does not contain /internal

Load only after consent:

Trigger Type: Custom Event
Event name: consent_granted

// After user grants consent
dataLayer.push({ event: 'consent_granted' });

Tag Sequencing

Load Order

Ensure Cryptique loads before dependent tags:

Open your Cryptique tag
Go to Advanced Settings → Tag Sequencing
Check “Fire a tag before [Cryptique] fires” if needed
Check “Fire a tag after [Cryptique] fires” for dependent tags

Wait for Cryptique

For tags that depend on Cryptique:

<script>
  function waitForCryptique(callback) {
    if (window.Cryptique) {
      callback();
    } else {
      setTimeout(function() {
        waitForCryptique(callback);
      }, 50);
    }
  }
  
  waitForCryptique(function() {
    // Your code that needs Cryptique
    window.Cryptique.track('dependent_event');
  });
</script>

Debugging

GTM Preview Mode

Click Preview in GTM
Navigate to your website
GTM debug panel shows:
- Tag firing status
- Variable values
- Data layer events

Verify Cryptique Loading

In browser console:

// Check if Cryptique loaded
console.log(window.Cryptique); // Should show Cryptique object

// Check initialization
console.log(window.Cryptique.getSiteId()); // Should show your Site ID

Network Tab

Check for requests to:

cdn.cryptique.io (script load)
api.cryptique.io (event tracking)

Common Issues

Tag not firing

Check trigger conditions in GTM Preview
Verify container is published
Check for JavaScript errors in console

Events not appearing in Cryptique

Verify Site ID is correct
Check domain is whitelisted in Cryptique
Look for blocked requests (ad blockers)
Verify in Network tab that API calls succeed

Double tracking

Ensure Cryptique is only loaded once
Check for duplicate tags in GTM
Don’t load via both GTM and direct script

Script blocked by CSP

Add to your Content Security Policy:

script-src 'self' https://cdn.cryptique.io;
connect-src 'self' https://api.cryptique.io;

Best Practices

Use Folders

Organize your Cryptique tags:

Tags/
├── Cryptique/
│   ├── Cryptique - Base Script
│   ├── Cryptique - Identify User
│   ├── Cryptique - Track Signup
│   └── Cryptique - Track Purchase

Naming Convention

Use clear, consistent names:

✅ Good:
"Cryptique - Base Script (All Pages)"
"Cryptique - Track Button Click"
"Cryptique - Identify Logged In User"

❌ Poor:
"Tag 1"
"New Tag"
"Custom HTML"

Version Control

Use GTM’s built-in versioning:

Add descriptions to each version
Name versions meaningfully: “Added Cryptique tracking”
Use workspaces for team collaboration

Testing

Always test before publishing:

Use GTM Preview mode
Test on staging environment first
Verify events appear in Cryptique
Check for console errors

Next Steps

Auto-Events

Configure automatic tracking

SDK Reference

Track custom events

BLOCKCHAIN

TAG MANAGERS

Google Tag Manager

Overview

Quick Setup

Configuration Options

Basic Configuration

Full Configuration

Configuration Attributes

Using GTM Variables

Site ID from Variable

Environment-Based Configuration

Custom Event Tracking

Via Data Layer

Direct Tracking

User Identification

Identify Users via GTM

Wallet Connection

Trigger Configurations

All Pages (Recommended)

Specific Pages Only

Exclude Pages

Tag Sequencing

Load Order

Wait for Cryptique

Debugging

GTM Preview Mode

Verify Cryptique Loading

Network Tab

Common Issues

Best Practices

Use Folders

Naming Convention

Version Control

Testing

Next Steps

Auto-Events

SDK Reference

​Overview

​Quick Setup

​Configuration Options

​Basic Configuration

​Full Configuration

​Configuration Attributes

​Using GTM Variables

​Site ID from Variable

​Environment-Based Configuration

​Custom Event Tracking

​Via Data Layer

​Direct Tracking

​User Identification

​Identify Users via GTM

​Wallet Connection

​Trigger Configurations

​All Pages (Recommended)

​Specific Pages Only

​Exclude Pages

​Consent-Based Loading

​Tag Sequencing

​Load Order

​Wait for Cryptique

​Debugging

​GTM Preview Mode

​Verify Cryptique Loading

​Network Tab

​Common Issues

​Best Practices

​Use Folders

​Naming Convention

​Version Control

​Testing

​Next Steps

Auto-Events

SDK Reference

Overview

Quick Setup

Configuration Options

Basic Configuration

Full Configuration

Configuration Attributes

Using GTM Variables

Site ID from Variable

Environment-Based Configuration

Custom Event Tracking

Via Data Layer

Direct Tracking

User Identification

Identify Users via GTM

Wallet Connection

Trigger Configurations

All Pages (Recommended)

Specific Pages Only

Exclude Pages

Consent-Based Loading

Tag Sequencing

Load Order

Wait for Cryptique

Debugging

GTM Preview Mode

Verify Cryptique Loading

Network Tab

Common Issues

Best Practices

Use Folders

Naming Convention

Version Control

Testing

Next Steps