1 <div id="pageData-name" class="pageData">Tutorial: Google Analytics</div> 2 <div id="pageData-showTOC" class="pageData">true</div> 3 4 <p>This tutorial demonstrates using Google Analytics to track the usage of your 5 extension.</p> 6 7 <h2 id="toc-requirements">Requirements</h2> 8 <p> 9 This tutorial expects that you have some familiarity writing extensions for 10 Google Chrome. If you need information on how to write an extension, please 11 read the <a href="gettingstarted.html">Getting Started tutorial</a>. 12 </p> 13 14 <p> 15 You will also need a <a href="http://www.google.com/analytics">Google 16 Analytics account</a> set up to track your extension. Note that when setting 17 up the account, you can use any value in the Website's URL field, as your 18 extension will not have an URL of its own. 19 </p> 20 21 <p style="text-align: center"> 22 <img src="images/tut_analytics/screenshot01.png" 23 style="width:400px;height:82px;" 24 alt="The analytics setup with info for a chrome extension filled out." /> 25 </p> 26 27 <p> 28 Also note that Google Analytics requires version <strong>4.0.302.2</strong> 29 of Google Chrome to work correctly. Users with an earlier version of Google 30 Chrome will not show up on your Google Analytics reports. View 31 <a href="faq.html#faq-dev-14">this FAQ entry</a> to learn how to check which 32 version of Google Chrome is deployed to which platform. 33 </p> 34 35 <h2 id="toc-installing">Installing the tracking code</h2> 36 37 <p> 38 The standard Google Analytics tracking code snippet fetches a file named 39 <code>ga.js</code> from an SSL protected URL if the current page 40 was loaded using the <code>https://</code> protocol. <strong>It is strongly 41 advised to use the SSL protected ga.js in an extension</strong>, 42 but Google Chrome extension 43 pages are hosted under <code>chrome-extension://</code> URLs, so the tracking 44 snippet must be modified slightly to pull <code>ga.js</code> directly from 45 <code>https://ssl.google-analytics.com/ga.js</code> instead of the default 46 location. 47 </p> 48 49 <p> 50 Below is a modified snippet for the 51 <a href="http://code.google.com/apis/analytics/docs/tracking/asyncTracking.html">asynchronous 52 tracking API</a> (the modified line is bolded): 53 </p> 54 55 <pre> 56 (function() { 57 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 58 <strong>ga.src = 'https://ssl.google-analytics.com/ga.js';</strong> 59 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 60 })(); 61 </pre> 62 63 <p> 64 Here is a background page which loads the asynchronous tracking code and 65 tracks a single page view: 66 </p> 67 68 <pre> 69 <!DOCTYPE html> 70 <html> 71 <head> 72 ... 73 </head> 74 <body> 75 <script> 76 var _gaq = _gaq || []; 77 _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']); 78 _gaq.push(['_trackPageview']); 79 80 (function() { 81 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 82 ga.src = 'https://ssl.google-analytics.com/ga.js'; 83 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 84 })(); 85 </script> 86 87 ... 88 </body> 89 </html> 90 </pre> 91 92 <p> 93 Keep in mind that the string <code>UA-XXXXXXXX-X</code> should be replaced 94 with your own Google Analytics account number. 95 </p> 96 97 <h2 id="toc-tracking-pageviews">Tracking page views</h2> 98 99 <p> 100 The <code>_gaq.push(['_trackPageview']);</code> code will track a single 101 page view. This code may be used on any page in your extension. When 102 placed on a background page, it will register a view once per browser 103 session. When placed on a popup, it will register a view once every time 104 the popup is opened. 105 </p> 106 107 <p> 108 By looking at the page view data for each page in your extension, you can 109 get an idea of how many times your users interact with your extension per 110 browser session: 111 </p> 112 113 <p style="text-align: center"> 114 <img src="images/tut_analytics/screenshot02.png" 115 style="width:300px;height:119px;" 116 alt="Analytics view of the top content for a site." /> 117 </p> 118 119 <h2 id="toc-debugging">Monitoring analytics requests</h2> 120 121 <p> 122 To ensure that tracking data from your extension is being sent to Google 123 Analytics, you can inspect the pages of your extension in the 124 Developer Tools window (see the 125 <a href="tut_debugging.html">debugging tutorial</a> for more information). 126 As the following figure shows, you should see requests for a file named 127 <strong>__utm.gif</strong> if everything is set up correctly. 128 </p> 129 130 <p style="text-align: center"> 131 <img src="images/tut_analytics/screenshot04.png" 132 style="width:683px;height:418px;" 133 alt="Developer Tools window showing the __utm.gif request" /> 134 </p> 135 136 <h2 id="toc-tracking-events">Tracking events</h2> 137 138 <p> 139 By configuring event tracking, you can determine which parts of your 140 extension your users interact with the most. For example, if you have 141 three buttons users may click: 142 </p> 143 144 <pre> 145 <button>Button 1</button> 146 <button>Button 2</button> 147 <button>Button 3</button> 148 </pre> 149 150 <p> 151 Write a function that sends click events to Google Analytics: 152 </p> 153 154 <pre> 155 function trackButton(button_id) { 156 _gaq.push(['_trackEvent', 'button' + button_id, 'clicked']); 157 }; 158 </pre> 159 160 <p> 161 And call it when each button is pressed: 162 </p> 163 164 <pre> 165 <button onclick="trackButton(1);">Button 1</button> 166 <button onclick="trackButton(2);">Button 2</button> 167 <button onclick="trackButton(3);">Button 3</button> 168 </pre> 169 170 <p> 171 The Google Analytics event tracking overview page will give you metrics 172 regarding how many times each individual button is clicked: 173 </p> 174 175 <p style="text-align: center"> 176 <img src="images/tut_analytics/screenshot03.png" 177 style="width:300px;height:482px;" 178 alt="Analytics view of the event tracking data for a site." /> 179 </p> 180 181 <p> 182 By using this approach, you can see which parts of your extension are 183 under-or-overutilized. This information can help guide decisions about UI 184 redesigns or additional functionality to implement. 185 </p> 186 187 <p> 188 For more information about using the event tracking API, see the 189 Google Analytics 190 <a href="http://code.google.com/apis/analytics/docs/tracking/eventTrackerOverview.html">developer 191 documentation</a>. 192 </p> 193 194 <h2 id="toc-samplecode">Sample code</h2> 195 196 <p> 197 A sample extension that uses these techniques is 198 available in the Chromium source tree: 199 </p> 200 201 <blockquote> 202 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/tutorials/analytics/">.../examples/tutorials/analytics/</a> 203 </blockquote> 204 </p> 205
