Google Tag Manager and Drupal

GOOGLE TAG MANAGER AND DRUPAL Brian Perry April 15, 2020

WE COOL? Proprietary & Confidential 2

BRIAN PERRY • Lead Front End Dev at Bounteous • Rocking the Chicago ‘burbs • Lover of all things components… …and Nintendo d.o: brianperry twitter: bricomedy github: backlineint nintendo: wabrian brianperryinteractive.com 3

4

WE’VE ALL BEEN THERE… Client: “Add Analytics to my Website” Proprietary & Confidential You: drush en google_analytics 5

GA and Drupal TWO DISTINCT OPTIONS • The Google Analytics Module is: ‒ Great in a pinch ‒ Better than no analytics at all But… • Using Google Tag Manager is a better option if: ‒ You expect to customize beyond the defaults ‒ You want to be able to adjust data collection without always requiring developer intervention. Proprietary & Confidential 6

GA Module SETTINGS Proprietary & Confidential 7

GA Module SETTINGS TO CONSIDER • Web Property ID ‒ Won’t get anywhere without this • Tracking Scope ‒ Domains – single, one domain with subdomains, multiple top-level domains. ‒ Pages – excludes admin and user pages by default ‒ Roles – could be used to exclude internal roles for example • Advanced Tracking ‒ Users – Opt in or out, Track User ID ‒ Links and Downloads – Enabled by default ‒ Internal Search – requires config within GA Proprietary & Confidential 8

Advanced CUSTOM METRICS AND DIMENSIONS Proprietary & Confidential 9

Advanced PROCEED WITH CAUTION Proprietary & Confidential 10

WHY GOOGLE TAG MANAGER? Proprietary & Confidential 11 11

GTM What can people do on our site? • Learn About Us • Download Information (Specs, Product Sheets) • Watch Informational/Product Videos • Fill Out A Form (Request for Information/Contact Us) • Use an Online Tool (Calculator/Scheduler) • Submit an Application • Get Directions • Make a Purchase Proprietary & Confidential 12

GTM WHAT CAN PEOPLE DO? Google Analytics Default Extra Effort Needed Learn About Us • Basic tracking data like: • • Download Information • Watch Informational/Product Videos • Page views • Referrals • Fill Out A Form • Unique visitors • • Browser usage Use an Online Tool • and so on… • Submit an Application • Get Directions • Make a Purchase Proprietary & Confidential 13

GTM HOW DO WE COLLECT MORE? In order to add Google Analytics to our site, we need to be able to make changes to the site. Generally, we have two options: Add Code Proprietary & Confidential Use Tag Manager 14

GTM THE SPACE BETWEEN Google Tag Manager lives between your website and your users. Web Server Proprietary & Confidential ? Users Accessing 15

Introduction GOOGLE TAG MANAGER Google Tag Manager is a free tool that allows users to add tags – including conversion tracking, analytics, and remarketing – with just a few clicks. Proprietary & Confidential 16

GTM TAG MANAGER BENEFITS • Little coding required • Integrated tags with select third-party tools • Multiple users and permissions supported • Import solutions from others Proprietary & Confidential 17

GTM WHY DOES THIS MATTER? Reduce technical burden Separate site functionality from marketing & tagging Flexible, continuous improvement & tracking. Set It & Forget It Proprietary & Confidential 18

Proprietary & Confidential 19

GTM GTM DEBUG PANEL Proprietary & Confidential 20

GTM GTM AND DRUPAL Recommend a combination of: • Google Tag Manager Module • Data Layer Module Proprietary & Confidential 21

GTM GTM AND DRUPAL Google Tag Manager Module • Limited configuration required ‒ Add Container ID ‒ Review excluded paths/statuses Proprietary & Confidential 22

THE DATA LAYER Proprietary & Confidential Google Tag Manager 23

Data Layer The data layer has two main functions • It allows us to send server information directly to Google Tag Manager • GTM uses it to keep track of events that happen on the page The information we send is usually done programmatically and inserted into the page, anywhere ABOVE the Tag Manager snippet. (Drupal modules handle this for you) This could be done in PHP, .NET, etc… Proprietary & Confidential Google Tag Manager 24

