Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(105)

Side by Side Diff: chrome/common/extensions/docs/templates/articles/tut_analytics.html

Issue 219213007: Remove .html extension from links (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 6 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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
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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698