WordPress GTM Integration | Blue Frog Docs

WordPress GTM Integration

Integrate Google Tag Manager with WordPress for centralized tag management.

WordPress GTM Integration

Complete guide to setting up Google Tag Manager (GTM) on your WordPress site for centralized tracking and tag management.

Overview

Google Tag Manager provides a powerful, centralized solution for managing tracking codes on WordPress. With numerous implementation options including plugins and manual installation, WordPress offers flexible GTM integration suited to any skill level.

Why Use GTM with WordPress?

GTM provides powerful tag management benefits:

  • Centralized Management: Control all tracking from one interface
  • No Theme Edits: Add/modify tags without touching theme files
  • Version Control: Track changes and roll back if needed
  • Preview Mode: Test tags before publishing
  • Advanced Triggers: Fire tags based on complex conditions
  • WooCommerce Support: Full ecommerce tracking
  • Plugin Compatibility: Works with major WordPress plugins

Prerequisites

Before implementing GTM on WordPress:

  1. GTM Account: Create a free account at tagmanager.google.com
  2. Container: Create a Web container for your site
  3. WordPress Access: Admin access to your WordPress site
  4. Theme/Plugin Access: Ability to install plugins or edit theme

Installation Methods

Multiple plugins make GTM installation simple.

Option A: Google Tag Manager for WordPress (DuracellTomi)

Most popular and feature-rich option.

  1. In WordPress admin, go to Plugins > Add New
  2. Search for "Google Tag Manager for WordPress"
  3. Install and activate Google Tag Manager for WordPress by Thomas Geiger
  4. Go to Settings > Google Tag Manager
  5. Enter your GTM Container ID (GTM-XXXXXX)
  6. Configure integration settings:
    • Enable data layer
    • Set placement options
    • Configure WooCommerce (if applicable)
  7. Click Save Changes

Features include:

  • Automatic data layer implementation
  • WooCommerce integration
  • Contact Form 7 tracking
  • EasyDigitalDownloads support
  • Enhanced ecommerce events

Option B: GTM4WP (Alternative)

Lightweight alternative:

  1. Install GTM4WP plugin
  2. Go to Settings > Google Tag Manager
  3. Enter Container ID
  4. Configure basic options
  5. Save settings

Option C: Insert Headers and Footers

For manual code injection:

  1. Install Insert Headers and Footers plugin
  2. Go to Settings > Insert Headers and Footers
  3. Paste GTM head snippet in Scripts in Header:
<!-- 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','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
  1. Paste GTM body snippet in Scripts in Body:
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
  1. Save settings

Method 2: Manual Theme Installation

For developers who prefer theme-level implementation:

  1. Access your theme files via Appearance > Theme File Editor or FTP
  2. Open header.php
  3. Add GTM head snippet immediately after opening <head> tag
  4. Add GTM body snippet immediately after opening <body> tag
  5. Save changes

Note: Use a child theme to prevent updates from overwriting changes.

Method 3: functions.php Method

Add GTM via WordPress hooks:

<?php
// Add GTM to head
function add_gtm_head() {
?>
<!-- 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','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
<?php
}
add_action('wp_head', 'add_gtm_head', 1);

// Add GTM to body
function add_gtm_body() {
?>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<?php
}
add_action('wp_body_open', 'add_gtm_body', 1);
?>

Data Layer Implementation

Basic WordPress Data Layer

Add to your theme or use the GTM plugin's built-in data layer:

<?php
function wordpress_data_layer() {
  global $post;
  ?>
  <script>
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    'postID': '<?php echo is_singular() ? get_the_ID() : ''; ?>',
    'postType': '<?php echo is_singular() ? get_post_type() : ''; ?>',
    'postAuthor': '<?php echo is_singular() ? get_the_author() : ''; ?>',
    'postCategories': <?php echo is_singular() ? json_encode(wp_get_post_categories(get_the_ID(), array('fields' => 'names'))) : '[]'; ?>,
    'userLoggedIn': <?php echo is_user_logged_in() ? 'true' : 'false'; ?>,
    'userRole': '<?php echo is_user_logged_in() ? implode(',', wp_get_current_user()->roles) : 'guest'; ?>'
  });
  </script>
  <?php
}
add_action('wp_head', 'wordpress_data_layer', 0);
?>