Data Layer WHAT DOES IT LOOK LIKE? Proprietary & Confidential Google Tag Manager 25

GTM GTM AND DRUPAL Data Layer Module • Many configuration options • Default is a solid starting point ‒ Passes useful entity metadata to pages Proprietary & Confidential 26

Data Layer ADD DATA TO DATA LAYER Via Data Layer Module Configuration Proprietary & Confidential Google Tag Manager 27

Data Layer ADD DATA TO DATA LAYER Via Data Layer Module Hooks Proprietary & Confidential Google Tag Manager 28

Data Layer ADD DATA TO DATA LAYER Data from your server is added to the data layer on the page. Here we can see the output: Proprietary & Confidential Google Tag Manager 29

Data Layer ACCESS DATA IN GTM Data is accessible within GTM; create Data Layer variables to store the values. Proprietary & Confidential Google Tag Manager 30

Data Layer USE YOUR DATA IN GA Outcome: Data from your server is shared with Google Analytics and can be used for analysis/action. Which blog categories had the most engagement? How to Report Custom Dimensions in Google Analytics Proprietary & Confidential Google Tag Manager 31

Data Layer ADD INFO AFTER PAGE LOAD We can send information directly to the dataLayer after the page loads (when an action occurs), to be retrieved by GTM. dataLayer.push({‘event’: ‘event_name’}); Proprietary & Confidential Google Tag Manager 32

Data Layer EXAMPLES Call the push() API by modifying a button link to set an event when the button is clicked: <a href=”#” name=”button1” onclick=”dataLayer.push({‘event’: ‘button1-click’});” >Button 1</a> Adding Data Layer Variables to a Page Proprietary & Confidential Google Tag Manager 33

Data Layer EXAMPLES Call the push() API within a function: Adding Data Layer Variables to a Page Proprietary & Confidential Google Tag Manager 34

Data Layer USE YOUR DATA WITH OTHER TOOLS Outcome: Data from your server is shared with Google Optimize and can be used to target experiments. Show experiment variations to people who viewed blog posts within a specific category. Proprietary & Confidential Data Layer Variable Targeting - Optimize Google Tag Manager 35

Data Layer WHO CAN MAKE CHANGES? I have the technical skills and the correct access to make changes to the server-side code on my website: A Developer’s Guide To Implementing The Data Layer I do not have either the necessary skills or access to complete this process alone: Unlock the Data Layer: A Non-Developer’s Guide to Google Tag Manager Proprietary & Confidential Google Tag Manager 36

Data Layer WHO CAN MAKE CHANGES? With Drupal modules, answer is somewhere in the middle. • A surprising amount of customization can be handled in admin UI. • Developer intervention may still be required for specific cases. Drupal-Friendly Google Tag Manager Configuration with the dataLayer Module Proprietary & Confidential Google Tag Manager 37

GTM DOES GTM MAKE SENSE FOR YOU? Probably! • Requires less custom code if you go beyond defaults • Takes you out of the critical path for updates • Lets you use pre-packaged templates • Lets you use data beyond Google Analytics Proprietary & Confidential Google Tag Manager 38

GTM DOES GTM MAKE SENSE FOR YOU? … but maybe not! • Does require some additional initial setup • “My client needs more oversight” • GTM still might make sense. • Client still consumes GA and you hold the keys to GTM Proprietary & Confidential Google Tag Manager 39

GTM COMMUNITY TEMPLATES Proprietary & Confidential Google Tag Manager 40

Data Layer DEMO Proprietary & Confidential Google Tag Manager 41

GA Module SANDBOX REPO http://bit.ly/drupal-ga-sandbox Proprietary & Confidential 42

Thank You BOUNTEOUS (VIRTUAL) TRAINING Proprietary & Confidential 43

Q&A Brian Perry Lead Front End Developer Email: brian.perry@bounteous.com