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 |