WooCommerce Data Layer

For WooCommerce product pages:

<?php
function woocommerce_product_data_layer() {
  if (!is_product()) return;

  global $product;
  ?>
  <script>
  dataLayer.push({
    'event': 'productView',
    'ecommerce': {
      'detail': {
        'products': [{
          'id': '<?php echo $product->get_id(); ?>',
          'name': '<?php echo esc_js($product->get_name()); ?>',
          'price': '<?php echo $product->get_price(); ?>',
          'category': '<?php echo esc_js(strip_tags($product->get_categories())); ?>',
          'variant': '<?php echo $product->is_type('variable') ? 'variable' : 'simple'; ?>'
        }]
      }
    }
  });
  </script>
  <?php
}
add_action('wp_footer', 'woocommerce_product_data_layer');
?>

WooCommerce Add to Cart Event

<?php
function woocommerce_add_to_cart_data_layer() {
  ?>
  <script>
  jQuery(document).on('added_to_cart', function(event, fragments, cart_hash, button) {
    var productId = button.data('product_id');
    var productName = button.closest('.product').find('.woocommerce-loop-product__title').text();

    dataLayer.push({
      'event': 'addToCart',
      'ecommerce': {
        'add': {
          'products': [{
            'id': productId,
            'name': productName,
            'quantity': button.data('quantity') || 1
          }]
        }
      }
    });
  });
  </script>
  <?php
}
add_action('wp_footer', 'woocommerce_add_to_cart_data_layer');
?>

WooCommerce Purchase Tracking

Add to order received page:

<?php
function woocommerce_purchase_data_layer($order_id) {
  if (!$order_id) return;

  $order = wc_get_order($order_id);

  // Prevent duplicate tracking
  if ($order->get_meta('_ga_tracked')) return;

  $products = array();
  foreach ($order->get_items() as $item) {
    $product = $item->get_product();
    $products[] = array(
      'id' => $product->get_id(),
      'name' => $product->get_name(),
      'price' => $product->get_price(),
      'quantity' => $item->get_quantity()
    );
  }
  ?>
  <script>
  dataLayer.push({
    'event': 'purchase',
    'ecommerce': {
      'purchase': {
        'actionField': {
          'id': '<?php echo $order->get_order_number(); ?>',
          'revenue': '<?php echo $order->get_total(); ?>',
          'tax': '<?php echo $order->get_total_tax(); ?>',
          'shipping': '<?php echo $order->get_shipping_total(); ?>'
        },
        'products': <?php echo json_encode($products); ?>
      }
    }
  });
  </script>
  <?php

  $order->update_meta_data('_ga_tracked', 'yes');
  $order->save();
}
add_action('woocommerce_thankyou', 'woocommerce_purchase_data_layer');
?>

Common GTM Tags for WordPress

Google Analytics 4 Configuration

  1. Create GA4 Configuration tag
  2. Enter Measurement ID (G-XXXXXXXXXX)
  3. Trigger: All Pages
  4. Configure parameters

Meta Pixel Tag

  1. Create Custom HTML tag
  2. Paste Meta Pixel base code
  3. Trigger: All Pages
  4. Add conversion tracking
  1. Create Google Ads Conversion Tracking tag
  2. Enter Conversion ID and Label
  3. Trigger on purchase event
  4. Use revenue variable

Common Triggers

Page View Triggers

Trigger Name Type Conditions
All Pages Page View All pages
Homepage Page View Page Path equals /
Product Pages Page View Page Type equals product
Single Posts Page View Page Type equals post
Category Pages Page View Page Type equals category
Cart Page Page View Page Path contains /cart
Checkout Page View Page Path contains /checkout
Order Received Page View Page Path contains /order-received

Event Triggers

Trigger Name Type Conditions
Product View Custom Event Event equals productView
Add to Cart Custom Event Event equals addToCart
Purchase Custom Event Event equals purchase
Form Submit Form Submission All forms

WordPress-specific Triggers

Trigger Name Type Conditions
Logged In Users Page View Data Layer userLoggedIn equals true
Blog Posts Page View Data Layer postType equals post
WooCommerce Pages Page View Page URL contains /shop or /product

