2. Google Tag Manager and YaleSites: The Next Step for Google Analytics Yale University DrupalCamp 2016 Steve Wieda March 24, 2016 Yale University Library

3. What is Google Tag Manager? According to Google: “Google Tag Manager is a tag management system that allows you to quickly and easily update tags.”

4. The End.

5. Google Tag Manager Google Tag Manager allows you to add tags to your web pages through a GUI Tags are snippets of HTML, usually including JavaScript, that allow you to extend the functionality of web pages These tags can be added without coding experience Tag Manager is particularly useful for inserting HTML and JavaScript into web applications for which you do not have access to the code

6. Tag Manager and Google Analytics Built-in Tag functionality is amazingly diverse and spans from inserting advertisements to tracking mouse movement to creating heat maps. Tags can be custom coded for novel purposes, e.g. tracking scrolling on a web page We’ll look at Google Tag Manager and how it relates to Google Analytics, specifically in how to generate Events in Google Analytics using Tag Manager

7. Triggering Events: The traditional way Custom JavaScript has to be embedded in the page Custom JavaScript calls ga() to manually trigger an Event The Event Category, Action, and Label are all hard-coded in the page Changes require having a developer modify the JavaScript Changes have to be put into production to fully test

8. Triggering Events: Google Tag Manager Tags are inserted into the page via a GUI Google Tag Manager takes care of triggering the Event send The Event Category, Action, and Label are easily set in the GUI Changes do not require having a developer modify the code Tags can be tested immediately in your browser prior to deployment

9. Google Tag Manager and YaleSites Create Tag Manager account at google.com/analytics Create Container and get Container ID Enable the Google Tag Manager Module Modules > Statistics > Google Tag Manager Configure the module with your GTM Container ID Configuration > System > Google Tag Manager You’re done!

10. Terminology: Tags and Triggers A Tag is a piece of HTML and JavaScript that performs some function in your web page A Trigger is a condition that causes the Tag to perform its action You could have a Tag that sends an Event to Google Analytics You could say that “Anyone Clicking This ” is the Trigger to fire the Tag that sends an Event to Google Analytics.

11. Step One: Determine what you want to track The first thing you need to do is to define what you want to track Generally speaking, you want to track actions, such as clicking a button, submitting a form, or scrolling down on a page For this demo, we’ve decided to track how many times someone expands the “Libraries & Collections” navigation element on the Library’s website http://library.yale.edu by sending an Event every time someone clicks on that nav elementhttp://library.yale.edu

12. Step Two: Define the Trigger Think of what needs to happen in order to send an Event If clicking “Libraries & Collections” is what should send the event, the click is the Trigger Be prepared to describe the Trigger in a way Tag Manager can understand In our case, anyone clicking on a with the CSS class “libraries-block-nav” should kick off the Event

13. Step Three: Create the Tag Create a “Google Analytics” Tag Choose Universal Analytics as the type Insert your GA Tracking ID Define the Event you want to send (Category, Action, Label) Choose the libraries-block-nav class click as the Trigger

14. Step Four: Test and publish You can test your tag right in your browser You can watch the Event get triggered in Google Analytics “Real- Time” area If the Event comes in as expected, publish and go live!

15. Step Five: Profit!

16. Demo of Google Tag Manager