humanmade / hm-gtm
Google Tag Manager Tools for WordPress
Installs: 112 382
Dependents: 2
Suggesters: 0
Security: 0
Stars: 32
Watchers: 22
Forks: 5
Open Issues: 3
Type:wordpress-plugin
README
Google Tag Manager template tags and settings tool.
Important: V2 Release breaking changes
Version 2 brings some breaking changes that may require you to update your implementation and any data layer variables you have set up in Tag Manager. The key differences are:
- The
HM_GTM
namespace has been changed toHM\GTM
- The
HM_GTM\tag()
function has been changed togtm_tag()
- The default
dataLayer
has been completely overhauled
Usage
Once the plugin is installed and activated there are 2 places you can configure:
- On the general settings page in admin add your container ID eg.
GTM-123ABC
- For a multisite install you can set a network wide container ID on the network settings screen
No script fallback
If you wish to support the fallback iframe for devices without javascript add the following code just after the opening <body>
tag in your theme:
<?php do_action( 'after_body' ); ?>
Data Layer
GTM offers a dataLayer
which allows you pass arbitrary data that can be used to modify which tags are added to your site.
This plugin adds some default information such as page author, tags and categories and provides a simple filter for adding in your own custom key/value pairs.
<?php add_filter( 'hm_gtm_data_layer', function( $data ) { $data['my_var'] = 'hello'; return $data; } ); ?>
Find out more about using the dataLayer
variable here.
You can explore and view the dataLayer
variables by previewing your container and using the overlay on your website.
Custom event tracking
By default the plugin will look for elements with special data attributes in your markup and listen to the specified event to push events to the data layer.
The data attributes are:
data-gtm-on
: enum [click|submit|keyup|focus|blur] The JS event to listen for, defaults to 'click'.data-gtm-event
: string The name or action of the event eg. "play".data-gtm-category
: string Optional group the event belongs to.data-gtm-label
: string Optional human readable label for the event.data-gtm-value
: number Optional numeric value associated with the event eg. product price.data-gtm-fields
: string Optional extra data provided as encoded JSON.data-gtm-var
: string Optionally override the default dataLayer variable name for this event.
Example:
<button data-gtm-on="click" data-gtm-event="play" data-gtm-category="videos" data-gtm-label="Featured Promotional Video" > Play video </button>
There is also a helper function to return these data attributes called get_gtm_data_attributes()
.
To deactivate custom event tracking use the following code:
add_filter( 'hm_gtm_enable_event_tracking', '__return_false' );