LACKING TRACKING? STOP SLACKING. GOOGLE TAG MANAGER

Transcription

1 LACKING TRACKING? STOP SLACKING. GOOGLE TAG MANAGER November 9, 2015 edui

2 HI! I M PAUL KOCH I work as a Senior Digital Analyst at Viget Labs, LLC This presentation is CONFIDENTIAL and should not be shared without permission.

3 Last year, I talked about Google Tag Manager. What gives?

4 A lot has changed in a year.

5

6

7 RULES

8 TRIGGERS

9 MACROS

10 VARIABLES

11 AUTO-EVENT LISTENERS

12 EVENT-ASSOCIATED TRIGGERS

13 HIGHER-LEVEL VIEW WHY YOU NEED TMS RESOURCES FOR LATER

14 DIVE DEEPER LEARN WHAT S NEW MEASURE IT TODAY

15

16

17

18

19

20

21

22 ILLUMIGAMI.IO

23

24 1 of 14 U.S. partners

25

26 + 155% Nov 14 Oct 15 Top million websites using Google Tag Manager. Source:

27 Google Tag Manager Signal Tealium Adobe DTM Satellite Ensighten Others 47% Source:

28 QUICK POLL

29 Raise your hand if you

30 came to my talk last year?

31 have Tag Manager installed on your website?

32 have used Tag Manager?

33 have used the old interface?

34 have used the new interface?

35 feel proficient writing JavaScript?

36 How s our analytics setup doing?

37 TODAY

38 TODAY I. How it works II. Common terms III. Let s actually measure: a) web property as a variable b) social outbound clicks c) specific elements / your top navigation IV. Considerations and resources

39 If you don t have GTM set up yet, that s ok.

40 I ll post slides and notes.

41 HOW IT WORKS

42 HOW IT WORKS One JS snippet added to the site gtm.js Add tags through GTM interface, rather than markup GTM updates the JS file, which contains all tags added in the interface

43

44 Window: glass, <6ft tall Door: has knob, >6ft tall

45

46

47 COMMON TERMS

48

49 Pageview each page load of your site

50

51 Event other user interactions beyond loading a page

52 navigation clicks to external sites any interaction without a new page

53

54 events can have up to three values Navigation > Top > About Navigation > Footer > Careers

55 Gif Request also called a tracking pixel

56 example

57 Web Property the account number in your gif requests, so Google knows to track them to your account

58

59 Tag HTML code that executes on a page

60 GA: pageview tags event tags others (e.g., e-commerce)

61 but not just GA: Bing Facebook Quantcast Optimizely you name it

62 Trigger conditions for when a tag should fire formerly: rule

63 Container the GTM snippet you put on your website, through which all other tags load

64 Variable a function that lets you get certain values

65

66 INTERFACE! LET S DO THIS!

67 Note: The following information was demoed live in the interface during the talk, but is detailed here for future reference.

68 Getting Started

69 GETTING STARTED 1) Create an account at google.com/tagmanager, and add the container code to your site. 2) Enable built-in variables by navigating to the Variables tab and checking all variables within the Pages, Clicks, and Forms headings.

70 Add Your GA Web Property ID as a Variable

71 FINDING YOUR GA WEB PROPERTY Your web property ID ties your gif requests to your Google Analytics account. You can find it one of these ways: 1) View the source of your website (right click on your site and choose View Source Code) and search for UA- (if you already have an existing GA setup). 2) In the Google Analytics view where you want your data to track, select the Admin link at the top of the page, then click Property Settings on the next page. You web property will be listed at the top of the page under Tracking Id.

72 SETTING WEB PROPERTY AS A VARIABLE 1) Within Google Tag Manager, click the Variables tab. Under the User-Defined Variables heading, click the New button. 2) Create a name for your variable (e.g., Google Analytics ID ). Under Choose Type, select Constant. 3) Paste your web property ID into the Value field (e.g., UA ). Click Create Variable. This value is now accessible automatically within tags and triggers.

73 Set Up a Pageview Tag

74 SETTING UP A PAGEVIEW TAG Note that this pageview tag would replace the GA code that you typically have on each page of your site. 1) Select Tags in the side menu, and click New. 2) Under Choose Product, select Google Analytics. 3) If you are creating a brand new analytics implementation, select Universal Analytics within the Tag Type. If you want to supplement an existing Classic implementation, click Classic Google Analytics. You can tell if you re using Classic Analytics by reviewing your gif requests. In Chrome, select View > Developer > Developer Tools, refresh the page, and search for collect or utm within the Network tab of the developer tools.

