chrome/common/extensions/docs/tut_analytics.html - Issue 10642015: Basic setup for generating app docs

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

Issue 10642015: Basic setup for generating app docs (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src

Patch Set: fix Created 8 years, 6 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 | Annotate | Revision Log

« chrome/common/extensions/docs/js/api_page_generator.js ('K') | « chrome/common/extensions/docs/ttsEngine.html ('k') | chrome/common/extensions/docs/tut_debugging.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	(Empty)
1 <!DOCTYPE html><!-- This page is a placeholder for generated extensions api doc. Note:

2 1) The <head> information in this page is significant, should be uniform

3 across api docs and should be edited only with knowledge of the

4 templating mechanism.

5 3) All <body>.innerHTML is genereated as an rendering step. If viewed in a

6 browser, it will be re-generated from the template, json schema and

7 authored overview content.

8 4) The <body>.innerHTML is also generated by an offline step so that this

9 page may easily be indexed by search engines.

10 --><html xmlns="http://www.w3.org/1999/xhtml"><head>

11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

12 <link href="css/ApiRefStyles.css" rel="stylesheet" type="text/css">

13 <link href="css/print.css" rel="stylesheet" type="text/css" media="print">

14 <script type="text/javascript" src="../../../third_party/jstemplate/jstempla te_compiled.js">

15 </script>

16 <script type="text/javascript" src="../../../../third_party/json_minify/mini fy-sans-regexp.js">

17 </script>

18 <script type="text/javascript" src="js/api_page_generator.js"></script>

19 <script type="text/javascript" src="js/bootstrap.js"></script>

20 <script type="text/javascript" src="js/sidebar.js"></script>

21 <title>Tutorial: Google Analytics - Google Chrome Extensions - Google Code</ti tle></head>

22 <body> <div id="devModeWarning" class="displayModeWarning">

23 You are viewing extension docs in chrome via the 'file:' scheme: are you exp ecting to see local changes when you refresh? You'll need run chrome with --allo w-file-access-from-files.

24 </div>

25 <div id="branchWarning" class="displayModeWarning">

26 <span>WARNING: This is the <span id="branchName">BETA</span> documentation.

27 It may not work with the stable release of Chrome.</span>

28 <select id="branchChooser">

29 <option>Choose a different version...

30 </option><option value="">Stable

31 </option><option value="beta">Beta

32 </option><option value="dev">Dev

33 </option><option value="trunk">Trunk

34 </option></select>

35 </div>

36 <div id="unofficialWarning" class="displayModeWarning">

37 <span>WARNING: This is unofficial documentation. It may not work with the

38 current release of Chrome.</span>

39 <button id="goToOfficialDocs">Go to the official docs</button>

40 </div>

41 <div id="gc-container" class="labs">

42 <!-- SUBTEMPLATES: DO NOT MOVE FROM THIS LOCATION -->

43 <!-- In particular, sub-templates that recurse, must be used by allowing

44 jstemplate to make a copy of the template in this section which

45 are not operated on by way of the jsskip="true" -->

46 <!-- /SUBTEMPLATES -->

47 <a id="top"></a>

48 <div id="skipto">

49 <a href="#gc-pagecontent">Skip to page content</a>

50 <a href="#gc-toc">Skip to main navigation</a>

51 </div>

52 <!-- API HEADER -->

53 <table id="header" width="100%" cellspacing="0" border="0">

54 <tbody><tr>

55 <td valign="middle"><a href="http://code.google.com/"><img src="images/c ode_labs_logo.gif" height="43" width="161" alt="Google Code Labs" style="border: 0; margin:0;"></a></td>

56 <td valign="middle" width="100%" style="padding-left:0.6em;">

57 <form action="http://www.google.com/cse" id="cse" style="margin-top:0. 5em">

58 <div id="gsc-search-box">

59 <input type="hidden" name="cx" value="002967670403910741006:61_cvz fqtno">

60 <input type="hidden" name="ie" value="UTF-8">