Built-in Variables

Enable these GTM variables:

  • Page URL
  • Page Hostname
  • Page Path
  • Referrer
  • Click Element
  • Click Classes
  • Click ID
  • Click URL
  • Click Text
  • Form Element
  • Form ID
  • Form Classes

Custom Variables

WordPress Post Type Variable

Type: Data Layer Variable Data Layer Variable Name: postType

User Login Status Variable

Type: Data Layer Variable Data Layer Variable Name: userLoggedIn

WooCommerce Product ID Variable

Type: Data Layer Variable Data Layer Variable Name: ecommerce.detail.products.0.id

Order Revenue Variable

Type: Data Layer Variable Data Layer Variable Name: ecommerce.purchase.actionField.revenue

Plugin-specific Tracking

Contact Form 7 Tracking

If using GTM for WordPress plugin, CF7 tracking is automatic. Manual setup:

<script>
document.addEventListener('wpcf7mailsent', function(event) {
  dataLayer.push({
    'event': 'contactForm7Submit',
    'formId': event.detail.contactFormId,
    'formTitle': event.detail.contactFormTitle
  });
}, false);
</script>

Gravity Forms Tracking

<script>
jQuery(document).on('gform_confirmation_loaded', function(event, formId){
  dataLayer.push({
    'event': 'gravityFormSubmit',
    'formId': formId
  });
});
</script>

WPForms Tracking

<script>
jQuery(document).on('wpformsAjaxSubmitSuccess', function(event, submit, form, data) {
  dataLayer.push({
    'event': 'wpFormSubmit',
    'formId': data.data.form_id
  });
});
</script>

Preview and Debug Mode

Using GTM Preview

  1. In GTM, click Preview
  2. Enter your WordPress site URL
  3. Click Connect
  4. Navigate through your site

Debugging Tips

Check data layer in browser console:

// View data layer
console.log(window.dataLayer);

// Monitor new events
dataLayer.push = function() {
  console.log('GTM Event:', arguments);
  Array.prototype.push.apply(this, arguments);
};

WordPress-specific Debugging

<?php
// Debug mode for logged-in admins
function gtm_debug_mode() {
  if (current_user_can('administrator')) {
    ?>
    <script>
    console.log('WordPress GTM Debug Mode');
    console.log('User Role:', '<?php echo implode(',', wp_get_current_user()->roles); ?>');
    console.log('Post Type:', '<?php echo get_post_type(); ?>');
    console.log('Data Layer:', window.dataLayer);
    </script>
    <?php
  }
}
add_action('wp_footer', 'gtm_debug_mode');
?>

Publishing Workflow

Pre-publish Checklist

  • Test all tags in Preview mode
  • Verify GA4 real-time data
  • Test WooCommerce transactions
  • Check form submissions
  • Test on different post types
  • Verify mobile functionality
  • Check page load performance

Publishing Steps

  1. Click Submit in GTM
  2. Add version name
  3. Document changes
  4. Click Publish
  5. Clear WordPress cache
  6. Test on live site

WordPress Cache Considerations

  • Clear cache after GTM changes
  • Test with cache plugins disabled initially
  • Verify GTM works with cache enabled
  • Common cache plugins: WP Rocket, W3 Total Cache, WP Super Cache

Troubleshooting

Issue Possible Cause Solution
GTM not loading Plugin conflict Deactivate plugins one by one
Tags not firing Wrong trigger Check trigger conditions
Duplicate events Multiple plugins Use only one GTM plugin
WooCommerce data missing AJAX cart Use WooCommerce hooks
Forms not tracked Form plugin compatibility Add custom tracking code
Purchase tracking twice No deduplication Add order meta check
Logged-in admin tracked No exclusion Add admin exclusion code
Cache prevents loading Caching plugin Exclude GTM from cache
Theme conflict Theme JavaScript Check browser console
Missing data layer Load order Ensure data layer loads first

WordPress-specific Considerations

WooCommerce Integration

The Google Tag Manager for WordPress plugin offers built-in WooCommerce support:

  • Automatic product impressions
  • Enhanced ecommerce tracking
  • Cart and checkout tracking
  • Purchase confirmation
  • Product clicks and views

Multisite Networks

