| 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 376 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 387 | 387 |
| 388 <h2 id="toc-requirements">Requirements</h2> | 388 <h2 id="toc-requirements">Requirements</h2> |
| 389 <p> | 389 <p> |
| 390 This tutorial expects that you have some familiarity writing extensions for | 390 This tutorial expects that you have some familiarity writing extensions for |
| 391 Google Chrome. If you need information on how to write an extension, please | 391 Google Chrome. If you need information on how to write an extension, please |
| 392 read the <a href="gettingstarted.html">Getting Started tutorial</a>. | 392 read the <a href="gettingstarted.html">Getting Started tutorial</a>. |
| 393 </p> | 393 </p> |
| 394 | 394 |
| 395 <p> | 395 <p> |
| 396 You will also need a <a href="http://www.google.com/analytics">Google | 396 You will also need a <a href="http://www.google.com/analytics">Google |
| 397 Analytics account</a> set up to track your extension. Note that when setting | 397 Analytics account</a> set up to track your extension. Note that when setting |
| 398 up the account, you can use any value in the Website's URL field, as your | 398 up the account, you can use any value in the Website's URL field, as your |
| 399 extension will not have an URL of its own. | 399 extension will not have an URL of its own. |
| 400 </p> | 400 </p> |
| 401 | 401 |
| 402 <p style="text-align: center"> | 402 <p style="text-align: center"> |
| 403 <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."> | 403 <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."> |
| 404 </p> | 404 </p> |
| 405 | 405 |
| 406 <p> | |
| 407 Also note that Google Analytics requires version <strong>4.0.302.2</strong> | |
| 408 of Google Chrome to work correctly. Users with an earlier version of Google | |
| 409 Chrome will not show up on your Google Analytics reports. View | |
| 410 <a href="faq.html#faq-dev-14">this FAQ entry</a> to learn how to check which | |
| 411 version of Google Chrome is deployed to which platform. | |
| 412 </p> | |
| 413 | |
| 414 <h2 id="toc-installing">Installing the tracking code</h2> | 406 <h2 id="toc-installing">Installing the tracking code</h2> |
| 415 | 407 |
| 416 <p> | 408 <p> |
| 417 The standard Google Analytics tracking code snippet fetches a file named | 409 The standard Google Analytics tracking code snippet fetches a file named |
| 418 <code>ga.js</code> from an SSL protected URL if the current page | 410 <code>ga.js</code> from an SSL protected URL if the current page |
| 419 was loaded using the <code>https://</code> protocol. <strong>It is strongly | 411 was loaded using the <code>https://</code> protocol. <strong>Chrome |
| 420 advised to use the SSL protected ga.js in an extension</strong>, | 412 extensions and applications may <em>only</em> use the SSL-protected version of |
| 421 but Google Chrome extension | 413 <code>ga.js</code></strong>. Loading <code>ga.js</code> over insecure HTTP is |
| 422 pages are hosted under <code>chrome-extension://</code> URLs, so the tracking | 414 disallowed by Chrome's default <a href="contentSecurityPolicy.html">Content |
| 423 snippet must be modified slightly to pull <code>ga.js</code> directly from | 415 Security Policy</a>. This, plus the fact that Chrome extensions are hosted |
| 424 <code>https://ssl.google-analytics.com/ga.js</code> instead of the default | 416 under the <code>chrome-extension://</code> schema, requires a slight |
| 425 location. | 417 modification to the usual tracking snippet to pull <code>ga.js</code> directly |
| 418 from <code>https://ssl.google-analytics.com/ga.js</code> instead of the |
| 419 default location. |
| 426 </p> | 420 </p> |
| 427 | 421 |
| 428 <p> | 422 <p> |
| 429 Below is a modified snippet for the | 423 Below is a modified snippet for the |
| 430 <a href="http://code.google.com/apis/analytics/docs/tracking/asyncTracking.htm
l">asynchronous | 424 <a href="http://code.google.com/apis/analytics/docs/tracking/asyncTracking.htm
l">asynchronous |
| 431 tracking API</a> (the modified line is bolded): | 425 tracking API</a> (the modified line is bolded): |
| 432 </p> | 426 </p> |
| 433 | 427 |
| 434 <pre>(function() { | 428 <pre>(function() { |
| 435 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.asy
nc = true; | 429 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.asy
nc = true; |
| 436 <strong>ga.src = 'https://ssl.google-analytics.com/ga.js';</strong> | 430 <strong>ga.src = 'https://ssl.google-analytics.com/ga.js';</strong> |
| 437 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(
ga, s); | 431 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(
ga, s); |
| 438 })(); | 432 })(); |
| 439 </pre> | 433 </pre> |
| 440 | 434 |
| 441 <p> | 435 <p> |
| 442 Here is a background page which loads the asynchronous tracking code and | 436 You'll also need to ensure that your extension has access to load the resource |
| 437 by relaxing the default content security policy. The policy definition in your |
| 438 <a href="manifest.html"><code>manifest.json</code></a> might look like: |
| 439 </p> |
| 440 |
| 441 <pre>{ |
| 442 ..., |
| 443 "content_security_policy": "script-src 'self' https://ssl.google-analytics.com
; object-src 'self'", |
| 444 ... |
| 445 }</pre> |
| 446 |
| 447 <p> |
| 448 Here is a popup page (<code>popup.html</code>) which loads the asynchronous |
| 449 tracking code via an external JavaScript file (<code>popup.js</code>) and |
| 443 tracks a single page view: | 450 tracks a single page view: |
| 444 </p> | 451 </p> |
| 445 | 452 |
| 446 <pre><!DOCTYPE html> | 453 <pre>popup.js: |
| 454 ========= |
| 455 |
| 456 var _gaq = _gaq || []; |
| 457 _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']); |
| 458 _gaq.push(['_trackPageview']); |
| 459 |
| 460 (function() { |
| 461 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.asy
nc = true; |
| 462 ga.src = 'https://ssl.google-analytics.com/ga.js'; |
| 463 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(
ga, s); |
| 464 })(); |
| 465 |
| 466 popup.html: |
| 467 =========== |
| 468 <!DOCTYPE html> |
| 447 <html> | 469 <html> |
| 448 <head> | 470 <head> |
| 449 ... | 471 ... |
| 472 <script src="popup.js"></script> |
| 450 </head> | 473 </head> |
| 451 <body> | 474 <body> |
| 452 <script> | |
| 453 var _gaq = _gaq || []; | |
| 454 _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']); | |
| 455 _gaq.push(['_trackPageview']); | |
| 456 | |
| 457 (function() { | |
| 458 var ga = document.createElement('script'); ga.type = 'text/javascript'; g
a.async = true; | |
| 459 ga.src = 'https://ssl.google-analytics.com/ga.js'; | |
| 460 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBe
fore(ga, s); | |
| 461 })(); | |
| 462 </script> | |
| 463 | |
| 464 ... | 475 ... |
| 465 </body> | 476 </body> |
| 466 </html> | 477 </html> |
| 467 </pre> | 478 </pre> |
| 468 | 479 |
| 469 <p> | 480 <p> |
| 470 Keep in mind that the string <code>UA-XXXXXXXX-X</code> should be replaced | 481 Keep in mind that the string <code>UA-XXXXXXXX-X</code> should be replaced |
| 471 with your own Google Analytics account number. | 482 with your own Google Analytics account number. |
| 472 </p> | 483 </p> |
| 473 | 484 |
| (...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 507 </p> | 518 </p> |
| 508 | 519 |
| 509 <h2 id="toc-tracking-events">Tracking events</h2> | 520 <h2 id="toc-tracking-events">Tracking events</h2> |
| 510 | 521 |
| 511 <p> | 522 <p> |
| 512 By configuring event tracking, you can determine which parts of your | 523 By configuring event tracking, you can determine which parts of your |
| 513 extension your users interact with the most. For example, if you have | 524 extension your users interact with the most. For example, if you have |
| 514 three buttons users may click: | 525 three buttons users may click: |
| 515 </p> | 526 </p> |
| 516 | 527 |
| 517 <pre> <button>Button 1</button> | 528 <pre> <button id='button1'>Button 1</button> |
| 518 <button>Button 2</button> | 529 <button id='button2'>Button 2</button> |
| 519 <button>Button 3</button> | 530 <button id='button3'>Button 3</button> |
| 520 </pre> | 531 </pre> |
| 521 | 532 |
| 522 <p> | 533 <p> |
| 523 Write a function that sends click events to Google Analytics: | 534 Write a function that sends click events to Google Analytics: |
| 524 </p> | 535 </p> |
| 525 | 536 |
| 526 <pre> function trackButton(button_id) { | 537 <pre> function trackButton(e) { |
| 527 _gaq.push(['_trackEvent', 'button' + button_id, 'clicked']); | 538 _gaq.push(['_trackEvent', e.target.id, 'clicked']); |
| 528 }; | 539 }; |
| 529 </pre> | 540 </pre> |
| 530 | 541 |
| 531 <p> | 542 <p> |
| 532 And call it when each button is pressed: | 543 And use it as an event handler for each button's click: |
| 533 </p> | 544 </p> |
| 534 | 545 |
| 535 <pre> <button onclick="trackButton(1);">Button 1</button> | 546 <pre> var buttons = document.querySelectorAll('button'); |
| 536 <button onclick="trackButton(2);">Button 2</button> | 547 for (var i = 0; i < buttons.length; i++) { |
| 537 <button onclick="trackButton(3);">Button 3</button> | 548 buttons[i].addEventListener('click', trackButtonClick); |
| 549 } |
| 538 </pre> | 550 </pre> |
| 539 | 551 |
| 540 <p> | 552 <p> |
| 541 The Google Analytics event tracking overview page will give you metrics | 553 The Google Analytics event tracking overview page will give you metrics |
| 542 regarding how many times each individual button is clicked: | 554 regarding how many times each individual button is clicked: |
| 543 </p> | 555 </p> |
| 544 | 556 |
| 545 <p style="text-align: center"> | 557 <p style="text-align: center"> |
| 546 <img src="images/tut_analytics/screenshot03.png" style="width:300px;height:482
px;" alt="Analytics view of the event tracking data for a site."> | 558 <img src="images/tut_analytics/screenshot03.png" style="width:300px;height:482
px;" alt="Analytics view of the event tracking data for a site."> |
| 547 </p> | 559 </p> |
| (...skipping 230 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 778 _uff=0; | 790 _uff=0; |
| 779 urchinTracker(); | 791 urchinTracker(); |
| 780 } | 792 } |
| 781 catch(e) {/* urchinTracker not available. */} | 793 catch(e) {/* urchinTracker not available. */} |
| 782 </script> | 794 </script> |
| 783 <!-- end analytics --> | 795 <!-- end analytics --> |
| 784 </div> | 796 </div> |
| 785 </div> <!-- /gc-footer --> | 797 </div> <!-- /gc-footer --> |
| 786 </div> <!-- /gc-container --> | 798 </div> <!-- /gc-container --> |
| 787 </body></html> | 799 </body></html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 9212044:
Improving `content_security_policy` documentation. (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src