61 <input type="text" name="q" value="" size="55">

62 <input class="gsc-search-button" type="submit" name="sa" value="Se arch">

63 <br>

64 <span class="greytext">e.g. "page action" or "tabs"</span>

65 </div>

66 </form>

67 <script type="text/javascript" src="https://www.google.com/jsapi"></sc ript>

68 <script type="text/javascript">google.load("elements", "1", {packages: "transliteration"});</script>

69 <script type="text/javascript" src="https://www.google.com/coop/cse/t1 3n?form=cse&t13n_langs=en"></script>

70 <script type="text/javascript" src="https://www.google.com/coop/cse/br and?form=cse&lang=en"></script>

71 </td>

72 </tr>

73 </tbody></table>

74 <div id="codesiteContent" class="">

75 <a id="gc-topnav-anchor"></a>

76 <div id="gc-topnav">

77 <h1>Google Chrome Extensions (<a href="http://code.google.com/labs/">Lab s</a>)</h1>

78 <ul id="home" class="gc-topnav-tabs">

79 <li id="home_link">

80 <a href="index.html" title="Google Chrome Extensions home page">Home </a>

81 </li>

82 <li id="docs_link">

83 <a href="docs.html" title="Official Google Chrome Extensions documen tation">Docs</a>

84 </li>

85 <li id="faq_link">

86 <a href="faq.html" title="Answers to frequently asked questions abou t Google Chrome Extensions">FAQ</a>

87 </li>

88 <li id="samples_link">

89 <a href="samples.html" title="Sample extensions (with source code)"> Samples</a>

90 </li>

91 <li id="group_link">

92 <a href="http://groups.google.com/a/chromium.org/group/chromium-exte nsions" title="Google Chrome Extensions developer forum">Group</a>

93 </li>

94 <li id="so_link">

95 <a href="http://stackoverflow.com/questions/tagged/google-chrome-ext ension" title="[google-chrome-extension] tag on Stack Overflow">Questions?</a>

96 </li>

97 </ul>

98 </div> <!-- end gc-topnav -->

99 <div class="g-section g-tpl-170">

100 <!-- SIDENAV -->

101 <div class="g-unit g-first" id="gc-toc">

102 <ul>

103 <li><a href="getstarted.html">Getting Started</a></li>

104 <li><a href="overview.html">Overview</a></li>

105 <li><a href="whats_new.html">What's New?</a></li>

106 <li><h2><a href="devguide.html">Developer's Guide</a></h2>

107 <ul>

108 <li>Browser UI

109 <ul>

110 <li><a href="browserAction.html">Browser Actions</a></li>

111 <li><a href="contextMenus.html">Context Menus</a></li>

112 <li><a href="notifications.html">Desktop Notifications</a></li >

113 <li><a href="omnibox.html">Omnibox</a></li>

114 <li><a href="options.html">Options Pages</a></li>

115 <li><a href="override.html">Override Pages</a></li>

116 <li><a href="pageAction.html">Page Actions</a></li>

117 </ul>

118 </li>

119 <li>Browser Interaction

120 <ul>

121 <li><a href="bookmarks.html">Bookmarks</a></li>

122 <li><a href="cookies.html">Cookies</a></li>

123 <li><a href="devtools.html">Developer Tools</a></li>

124 <li><a href="events.html">Events</a></li>

125 <li><a href="history.html">History</a></li>

126 <li><a href="management.html">Management</a></li>

127 <li><a href="tabs.html">Tabs</a></li>

128 <li><a href="windows.html">Windows</a></li>

129 </ul>

130 </li>

131 <li>Implementation

132 <ul>

133 <li><a href="a11y.html">Accessibility</a></li>

134 <li><a href="background_pages.html">Background Pages</a></li>

135 <li><a href="content_scripts.html">Content Scripts</a></li>

136 <li><a href="xhr.html">Cross-Origin XHR</a></li>

137 <li><a href="i18n.html">Internationalization</a></li>