For WordPress Multisite:

  • Install GTM plugin network-wide
  • Configure per-site container IDs
  • Use network admin for global settings
  • Test on each sub-site

Page Builders

GTM works with popular page builders:

  • Elementor: Add via theme or plugin
  • Divi: Use Divi > Theme Options > Integration
  • Beaver Builder: Compatible with plugins
  • WPBakery: Works with standard installation

Membership Plugins

Track member activities:

<?php
function member_data_layer() {
  if (function_exists('pmpro_hasMembershipLevel')) {
    $has_membership = pmpro_hasMembershipLevel();
    $level = $has_membership ? pmpro_getMembershipLevelForUser()-> name : 'none';
    ?>
    <script>
    dataLayer.push({
      'membershipStatus': '<?php echo $has_membership ? 'active' : 'none'; ?>',
      'membershipLevel': '<?php echo esc_js($level); ?>'
    });
    </script>
    <?php
  }
}
add_action('wp_head', 'member_data_layer', 5);
?>

Advanced Configuration

Exclude Admin Users

Prevent tracking admin users:

<?php
function exclude_admin_from_gtm() {
  if (current_user_can('administrator')) {
    ?>
    <script>
    window['ga-disable-GTM-XXXXXX'] = true;
    </script>
    <?php
  }
}
add_action('wp_head', 'exclude_admin_from_gtm', 0);
?>

Custom Post Type Tracking

<?php
function custom_post_type_data_layer() {
  if (is_singular('portfolio')) {
    ?>
    <script>
    dataLayer.push({
      'customPostType': 'portfolio',
      'portfolioCategory': '<?php echo get_the_terms(get_the_ID(), 'portfolio-category')[0]->name; ?>'
    });
    </script>
    <?php
  }
}
add_action('wp_footer', 'custom_post_type_data_layer');
?>

Search Tracking

<?php
function search_data_layer() {
  if (is_search()) {
    ?>
    <script>
    dataLayer.push({
      'event': 'search',
      'searchTerm': '<?php echo esc_js(get_search_query()); ?>',
      'searchResults': <?php echo $GLOBALS['wp_query']->found_posts; ?>
    });
    </script>
    <?php
  }
}
add_action('wp_footer', 'search_data_layer');
?>

Performance Optimization

Best Practices

  • Use a single GTM plugin
  • Limit total tags to under 20
  • Minimize custom HTML tags
  • Use async loading
  • Remove unused triggers
  • Optimize WooCommerce tracking

Performance Monitoring

<?php
function gtm_performance_tracking() {
  ?>
  <script>
  window.addEventListener('load', function() {
    var perfData = window.performance.timing;
    var pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;

    dataLayer.push({
      'event': 'performanceTiming',
      'pageLoadTime': pageLoadTime,
      'domContentLoaded': perfData.domContentLoadedEventEnd - perfData.navigationStart
    });
  });
  </script>
  <?php
}
add_action('wp_footer', 'gtm_performance_tracking', 999);
?>

Privacy and Compliance

GDPR Compliance

Implement consent management:

<?php
function gtm_consent_mode() {
  ?>
  <script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}

  gtag('consent', 'default', {
    'analytics_storage': 'denied',
    'ad_storage': 'denied',
    'wait_for_update': 500
  });

  // Update when consent is granted
  document.addEventListener('cookieConsentGranted', function() {
    gtag('consent', 'update', {
      'analytics_storage': 'granted',
      'ad_storage': 'granted'
    });
  });
  </script>
  <?php
}
add_action('wp_head', 'gtm_consent_mode', -1);
?>

Popular WordPress cookie consent plugins:

  • Cookie Notice & Compliance: GDPR/CCPA compliant
  • Complianz: Advanced consent management
  • CookieYes: Easy GTM integration
  • Borlabs Cookie: German-market leader

Testing Checklist

  • GTM container loads on all pages
  • Data layer populates correctly
  • Post/page data tracks properly
  • WooCommerce events fire
  • Form submissions work
  • Purchase tracking accurate
  • Admin users excluded (if configured)
  • No console errors
  • Mobile functionality works
  • Cache plugins compatible
  • Cross-browser compatibility

Additional Resources

↑ Back to top
// SYS.FOOTER