Google Tag Manager
By Amr
Google Tag Manager integration for centralized tag management and marketing analytics.
Estimated reading time: 5 minutes
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