138 <li><a href="messaging.html">Message Passing</a></li>

139 <li><a href="permissions.html">Optional Permissions</a></li>

140 <li><a href="npapi.html">NPAPI Plugins</a></li>

141 </ul>

142 </li>

143 <li>Finishing

144 <ul>

145 <li><a href="hosting.html">Hosting</a></li>

146 <li><a href="external_extensions.html">Other Deployment Option s</a></li>

147 </ul>

148 </li>

149 </ul>

150 </li>

151 <li><h2><a href="apps.html">Packaged Apps</a></h2></li>

152 <li><h2><a href="tutorials.html">Tutorials</a></h2>

153 <ul>

154 <li><a href="tut_debugging.html">Debugging</a></li>

155 <li class="leftNavSelected">Google Analytics</li>

156 <li><a href="tut_oauth.html">OAuth</a></li>

157 </ul>

158 </li>

159 <li><h2>Reference</h2>

160 <ul>

161 <li>Formats

162 <ul>

163 <li><a href="manifest.html">Manifest Files</a></li>

164 <li><a href="match_patterns.html">Match Patterns</a></li>

165 </ul>

166 </li>

167 <li><a href="permission_warnings.html">Permission Warnings</a></li >

168 <li><a href="api_index.html">chrome.* APIs</a></li>

169 <li><a href="api_other.html">Other APIs</a></li>

170 </ul>

171 </li>

172 <li><h2><a href="samples.html">Samples</a></h2></li>

173 <div class="line"> </div>

174 <li><h2>More</h2>

175 <ul>

176 <li><a href="http://code.google.com/chrome/webstore/docs/index.htm l">Chrome Web Store</a></li>

177 <li><a href="http://code.google.com/chrome/apps/docs/developers_gu ide.html">Hosted Apps</a></li>

178 <li><a href="themes.html">Themes</a></li>

179 </ul>

180 </li>

181 </ul>

182 </div>

183 <script>

184 initToggles();

185 </script>

186 <div class="g-unit" id="gc-pagecontent">

187 <div id="pageTitle">

188 <h1 class="page_title">Tutorial: Google Analytics</h1>

189 </div>

190 <!-- TABLE OF CONTENTS -->

191 <div id="toc">

192 <h2>Contents</h2>

193 <ol>

194 <li>

195 <a href="#toc-requirements">Requirements</a>

196 <ol>

197 </ol>

198 </li><li>

199 <a href="#toc-installing">Installing the tracking code</a>

200 <ol>

201 </ol>

202 </li><li>

203 <a href="#toc-tracking-pageviews">Tracking page views</a>

204 <ol>

205 </ol>

206 </li><li>

207 <a href="#toc-debugging">Monitoring analytics requests</a>

208 <ol>

209 </ol>

210 </li><li>

211 <a href="#toc-tracking-events">Tracking events</a>

212 <ol>

213 </ol>

214 </li><li>

215 <a href="#toc-samplecode">Sample code</a>

216 <ol>

217 </ol>

218 </li>

219 </ol>

220 </div>

221 <!-- /TABLE OF CONTENTS -->

222 <!-- Standard content lead-in for experimental API pages -->

223 <!-- STATIC CONTENT PLACEHOLDER -->

224 <div id="static"><div id="pageData-name" class="pageData">Tutorial: Goog le Analytics</div>

225 <div id="pageData-showTOC" class="pageData">true</div>

226 <p>This tutorial demonstrates using Google Analytics to track the usage of your

227 extension.</p>

228 <h2 id="toc-requirements">Requirements</h2>

229 <p>

230 This tutorial expects that you have some familiarity writing extensions for

231 Google Chrome. If you need information on how to write an extension, please

232 read the <a href="gettingstarted.html">Getting Started tutorial</a>.

233 </p>

234 <p>

235 You will also need a <a href="http://www.google.com/analytics">Google

236 Analytics account</a> set up to track your extension. Note that when setting

