A presentation at Fox Valley Drupal by Brian Perry
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
Have you been tasked with implementing Google Analytics or Google Tag Manager in order to collect data related to your Drupal site? Perhaps in the past, you’ve seen this process consist of enabling the Google Tag Manager module (or alternatively the Google Analytics Module) and calling it a day. Have you been left with the sneaking suspicion that you could be doing more and collecting richer data as a result?
This talk will take a closer look at using Google Tag manager with a Drupal site. We’ll cover a number of common Drupal challenges and missteps, look at configuration options using the powerful Drupal dataLayer module, and aim to better understand when tagging requests may or may not require developer intervention.
The following resources were mentioned during the presentation or are useful additional information.
for free. You
can too.