| OLD | NEW |
|---|
| 1 <!DOCTYPE html><!-- This page is a placeholder for generated extensions api doc.
Note: | 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 | 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 | 3 across api docs and should be edited only with knowledge of the |
| 4 templating mechanism. | 4 templating mechanism. |
| 5 3) All <body>.innerHTML is genereated as an rendering step. If viewed in a | 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 | 6 browser, it will be re-generated from the template, json schema and |
| 7 authored overview content. | 7 authored overview content. |
| 8 4) The <body>.innerHTML is also generated by an offline step so that this | 8 4) The <body>.innerHTML is also generated by an offline step so that this |
| 9 page may easily be indexed by search engines. | 9 page may easily be indexed by search engines. |
| 10 --><html xmlns="http://www.w3.org/1999/xhtml"><head> | 10 --><html xmlns="http://www.w3.org/1999/xhtml"><head> |
| (...skipping 360 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 371 | 371 |
| 372 <h2 id="toc-requirements">Requirements</h2> | 372 <h2 id="toc-requirements">Requirements</h2> |
| 373 <p> | 373 <p> |
| 374 This tutorial expects that you have some familiarity writing extensions for | 374 This tutorial expects that you have some familiarity writing extensions for |
| 375 Google Chrome. If you need information on how to write an extension, please | 375 Google Chrome. If you need information on how to write an extension, please |
| 376 read the <a href="gettingstarted.html">Getting Started tutorial</a>. | 376 read the <a href="gettingstarted.html">Getting Started tutorial</a>. |
| 377 </p> | 377 </p> |
| 378 | 378 |
| 379 <p> | 379 <p> |
| 380 You will also need a <a href="http://www.google.com/analytics">Google | 380 You will also need a <a href="http://www.google.com/analytics">Google |
| 381 Analytics account</a> set up to track your extension. Note that when setting | 381 Analytics account</a> set up to track your extension. Note that when setting |
| 382 up the account, you can use any value in the Website's URL field, as your | 382 up the account, you can use any value in the Website's URL field, as your |
| 383 extension will not have an URL of its own. | 383 extension will not have an URL of its own. |
| 384 </p> | 384 </p> |
| 385 | 385 |
| 386 <p style="text-align: center"> | 386 <p style="text-align: center"> |
| 387 <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."> | 387 <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."> |
| 388 </p> | 388 </p> |
| 389 | 389 |
| 390 <p> | |
| 391 Also note that Google Analytics requires version <strong>4.0.302.2</strong> | |
| 392 of Google Chrome to work correctly. Users with an earlier version of Google | |
| 393 Chrome will not show up on your Google Analytics reports. View | |
| 394 <a href="faq.html#faq-dev-14">this FAQ entry</a> to learn how to check which | |
| 395 version of Google Chrome is deployed to which platform. | |
| 396 </p> | |
| 397 | |
| 398 <h2 id="toc-installing">Installing the tracking code</h2> | 390 <h2 id="toc-installing">Installing the tracking code</h2> |
| 399 | 391 |
| 400 <p> | 392 <p> |
| 401 The standard Google Analytics tracking code snippet fetches a file named | 393 The standard Google Analytics tracking code snippet fetches a file named |
| 402 <code>ga.js</code> from an SSL protected URL if the current page | 394 <code>ga.js</code> from an SSL protected URL if the current page |
| 403 was loaded using the <code>https://</code> protocol. <strong>It is strongly | 395 was loaded using the <code>https://</code> protocol. <strong>Chrome |
| 404 advised to use the SSL protected ga.js in an extension</strong>, | 396 extensions and applications may <em>only</em> use the SSL-protected version of |
| 405 but Google Chrome extension | 397 <code>ga.js</code></strong>. Loading <code>ga.js</code> over insecure HTTP is |
| 406 pages are hosted under <code>chrome-extension://</code> URLs, so the tracking | 398 disallowed by Chrome's default <a href="contentSecurityPolicy.html">Content |
| 407 snippet must be modified slightly to pull <code>ga.js</code> directly from | 399 Security Policy</a>. This, plus the fact that Chrome extensions are hosted |
| 408 <code>https://ssl.google-analytics.com/ga.js</code> instead of the default | 400 under the <code>chrome-extension://</code> schema, requires a slight |
| 409 location. | 401 modification to the usual tracking snippet to pull <code>ga.js</code> directly |
| 402 from <code>https://ssl.google-analytics.com/ga.js</code> instead of the |
| 403 default location. |
| 410 </p> | 404 </p> |
| 411 | 405 |
| 412 <p> | 406 <p> |
| 413 Below is a modified snippet for the | 407 Below is a modified snippet for the |
| 414 <a href="http://code.google.com/apis/analytics/docs/tracking/asyncTracking.htm
l">asynchronous | 408 <a href="http://code.google.com/apis/analytics/docs/tracking/asyncTracking.htm
l">asynchronous |
| 415 tracking API</a> (the modified line is bolded): | 409 tracking API</a> (the modified line is bolded): |
| 416 </p> | 410 </p> |
| 417 | 411 |
| 418 <pre>(function() { | 412 <pre>(function() { |
| 419 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.asy
nc = true; | 413 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.asy
nc = true; |
| 420 <strong>ga.src = 'https://ssl.google-analytics.com/ga.js';</strong> | 414 <strong>ga.src = 'https://ssl.google-analytics.com/ga.js';</strong> |
| 421 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(
ga, s); | 415 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(
ga, s); |
| 422 })(); | 416 })(); |
| 423 </pre> | 417 </pre> |
| 424 | 418 |
| 425 <p> | 419 <p> |
| 426 Here is a background page which loads the asynchronous tracking code and | 420 You'll also need to ensure that your extension has access to load the resource |
| 421 by relaxing the default content security policy. The policy definition in your |
| 422 <a href="manifest.html"><code>manifest.json</code></a> might look like: |
| 423 </p> |
| 424 |
| 425 <pre>{ |
| 426 ..., |
| 427 "content_security_policy": "script-src 'self' https://ssl.google-analytics.com
; object-src 'self'", |
| 428 ... |
| 429 }</pre> |
| 430 |
| 431 <p> |
| 432 Here is a popup page (<code>popup.html</code>) which loads the asynchronous |
| 433 tracking code via an external JavaScript file (<code>popup.js</code>) and |
| 427 tracks a single page view: | 434 tracks a single page view: |
| 428 </p> | 435 </p> |
| 429 | 436 |
| 430 <pre><!DOCTYPE html> | 437 <pre>popup.js: |
| 438 ========= |
| 439 |
| 440 var _gaq = _gaq || []; |
| 441 _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']); |
| 442 _gaq.push(['_trackPageview']); |
| 443 |
| 444 (function() { |
| 445 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.asy
nc = true; |
| 446 ga.src = 'https://ssl.google-analytics.com/ga.js'; |
| 447 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(
ga, s); |
| 448 })(); |
| 449 |
| 450 popup.html: |
| 451 =========== |
| 452 <!DOCTYPE html> |
| 431 <html> | 453 <html> |
| 432 <head> | 454 <head> |
| 433 ... | 455 ... |
| 456 <script src="popup.js"></script> |
| 434 </head> | 457 </head> |
| 435 <body> | 458 <body> |
| 436 <script> | |
| 437 var _gaq = _gaq || []; | |
| 438 _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']); | |
| 439 _gaq.push(['_trackPageview']); | |
| 440 | |
| 441 (function() { | |
| 442 var ga = document.createElement('script'); ga.type = 'text/javascript'; g
a.async = true; | |
| 443 ga.src = 'https://ssl.google-analytics.com/ga.js'; | |
| 444 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBe
fore(ga, s); | |
| 445 })(); | |
| 446 </script> | |
| 447 | |
| 448 ... | 459 ... |
| 449 </body> | 460 </body> |
| 450 </html> | 461 </html> |
| 451 </pre> | 462 </pre> |
| 452 | 463 |
| 453 <p> | 464 <p> |
| 454 Keep in mind that the string <code>UA-XXXXXXXX-X</code> should be replaced | 465 Keep in mind that the string <code>UA-XXXXXXXX-X</code> should be replaced |
| 455 with your own Google Analytics account number. | 466 with your own Google Analytics account number. |
| 456 </p> | 467 </p> |
| 457 | 468 |
| (...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 491 </p> | 502 </p> |
| 492 | 503 |
| 493 <h2 id="toc-tracking-events">Tracking events</h2> | 504 <h2 id="toc-tracking-events">Tracking events</h2> |
| 494 | 505 |
| 495 <p> | 506 <p> |
| 496 By configuring event tracking, you can determine which parts of your | 507 By configuring event tracking, you can determine which parts of your |
| 497 extension your users interact with the most. For example, if you have | 508 extension your users interact with the most. For example, if you have |
| 498 three buttons users may click: | 509 three buttons users may click: |
| 499 </p> | 510 </p> |
| 500 | 511 |
| 501 <pre> <button>Button 1</button> | 512 <pre> <button id='button1'>Button 1</button> |
| 502 <button>Button 2</button> | 513 <button id='button2'>Button 2</button> |
| 503 <button>Button 3</button> | 514 <button id='button3'>Button 3</button> |
| 504 </pre> | 515 </pre> |
| 505 | 516 |
| 506 <p> | 517 <p> |
| 507 Write a function that sends click events to Google Analytics: | 518 Write a function that sends click events to Google Analytics: |
| 508 </p> | 519 </p> |
| 509 | 520 |
| 510 <pre> function trackButton(button_id) { | 521 <pre> function trackButton(e) { |
| 511 _gaq.push(['_trackEvent', 'button' + button_id, 'clicked']); | 522 _gaq.push(['_trackEvent', e.target.id, 'clicked']); |
| 512 }; | 523 }; |
| 513 </pre> | 524 </pre> |
| 514 | 525 |
| 515 <p> | 526 <p> |
| 516 And call it when each button is pressed: | 527 And use it as an event handler for each button's click: |
| 517 </p> | 528 </p> |
| 518 | 529 |
| 519 <pre> <button onclick="trackButton(1);">Button 1</button> | 530 <pre> var buttons = document.querySelectorAll('button'); |
| 520 <button onclick="trackButton(2);">Button 2</button> | 531 for (var i = 0; i < buttons.length; i++) { |
| 521 <button onclick="trackButton(3);">Button 3</button> | 532 buttons[i].addEventListener('click', trackButtonClick); |
| 533 } |
| 522 </pre> | 534 </pre> |
| 523 | 535 |
| 524 <p> | 536 <p> |
| 525 The Google Analytics event tracking overview page will give you metrics | 537 The Google Analytics event tracking overview page will give you metrics |
| 526 regarding how many times each individual button is clicked: | 538 regarding how many times each individual button is clicked: |
| 527 </p> | 539 </p> |
| 528 | 540 |
| 529 <p style="text-align: center"> | 541 <p style="text-align: center"> |
| 530 <img src="images/tut_analytics/screenshot03.png" style="width:300px;height:482
px;" alt="Analytics view of the event tracking data for a site."> | 542 <img src="images/tut_analytics/screenshot03.png" style="width:300px;height:482
px;" alt="Analytics view of the event tracking data for a site."> |
| 531 </p> | 543 </p> |
| (...skipping 230 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 762 _uff=0; | 774 _uff=0; |
| 763 urchinTracker(); | 775 urchinTracker(); |
| 764 } | 776 } |
| 765 catch(e) {/* urchinTracker not available. */} | 777 catch(e) {/* urchinTracker not available. */} |
| 766 </script> | 778 </script> |
| 767 <!-- end analytics --> | 779 <!-- end analytics --> |
| 768 </div> | 780 </div> |
| 769 </div> <!-- /gc-footer --> | 781 </div> <!-- /gc-footer --> |
| 770 </div> <!-- /gc-container --> | 782 </div> <!-- /gc-container --> |
| 771 </body></html> | 783 </body></html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 9212044:
Improving `content_security_policy` documentation. (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src