OLD | NEW |
1 <div id="pageData-name" class="pageData">Tutorial: Google Analytics</div> | 1 <div id="pageData-name" class="pageData">Tutorial: Google Analytics</div> |
2 <div id="pageData-showTOC" class="pageData">true</div> | 2 <div id="pageData-showTOC" class="pageData">true</div> |
3 | 3 |
4 <p>This tutorial demonstrates using Google Analytics to track the usage of your | 4 <p>This tutorial demonstrates using Google Analytics to track the usage of your |
5 extension.</p> | 5 extension.</p> |
6 | 6 |
7 <h2 id="toc-requirements">Requirements</h2> | 7 <h2 id="toc-requirements">Requirements</h2> |
8 <p> | 8 <p> |
9 This tutorial expects that you have some familiarity writing extensions for | 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 | 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>. | 11 read the <a href="gettingstarted.html">Getting Started tutorial</a>. |
12 </p> | 12 </p> |
13 | 13 |
14 <p> | 14 <p> |
15 You will also need a <a href="http://www.google.com/analytics">Google | 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 | 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 | 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. | 18 extension will not have an URL of its own. |
19 </p> | 19 </p> |
20 | 20 |
21 <p style="text-align: center"> | 21 <p style="text-align: center"> |
22 <img src="images/tut_analytics/screenshot01.png" | 22 <img src="images/tut_analytics/screenshot01.png" |
23 style="width:400px;height:82px;" | 23 style="width:400px;height:82px;" |
24 alt="The analytics setup with info for a chrome extension filled out." /> | 24 alt="The analytics setup with info for a chrome extension filled out." /> |
25 </p> | 25 </p> |
26 | 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> | 27 <h2 id="toc-installing">Installing the tracking code</h2> |
36 | 28 |
37 <p> | 29 <p> |
38 The standard Google Analytics tracking code snippet fetches a file named | 30 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 | 31 <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 | 32 was loaded using the <code>https://</code> protocol. <strong>Chrome |
41 advised to use the SSL protected ga.js in an extension</strong>, | 33 extensions and applications may <em>only</em> use the SSL-protected version of |
42 but Google Chrome extension | 34 <code>ga.js</code></strong>. Loading <code>ga.js</code> over insecure HTTP is |
43 pages are hosted under <code>chrome-extension://</code> URLs, so the tracking | 35 disallowed by Chrome's default <a href="contentSecurityPolicy.html">Content |
44 snippet must be modified slightly to pull <code>ga.js</code> directly from | 36 Security Policy</a>. This, plus the fact that Chrome extensions are hosted |
45 <code>https://ssl.google-analytics.com/ga.js</code> instead of the default | 37 under the <code>chrome-extension://</code> schema, requires a slight |
46 location. | 38 modification to the usual tracking snippet to pull <code>ga.js</code> directly |
| 39 from <code>https://ssl.google-analytics.com/ga.js</code> instead of the |
| 40 default location. |
47 </p> | 41 </p> |
48 | 42 |
49 <p> | 43 <p> |
50 Below is a modified snippet for the | 44 Below is a modified snippet for the |
51 <a href="http://code.google.com/apis/analytics/docs/tracking/asyncTracking.htm
l">asynchronous | 45 <a href="http://code.google.com/apis/analytics/docs/tracking/asyncTracking.htm
l">asynchronous |
52 tracking API</a> (the modified line is bolded): | 46 tracking API</a> (the modified line is bolded): |
53 </p> | 47 </p> |
54 | 48 |
55 <pre> | 49 <pre> |
56 (function() { | 50 (function() { |
57 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.asy
nc = true; | 51 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.asy
nc = true; |
58 <strong>ga.src = 'https://ssl.google-analytics.com/ga.js';</strong> | 52 <strong>ga.src = 'https://ssl.google-analytics.com/ga.js';</strong> |
59 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(
ga, s); | 53 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(
ga, s); |
60 })(); | 54 })(); |
61 </pre> | 55 </pre> |
62 | 56 |
63 <p> | 57 <p> |
64 Here is a background page which loads the asynchronous tracking code and | 58 You'll also need to ensure that your extension has access to load the resource |
| 59 by relaxing the default content security policy. The policy definition in your |
| 60 <a href="manifest.html"><code>manifest.json</code></a> might look like: |
| 61 </p> |
| 62 |
| 63 <pre>{ |
| 64 ..., |
| 65 "content_security_policy": "script-src 'self' https://ssl.google-analytics.com
; object-src 'self'", |
| 66 ... |
| 67 }</pre> |
| 68 |
| 69 <p> |
| 70 Here is a popup page (<code>popup.html</code>) which loads the asynchronous |
| 71 tracking code via an external JavaScript file (<code>popup.js</code>) and |
65 tracks a single page view: | 72 tracks a single page view: |
66 </p> | 73 </p> |
67 | 74 |
68 <pre> | 75 <pre>popup.js: |
| 76 ========= |
| 77 |
| 78 var _gaq = _gaq || []; |
| 79 _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']); |
| 80 _gaq.push(['_trackPageview']); |
| 81 |
| 82 (function() { |
| 83 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.asy
nc = true; |
| 84 ga.src = 'https://ssl.google-analytics.com/ga.js'; |
| 85 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(
ga, s); |
| 86 })(); |
| 87 |
| 88 popup.html: |
| 89 =========== |
69 <!DOCTYPE html> | 90 <!DOCTYPE html> |
70 <html> | 91 <html> |
71 <head> | 92 <head> |
72 ... | 93 ... |
| 94 <script src="popup.js"></script> |
73 </head> | 95 </head> |
74 <body> | 96 <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'; g
a.async = true; | |
82 ga.src = 'https://ssl.google-analytics.com/ga.js'; | |
83 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBe
fore(ga, s); | |
84 })(); | |
85 </script> | |
86 | |
87 ... | 97 ... |
88 </body> | 98 </body> |
89 </html> | 99 </html> |
90 </pre> | 100 </pre> |
91 | 101 |
92 <p> | 102 <p> |
93 Keep in mind that the string <code>UA-XXXXXXXX-X</code> should be replaced | 103 Keep in mind that the string <code>UA-XXXXXXXX-X</code> should be replaced |
94 with your own Google Analytics account number. | 104 with your own Google Analytics account number. |
95 </p> | 105 </p> |
96 | 106 |
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
135 | 145 |
136 <h2 id="toc-tracking-events">Tracking events</h2> | 146 <h2 id="toc-tracking-events">Tracking events</h2> |
137 | 147 |
138 <p> | 148 <p> |
139 By configuring event tracking, you can determine which parts of your | 149 By configuring event tracking, you can determine which parts of your |
140 extension your users interact with the most. For example, if you have | 150 extension your users interact with the most. For example, if you have |
141 three buttons users may click: | 151 three buttons users may click: |
142 </p> | 152 </p> |
143 | 153 |
144 <pre> | 154 <pre> |
145 <button>Button 1</button> | 155 <button id='button1'>Button 1</button> |
146 <button>Button 2</button> | 156 <button id='button2'>Button 2</button> |
147 <button>Button 3</button> | 157 <button id='button3'>Button 3</button> |
148 </pre> | 158 </pre> |
149 | 159 |
150 <p> | 160 <p> |
151 Write a function that sends click events to Google Analytics: | 161 Write a function that sends click events to Google Analytics: |
152 </p> | 162 </p> |
153 | 163 |
154 <pre> | 164 <pre> |
155 function trackButton(button_id) { | 165 function trackButton(e) { |
156 _gaq.push(['_trackEvent', 'button' + button_id, 'clicked']); | 166 _gaq.push(['_trackEvent', e.target.id, 'clicked']); |
157 }; | 167 }; |
158 </pre> | 168 </pre> |
159 | 169 |
160 <p> | 170 <p> |
161 And call it when each button is pressed: | 171 And use it as an event handler for each button's click: |
162 </p> | 172 </p> |
163 | 173 |
164 <pre> | 174 <pre> |
165 <button onclick="trackButton(1);">Button 1</button> | 175 var buttons = document.querySelectorAll('button'); |
166 <button onclick="trackButton(2);">Button 2</button> | 176 for (var i = 0; i < buttons.length; i++) { |
167 <button onclick="trackButton(3);">Button 3</button> | 177 buttons[i].addEventListener('click', trackButtonClick); |
| 178 } |
168 </pre> | 179 </pre> |
169 | 180 |
170 <p> | 181 <p> |
171 The Google Analytics event tracking overview page will give you metrics | 182 The Google Analytics event tracking overview page will give you metrics |
172 regarding how many times each individual button is clicked: | 183 regarding how many times each individual button is clicked: |
173 </p> | 184 </p> |
174 | 185 |
175 <p style="text-align: center"> | 186 <p style="text-align: center"> |
176 <img src="images/tut_analytics/screenshot03.png" | 187 <img src="images/tut_analytics/screenshot03.png" |
177 style="width:300px;height:482px;" | 188 style="width:300px;height:482px;" |
(...skipping 17 matching lines...) Expand all Loading... |
195 | 206 |
196 <p> | 207 <p> |
197 A sample extension that uses these techniques is | 208 A sample extension that uses these techniques is |
198 available in the Chromium source tree: | 209 available in the Chromium source tree: |
199 </p> | 210 </p> |
200 | 211 |
201 <blockquote> | 212 <blockquote> |
202 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensi
ons/docs/examples/tutorials/analytics/">.../examples/tutorials/analytics/</a> | 213 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensi
ons/docs/examples/tutorials/analytics/">.../examples/tutorials/analytics/</a> |
203 </blockquote> | 214 </blockquote> |
204 </p> | 215 </p> |
OLD | NEW |