237 up the account, you can use any value in the Website's URL field, as your

238 extension will not have an URL of its own.

239 </p>

240 <p style="text-align: center">

241 <img src="images/tut_analytics/screenshot01.png" style="width:400px;height:82p x;" alt="The analytics setup with info for a chrome extension filled out.">

242 </p>

243 <h2 id="toc-installing">Installing the tracking code</h2>

244 <p>

245 The standard Google Analytics tracking code snippet fetches a file named

246 <code>ga.js</code> from an SSL protected URL if the current page

247 was loaded using the <code>https://</code> protocol. <strong>Chrome

248 extensions and applications may <em>only</em> use the SSL-protected version of

249 <code>ga.js</code></strong>. Loading <code>ga.js</code> over insecure HTTP is

250 disallowed by Chrome's default <a href="contentSecurityPolicy.html">Content

251 Security Policy</a>. This, plus the fact that Chrome extensions are hosted

252 under the <code>chrome-extension://</code> schema, requires a slight

253 modification to the usual tracking snippet to pull <code>ga.js</code> directly

254 from <code>https://ssl.google-analytics.com/ga.js</code> instead of the

255 default location.

256 </p>

257 <p>

258 Below is a modified snippet for the

259 <a href="http://code.google.com/apis/analytics/docs/tracking/asyncTracking.htm l">asynchronous

260 tracking API</a> (the modified line is bolded):

261 </p>

262 <pre>(function() {

263 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.asy nc = true;

264 <strong>ga.src = 'https://ssl.google-analytics.com/ga.js';</strong>

265 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore( ga, s);

266 })();

267 </pre>

268 <p>

269 You'll also need to ensure that your extension has access to load the resource

270 by relaxing the default content security policy. The policy definition in your

271 <a href="manifest.html"><code>manifest.json</code></a> might look like:

272 </p>

273 <pre>{

274 ...,

275 "content_security_policy": "script-src 'self' https://ssl.google-analytics.com ; object-src 'self'",

276 ...

277 }</pre>

278 <p>

279 Here is a popup page (<code>popup.html</code>) which loads the asynchronous

280 tracking code via an external JavaScript file (<code>popup.js</code>) and

281 tracks a single page view:

282 </p>

283 <pre>popup.js:

284 =========

285 var _gaq = _gaq \|\| [];

286 _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);

287 _gaq.push(['_trackPageview']);

288 (function() {

289 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.asy nc = true;

290 ga.src = 'https://ssl.google-analytics.com/ga.js';

291 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore( ga, s);

292 })();

293 popup.html:

294 ===========

295 <!DOCTYPE html>

296 <html>

297 <head>

298 ...

299 <script src="popup.js"></script>

300 </head>

301 <body>

302 ...

303 </body>

304 </html>

305 </pre>

306 <p>

307 Keep in mind that the string <code>UA-XXXXXXXX-X</code> should be replaced

308 with your own Google Analytics account number.

309 </p>

310 <h2 id="toc-tracking-pageviews">Tracking page views</h2>

311 <p>

312 The <code>_gaq.push(['_trackPageview']);</code> code will track a single

313 page view. This code may be used on any page in your extension. When

314 placed on a background page, it will register a view once per browser

315 session. When placed on a popup, it will register a view once every time

316 the popup is opened.

317 </p>

318 <p>

319 By looking at the page view data for each page in your extension, you can

320 get an idea of how many times your users interact with your extension per

321 browser session:

322 </p>

323 <p style="text-align: center">

324 <img src="images/tut_analytics/screenshot02.png" style="width:300px;height:119 px;" alt="Analytics view of the top content for a site.">

325 </p>

326 <h2 id="toc-debugging">Monitoring analytics requests</h2>

327 <p>

328 To ensure that tracking data from your extension is being sent to Google

329 Analytics, you can inspect the pages of your extension in the

330 Developer Tools window (see the

331 <a href="tut_debugging.html">debugging tutorial</a> for more information).

