| 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">as
ynchronous |
| 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 |
| 75 <p> | 75 <p> |
| 76 Here is a popup page (<code>popup.html</code>) which loads the asynchronous | 76 Here is a popup page (<code>popup</code>) which loads the asynchronous |
| 77 tracking code via an external JavaScript file (<code>popup.js</code>) and | 77 tracking code via an external JavaScript file (<code>popup.js</code>) and |
| 78 tracks a single page view: | 78 tracks a single page view: |
| 79 </p> | 79 </p> |
| 80 | 80 |
| 81 <pre data-filename="popup.html"> | 81 <pre data-filename="popup"> |
| 82 <!DOCTYPE html> | 82 <!DOCTYPE html> |
| 83 <html> | 83 <html> |
| 84 <head> | 84 <head> |
| 85 ... | 85 ... |
| 86 <script src="popup.js"></script> | 86 <script src="popup.js"></script> |
| 87 </head> | 87 </head> |
| 88 <body> | 88 <body> |
| 89 ... | 89 ... |
| 90 </body> | 90 </body> |
| 91 </html> | 91 </html> |
| (...skipping 37 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 |