humanmade/hm-gtm

Google Tag Manager Tools for WordPress

Maintainers

Details

github.com/humanmade/hm-gtm

Source

Issues

Installs: 112 382

Dependents: 2

Suggesters: 0

Security: 0

Stars: 32

Watchers: 22

Forks: 5

Open Issues: 3

Type:wordpress-plugin

2.1.1 2022-07-18 12:00 UTC

GPL-3.0 0f7c9b6f5b06f1cb83c404b8141cfcab4eceac64

  • Robert O'Rourke <rob.woop@humanmade.com>

This package is auto-updated.

Last update: 2023-11-18 15:07:04 UTC

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 to HM\GTM
  • The HM_GTM\tag() function has been changed to gtm_tag()
  • The default dataLayer has been completely overhauled

Usage

Once the plugin is installed and activated there are 2 places you can configure:

  1. On the general settings page in admin add your container ID eg. GTM-123ABC
  2. 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' );