Google Tag Manager
Google Tag Manager integration for centralized tag management and marketing analytics.
Table of Contents
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 -->
{% 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 %}
Body Noscript
<!-- _includes/analytics/google-tag-manager-body.html -->
{% 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 %}
Layout Integration
<head>
{% include analytics/google-tag-manager-head.html %}
</head>
<body>
{% include analytics/google-tag-manager-body.html %}
<!-- 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': 'Google Tag Manager'
});
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;
}
Cookie Consent
Consent Mode
// Set default consent state
dataLayer.push({
'event': 'default_consent',
'analytics_storage': 'denied',
'ad_storage': 'denied'
});
Update on Consent
function updateConsent(analytics, ads) {
gtag('consent', 'update', {
'analytics_storage': analytics ? 'granted' : 'denied',
'ad_storage': ads ? 'granted' : 'denied'
});
}
Consent Mode Tags
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
Related
See also
- [[Analytics]]
- [[Google Analytics]]
- [[PostHog Analytics]]