Context:

Last year we started tracking a few click events on selected Planet 4 sites via Google Tag Manager, often based on the element's IDs or classes. This usually demands an extensive custom setup in Tag Manager and is often less accurate. 

Tracking Methodology (updated)

As suggested by pvincent and sdeshmuk, we can work with data-* attributes instead of dataLayer events. This should facilitate the implementation while also allowing some more flexibility when setting up the events tags in Google Tag Manager. 

The idea is to implement a set of new data attributes with standard values. These will be used later to trigger events and define its category, action and label.

• Example: See image attached for using GTM's dataLayer variable to extract data attributes (gtm.element.dataset.target)**
• Useful Links: https://mixedanalytics.com/blog/value-data-attributes-javascript-gtm/

Task: 

• Investigate approach of using data-attributes done
• Investigate approach of using a Twig template to be used for all the events see below
• Implement data-attributes on elements:
  • data-ga-category
  • data-ga-action
  • data-ga-label 
• Implement data-attributes with the following standard values: 

•   Investigate and communicate with NROs using child themes to apply the same data attributes

Here are the screenshot linking the elements with the data-ga-action standard value:

  
 More Information:

To view all events standards and data-attributes structure proposed: "P4 Events Standards - 2020 Review" 

GTM Custom Templates Investigation:

Google Tag Manager's custom templates is "a suite of features designed to help brands, companies, and users create and share their own custom JavaScript and HTML setups with ease, while taking care that the code is optimized for delivery in the web browser" (source here). Templates use a customized, sandboxed version of JavaScript, and are helpful for adding custom tags and variables that are not natively supported by GTM (e.g. an analytics tracking tag for a vendor not natively supported by GTM or a Custom JavaScript variable that does something with a string). "This helps us to turn them into reusable templates which can, in turn, be shared with other users and containers via template export and import".

Julia's summary: For event tracking, we should use the Universal Analytics (GA) tag which is natively supported by Google Tag Manager. This means that the custom templates are not the best direct solution, since they are designed to add custom (and reusable) tags that are not supported by default.

By implementing the data-attributes on the elements, we could use GTM's default variables and triggers to extract the values and fire the events tags as necessary. This should keep the setup clean and objective, and avoid any changes since these data attributes are defined in Planet 4's master theme. Keeping it simple and avoiding custom codes in Google Tag Manager should also help us to maintain the tracking events since it doesn't require Javascript coding skills. That's why I would recommend using the data-attributes and the natively supported features for Universal Analytics for this tracking. 

Sources:

• Simo Ahava Guide to Custom Templates
• Bounteous Guide to Custom Templates

Next steps:

Julia should create the Google Tag Manager setup in all P4-NRO's containers.