Google Tag Manager¶

Integrate Google Tag Manager (GTM) for centralized tag management without code changes.

Overview¶

GTM allows you to manage:

Analytics tracking
Marketing pixels
Conversion tracking
A/B testing
Custom JavaScript

Quick Start¶

1. Create GTM Container¶

Go to Google Tag Manager
Create an account and container
Copy your Container ID (GTM-XXXXXXX)

2. Configure Jekyll¶

# _config.yml
google_tag_manager:
  container_id: 'GTM-XXXXXXX'

3. Add GTM Includes¶

The theme automatically includes GTM when configured.

Implementation¶

Head Script¶

<!-- _includes/analytics/google-tag-manager-head.html -->
{% raw %}{% if jekyll.environment == 'production' and site.google_tag_manager.container_id %}
<!-- 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','{{ site.google_tag_manager.container_id }}');</script>
<!-- End Google Tag Manager -->
{% endif %}{% endraw %}

Body Noscript¶

<!-- _includes/analytics/google-tag-manager-body.html -->
{% raw %}{% if jekyll.environment == 'production' and site.google_tag_manager.container_id %}
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ site.google_tag_manager.container_id }}"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
{% endif %}{% endraw %}

Layout Integration¶

<head>
  {% raw %}{% include analytics/google-tag-manager-head.html %}{% endraw %}
</head>
<body>
  {% raw %}{% include analytics/google-tag-manager-body.html %}{% endraw %}
  <!-- content -->
</body>

Data Layer¶

Basic Usage¶

// Push events to dataLayer
window.dataLayer = window.dataLayer || [];
dataLayer.push({
  'event': 'buttonClick',
  'buttonName': 'signup'
});

Page Variables¶

dataLayer.push({
  'pageType': 'article',
  'pageCategory': 'docs',
  'pageTitle': '{{ page.title }}'
});

User Data¶

dataLayer.push({
  'userLoggedIn': true,
  'userType': 'subscriber'
});

Common Tags¶

Google Analytics 4¶

In GTM:

Add new tag → GA4 Configuration
Enter Measurement ID
Trigger: All Pages

Facebook Pixel¶

Add new tag → Custom HTML
Paste Facebook Pixel code
Trigger: All Pages

LinkedIn Insight¶

Add new tag → Custom HTML
Paste LinkedIn code
Trigger: All Pages

Triggers¶

Common Trigger Types¶

Type	Use Case
Page View	Track all page visits
Click	Button/link clicks
Form Submission	Contact forms
Scroll Depth	Content engagement
Timer	Time on page
Custom Event	DataLayer events

Custom Event Trigger¶

// Trigger this from code
dataLayer.push({
  'event': 'formSubmit',
  'formId': 'contactForm'
});

In GTM: Create trigger for event name "formSubmit"

Variables¶

Built-in Variables¶

Enable in GTM:

Page URL
Page Hostname
Page Path
Referrer
Click Element
Click URL
Click Text

Data Layer Variables¶

Access dataLayer values:

Variables → New → Data Layer Variable
Set variable name (e.g., pageTitle)

JavaScript Variables¶

// Custom JavaScript variable
function() {
  return document.title;
}

// Set default consent state
dataLayer.push({
  'event': 'default_consent',
  'analytics_storage': 'denied',
  'ad_storage': 'denied'
});

function updateConsent(analytics, ads) {
  gtag('consent', 'update', {
    'analytics_storage': analytics ? 'granted' : 'denied',
    'ad_storage': ads ? 'granted' : 'denied'
  });
}

In GTM, configure tags to respect consent:

Tag Settings → Consent Settings
Require consent for firing

Debugging¶

Preview Mode¶

Click "Preview" in GTM
Enter your site URL
Debug panel shows tag firing

Debug Panel¶

Shows:

Tags fired
Variables values
DataLayer events
Errors

Console Logging¶

// Log all dataLayer pushes
(function() {
  var push = dataLayer.push;
  dataLayer.push = function() {
    console.log('dataLayer push:', arguments[0]);
    return push.apply(this, arguments);
  };
})();

Best Practices¶

Organization¶

Use consistent naming conventions
Create folders for related tags
Document custom tags
Use workspaces for changes

Performance¶

Minimize custom HTML tags
Use built-in tags when available
Set appropriate triggers
Avoid "All Pages" for heavy tags

Security¶

Review all third-party tags
Limit container access
Enable two-factor authentication
Audit container regularly

Troubleshooting¶

Tags Not Firing¶

Check trigger conditions
Verify in Preview mode
Check consent requirements
Review blocking triggers

Container Not Loading¶

Verify container ID
Check environment (production)
Look for JS errors
Verify include placement

DataLayer Issues¶

Check dataLayer exists before push
Verify event names match
Check variable scope
Use console logging