75 UNIVERSAL VS. CLASSIC REQUESTS Universal: collect Classic: utm.gif

76 SETTING UP A PAGEVIEW TAG 4) Within the Tracking ID field, type in double brackets {{ which will automatically list out the variables you have accessible to you. Select the web property ID variable that you previously created. Click Continue. 5) Choose to fire on All Pages, then click Create Tag. 6) To preview whether the tag is firing as expected, click the arrow beside the Publish button in the upper right hand corner of the page, and select Preview. Visit your site, and review the information that appears in the preview pane at the bottom of the page.

77 Measure Outbound Clicks to Social Media

78 MEASURE OUTBOUND CLICKS TO SOCIAL 1) Create a new tag ( Tags > New. ) As with your pageview tag, select Google Analytics > Universal Analytics (most likely) > add your web property ID variable as the tracking ID. 2) Change the Track Type from Page View to Event. 3) The event Category, Action, and Label fields can be whatever values make the most sense to your organization. In our example, we chose:

79 MEASURE OUTBOUND CLICKS TO SOCIAL 4) Within Fire On, select Click. Select Just Links within the Targets field. Keep Wait for Tags checked, but un-check Check Validation. 5) Within the Enable When section, choose to enable the trigger whenever Page URL matches RegEx (ignore case).*. This setting means that the click listener will activate on all pages. You should almost always use this setting when enabling clickbased triggers. 6) In our example, we chose Fire On Click URL matches RegEx (ignore case).*((twitter\.com) (tumblr\.com)).*). This is a regular expression to match multiple URLs in a single condition. You can learn more about regular expressions here:

80 MEASURE OUTBOUND CLICKS TO SOCIAL Alternatively, if you prefer not to use regular expressions, you could create two triggers one for Click URL contains twitter.com and another for Click URL contains tumblr.com. 7) To preview that the tag is firing appropriately, you must open the link in a new tab. The Preview pane is stateless, so it reloads with each page load. To preview what happens upon link clicks, you can click to open them in a new tab by holding Command while clicking the link.

81 Track Your Top Navigation and Other Elements

82 TRACK YOUR TOP NAVIGATION 1) Inspect the element you want to measure (right click > Inspect Element ). Identify the class or id that accounts for this particular element. In our example on pointlesscorp.com, we chose a class of header nav. 2) By default, GTM evaluates only the exact element being clicked not its parent classes or ids. Therefore, we must create a variable using custom JavaScript. Copy the JS from bit.ly/parentclass. Choose Variables > New > Custom JavaScript. 3) In the Configure Variable field, paste in the JavaScript. In the two places that say REPLACE, add your class name or id. If you want to look for an id instead of a class, change the two instances of el.classname in the code to el.id.

83 TRACK YOUR TOP NAVIGATION 4) Create a new tag ( Tags > New. ) As with your pageview tag, select Google Analytics > Universal Analytics (most likely) > add your web property ID variable as the tracking ID. Change the Track Type from Page View to Event. 5) In our demo, we added an event Category of Navigation, an Action of Top, and a Label of {{Click Text}}. {{Click Text}} is a variable that will dynamically pull in the anchor text of clicked links. 6) Choose a Click event. Within Configure Trigger, select All Elements. Within Fire On, choose the variable you created to check for the parent class or id, and select contains true.

84 TRACK YOUR TOP NAVIGATION

85 Publish

86 PUBLISH 1) When you click to Publish, the tracking immediately deploys on your site. 2) Test thoroughly ahead of time by viewing your network gif requests, checking the real-time Google Analytics reports, and QAing across browsers using Browserstack.

87 CONSIDERATIONS

88 CONSIDERATIONS If you already have tracking on your site, you ll usually check Set Tracker Name and leave the field blank (or better yet, upgrade on-page code to GTM) GTM code must identically match on-page code settings (domain name, allow linker, allow hash, etc.) within the Fields to Set dropdown QA data by checking gif requests and Real Time across browsers before publishing

89 RESOURCES

90 analyticsacademy.withgoogle.com

91 simoahava.com

92 browserstack.com

93 Viget Labs, LLC This presentation is CONFIDENTIAL and should not be shared without permission.