332 As the following figure shows, you should see requests for a file named

333 <strong>__utm.gif</strong> if everything is set up correctly.

334 </p>

335 <p style="text-align: center">

336 <img src="images/tut_analytics/screenshot04.png" style="width:683px;height:418 px;" alt="Developer Tools window showing the __utm.gif request">

337 </p>

338 <h2 id="toc-tracking-events">Tracking events</h2>

339 <p>

340 By configuring event tracking, you can determine which parts of your

341 extension your users interact with the most. For example, if you have

342 three buttons users may click:

343 </p>

344 <pre> <button id='button1'>Button 1</button>

345 <button id='button2'>Button 2</button>

346 <button id='button3'>Button 3</button>

347 </pre>

348 <p>

349 Write a function that sends click events to Google Analytics:

350 </p>

351 <pre> function trackButton(e) {

352 _gaq.push(['_trackEvent', e.target.id, 'clicked']);

353 };

354 </pre>

355 <p>

356 And use it as an event handler for each button's click:

357 </p>

358 <pre> var buttons = document.querySelectorAll('button');

359 for (var i = 0; i < buttons.length; i++) {

360 buttons[i].addEventListener('click', trackButtonClick);

361 }

362 </pre>

363 <p>

364 The Google Analytics event tracking overview page will give you metrics

365 regarding how many times each individual button is clicked:

366 </p>

367 <p style="text-align: center">

368 <img src="images/tut_analytics/screenshot03.png" style="width:300px;height:482 px;" alt="Analytics view of the event tracking data for a site.">

369 </p>

370 <p>

371 By using this approach, you can see which parts of your extension are

372 under-or-overutilized. This information can help guide decisions about UI

373 redesigns or additional functionality to implement.

374 </p>

375 <p>

376 For more information about using the event tracking API, see the

377 Google Analytics

378 <a href="http://code.google.com/apis/analytics/docs/tracking/eventTrackerOverv iew.html">developer

379 documentation</a>.

380 </p>

381 <h2 id="toc-samplecode">Sample code</h2>

382 <p>

383 A sample extension that uses these techniques is

384 available in the Chromium source tree:

385 </p>

386 <blockquote>

387 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensi ons/docs/examples/tutorials/analytics/">.../examples/tutorials/analytics/</a>

388 </blockquote>

389 <p></p>

390 </div>

391 <!-- API PAGE -->

392 <!-- /apiPage -->

393 </div> <!-- /gc-pagecontent -->

394 </div> <!-- /g-section -->

395 </div> <!-- /codesiteContent -->

396 <div id="gc-footer" --="">

397 <div class="text">

398 <p>

399 Except as otherwise <a href="http://code.google.com/policies.html#restrictions ">noted</a>,

400 the content of this page is licensed under the <a rel="license" href="http://c reativecommons.org/licenses/by/3.0/">Creative Commons

401 Attribution 3.0 License</a>, and code samples are licensed under the

402 <a rel="license" href="http://code.google.com/google_bsd_license.html">BSD Lic ense</a>.

403 </p>

404 <p>

405 ©2011 Google

406 </p>

407 <!-- begin analytics -->

408 <script src="https://www.google-analytics.com/urchin.js" type="text/javascript"> </script>

409 <script src="https://www.google-analytics.com/ga.js" type="text/javascript"></sc ript>

410 <script type="text/javascript">

411 // chrome doc tracking

412 try {

413 var engdocs = _gat._getTracker("YT-10763712-2");

414 engdocs._trackPageview();

415 } catch(err) {}

416 // code.google.com site-wide tracking

417 try {

418 _uacct="UA-18071-1";

419 _uanchor=1;

420 _uff=0;

421 urchinTracker();

422 }

423 catch(e) {/* urchinTracker not available. */}

424 </script>

425 <!-- end analytics -->

426 </div>

427 </div> <!-- /gc-footer -->

428 </div> <!-- /gc-container -->

429 </body></html>

OLD	NEW