OLD | NEW |
1 <h1>Tutorial: Google Analytics</h1> | 1 <h1>Tutorial: Google Analytics</h1> |
2 | 2 |
3 | 3 |
4 <p> | 4 <p> |
5 This tutorial demonstrates using Google Analytics to track the usage of your | 5 This tutorial demonstrates using Google Analytics to track the usage of your |
6 extension. If you are developing a platform app, see <a | 6 extension. If you are developing a platform app, see <a |
7 href="/apps/analytics.html">Analytics for Apps</a> since apps have different | 7 href="/apps/analytics">Analytics for Apps</a> since apps have different |
8 restrictions from extensions. | 8 restrictions from extensions. |
9 </p> | 9 </p> |
10 | 10 |
11 <h2 id="toc-requirements">Requirements</h2> | 11 <h2 id="toc-requirements">Requirements</h2> |
12 <p> | 12 <p> |
13 This tutorial expects that you have some familiarity writing extensions for | 13 This tutorial expects that you have some familiarity writing extensions for |
14 Google Chrome. If you need information on how to write an extension, please | 14 Google Chrome. If you need information on how to write an extension, please |
15 read the <a href="getstarted.html">Getting Started tutorial</a>. | 15 read the <a href="getstarted">Getting Started tutorial</a>. |
16 </p> | 16 </p> |
17 | 17 |
18 <p> | 18 <p> |
19 You will also need a <a href="http://www.google.com/analytics">Google | 19 You will also need a <a href="http://www.google.com/analytics">Google |
20 Analytics account</a> set up to track your extension. Note that when setting | 20 Analytics account</a> set up to track your extension. Note that when setting |
21 up the account, you can use any value in the Website's URL field, as your | 21 up the account, you can use any value in the Website's URL field, as your |
22 extension will not have an URL of its own. | 22 extension will not have an URL of its own. |
23 </p> | 23 </p> |
24 | 24 |
25 <p style="text-align: center"> | 25 <p style="text-align: center"> |
26 <img src="{{static}}/images/tut_analytics/screenshot01.png" | 26 <img src="{{static}}/images/tut_analytics/screenshot01.png" |
27 style="width:400px;height:82px;" | 27 style="width:400px;height:82px;" |
28 alt="The analytics setup with info for a chrome extension filled out." /> | 28 alt="The analytics setup with info for a chrome extension filled out." /> |
29 </p> | 29 </p> |
30 | 30 |
31 <h2 id="toc-installing">Installing the tracking code</h2> | 31 <h2 id="toc-installing">Installing the tracking code</h2> |
32 | 32 |
33 <p> | 33 <p> |
34 The standard Google Analytics tracking code snippet fetches a file named | 34 The standard Google Analytics tracking code snippet fetches a file named |
35 <code>ga.js</code> from an SSL protected URL if the current page | 35 <code>ga.js</code> from an SSL protected URL if the current page |
36 was loaded using the <code>https://</code> protocol. <strong>Chrome | 36 was loaded using the <code>https://</code> protocol. <strong>Chrome |
37 extensions and applications may <em>only</em> use the SSL-protected version of | 37 extensions and applications may <em>only</em> use the SSL-protected version of |
38 <code>ga.js</code></strong>. Loading <code>ga.js</code> over insecure HTTP is | 38 <code>ga.js</code></strong>. Loading <code>ga.js</code> over insecure HTTP is |
39 disallowed by Chrome's default <a href="contentSecurityPolicy.html">Content | 39 disallowed by Chrome's default <a href="contentSecurityPolicy">Content |
40 Security Policy</a>. This, plus the fact that Chrome extensions are hosted | 40 Security Policy</a>. This, plus the fact that Chrome extensions are hosted |
41 under the <code>chrome-extension://</code> schema, requires a slight | 41 under the <code>chrome-extension://</code> schema, requires a slight |
42 modification to the usual tracking snippet to pull <code>ga.js</code> directly | 42 modification to the usual tracking snippet to pull <code>ga.js</code> directly |
43 from <code>https://ssl.google-analytics.com/ga.js</code> instead of the | 43 from <code>https://ssl.google-analytics.com/ga.js</code> instead of the |
44 default location. | 44 default location. |
45 </p> | 45 </p> |
46 | 46 |
47 <p> | 47 <p> |
48 Below is a modified snippet for the | 48 Below is a modified snippet for the |
49 <a href="http://code.google.com/apis/analytics/docs/tracking/asyncTracking.htm
l">asynchronous | 49 <a href="http://code.google.com/apis/analytics/docs/tracking/asyncTracking.htm
l">asynchronous |
50 tracking API</a> (the modified line is bolded): | 50 tracking API</a> (the modified line is bolded): |
51 </p> | 51 </p> |
52 | 52 |
53 <pre data-filename="asyncTracking.js"> | 53 <pre data-filename="asyncTracking.js"> |
54 (function() { | 54 (function() { |
55 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.asy
nc = true; | 55 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.asy
nc = true; |
56 <strong>ga.src = 'https://ssl.google-analytics.com/ga.js';</strong> | 56 <strong>ga.src = 'https://ssl.google-analytics.com/ga.js';</strong> |
57 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(
ga, s); | 57 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(
ga, s); |
58 })(); | 58 })(); |
59 </pre> | 59 </pre> |
60 | 60 |
61 <p> | 61 <p> |
62 You'll also need to ensure that your extension has access to load the resource | 62 You'll also need to ensure that your extension has access to load the resource |
63 by relaxing the default content security policy. The policy definition in your | 63 by relaxing the default content security policy. The policy definition in your |
64 <a href="manifest.html"><code>manifest.json</code></a> might look like: | 64 <a href="manifest"><code>manifest.json</code></a> might look like: |
65 </p> | 65 </p> |
66 | 66 |
67 <pre data-filename="manifest.json"> | 67 <pre data-filename="manifest.json"> |
68 { | 68 { |
69 ..., | 69 ..., |
70 "content_security_policy": "script-src 'self' https://ssl.google-analytics.com
; object-src 'self'", | 70 "content_security_policy": "script-src 'self' https://ssl.google-analytics.com
; object-src 'self'", |
71 ... | 71 ... |
72 } | 72 } |
73 </pre> | 73 </pre> |
74 | 74 |
(...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
129 style="width:300px;height:119px;" | 129 style="width:300px;height:119px;" |
130 alt="Analytics view of the top content for a site." /> | 130 alt="Analytics view of the top content for a site." /> |
131 </p> | 131 </p> |
132 | 132 |
133 <h2 id="toc-debugging">Monitoring analytics requests</h2> | 133 <h2 id="toc-debugging">Monitoring analytics requests</h2> |
134 | 134 |
135 <p> | 135 <p> |
136 To ensure that tracking data from your extension is being sent to Google | 136 To ensure that tracking data from your extension is being sent to Google |
137 Analytics, you can inspect the pages of your extension in the | 137 Analytics, you can inspect the pages of your extension in the |
138 Developer Tools window (see the | 138 Developer Tools window (see the |
139 <a href="tut_debugging.html">debugging tutorial</a> for more information). | 139 <a href="tut_debugging">debugging tutorial</a> for more information). |
140 As the following figure shows, you should see requests for a file named | 140 As the following figure shows, you should see requests for a file named |
141 <strong>__utm.gif</strong> if everything is set up correctly. | 141 <strong>__utm.gif</strong> if everything is set up correctly. |
142 </p> | 142 </p> |
143 | 143 |
144 <p style="text-align: center"> | 144 <p style="text-align: center"> |
145 <img src="{{static}}/images/tut_analytics/screenshot04.png" | 145 <img src="{{static}}/images/tut_analytics/screenshot04.png" |
146 style="width:683px;height:418px;" | 146 style="width:683px;height:418px;" |
147 alt="Developer Tools window showing the __utm.gif request" /> | 147 alt="Developer Tools window showing the __utm.gif request" /> |
148 </p> | 148 </p> |
149 | 149 |
(...skipping 59 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
209 <h2 id="toc-samplecode">Sample code</h2> | 209 <h2 id="toc-samplecode">Sample code</h2> |
210 | 210 |
211 <p> | 211 <p> |
212 A sample extension that uses these techniques is | 212 A sample extension that uses these techniques is |
213 available in the Chromium source tree: | 213 available in the Chromium source tree: |
214 </p> | 214 </p> |
215 | 215 |
216 <blockquote> | 216 <blockquote> |
217 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensi
ons/docs/examples/tutorials/analytics/">.../examples/tutorials/analytics/</a> | 217 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensi
ons/docs/examples/tutorials/analytics/">.../examples/tutorials/analytics/</a> |
218 </blockquote> | 218 </blockquote> |
OLD | NEW |