diff options
Diffstat (limited to 'chrome/common/extensions/docs/static/tut_analytics.html')
| -rw-r--r-- | chrome/common/extensions/docs/static/tut_analytics.html | 187 |
1 files changed, 187 insertions, 0 deletions
diff --git a/chrome/common/extensions/docs/static/tut_analytics.html b/chrome/common/extensions/docs/static/tut_analytics.html new file mode 100644 index 0000000..aa3bd5f --- /dev/null +++ b/chrome/common/extensions/docs/static/tut_analytics.html @@ -0,0 +1,187 @@ +<div id="pageData-name" class="pageData">Tutorial: Google Analytics</div> +<div id="pageData-showTOC" class="pageData">true</div> + +<p>This tutorial demonstrates using Google Analytics to track the usage of your +extension.</p> + +<h2 id="toc-requirements">Requirements</h2> +<p> + This tutorial expects that you have some familiarity writing extensions for + Google Chrome. If you need information on how to write an extension, please + read the <a href="gettingstarted.html">Getting Started tutorial</a>. +</p> + +<p> + You will also need a <a href="http://www.google.com/analytics">Google + Analytics account</a> set up to track your extension. Note that when setting + up the account, you can use any value in the Website's URL field, as your + extension will not have an URL of its own. +</p> + +<p style="text-align: center"> + <img src="images/tut_analytics/screenshot01.png" + style="width:400px;height:82px;" + alt="The analytics setup with info for a chrome extension filled out." /> +</p> + +<p> + Also note that Google Analytics requires version <strong>4.0.302.2</strong> + of Google Chrome to work correctly. Users with an earlier version of Google + Chrome will not show up on your Google Analytics reports. View + <a href="faq.html#faq-dev-14">this FAQ entry</a> to learn how to check which + version of Google Chrome is deployed to which platform. +</p> + +<h2 id="toc-installing">Installing the tracking code</h2> + +<p> + The standard Google Analytics tracking code snippet fetches a file named + <code>ga.js</code> from an SSL protected URL if the current page + was loaded using the <code>https://</code> protocol. <strong>It is strongly + advised to use the SSL protected ga.js in an extension</strong>, + but Google Chrome extension + pages are hosted under <code>chrome-extension://</code> URLs, so the tracking + snippet must be modified slightly to pull <code>ga.js</code> directly from + <code>https://ssl.google-analytics.com/ga.js</code> instead of the default + location. +</p> + +<p> + Below is a modified snippet for the + <a href="http://code.google.com/apis/analytics/docs/tracking/asyncTracking.html">asynchronous + tracking API</a> (the modified line is bolded): +</p> + +<pre> +(function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + <strong>ga.src = 'https://ssl.google-analytics.com/ga.js';</strong> + (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga); +})(); +</pre> + +<p> + Here is a background page which loads the asynchronous tracking code and + tracks a single page view: +</p> + +<pre> +<!DOCTYPE html> +<html> + <head> + ... + </head> + <body> + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = 'https://ssl.google-analytics.com/ga.js'; + (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga); + })(); + </script> + + ... + </body> +</html> +</pre> + +<p> + Keep in mind that the string <code>UA-XXXXXXXX-X</code> should be replaced + with your own Google Analytics account number. +</p> + +<h2 id="toc-tracking-pageviews">Tracking page views</h2> + +<p> + The <code>_gaq.push(['_trackPageview']);</code> code will track a single + page view. This code may be used on any page in your extension. When + placed on a background page, it will register a view once per browser + session. When placed on a popup, it will register a view once every time + the popup is opened. +</p> + +<p> + By looking at the page view data for each page in your extension, you can + get an idea of how many times your users interact with your extension per + browser session: +</p> + +<p style="text-align: center"> + <img src="images/tut_analytics/screenshot02.png" + style="width:300px;height:119px;" + alt="Analytics view of the top content for a site." /> +</p> + +<h2 id="toc-tracking-events">Tracking events</h2> + +<p> + By configuring event tracking, you can determine which parts of your + extension your users interact with the most. For example, if you have + three buttons users may click: +</p> + +<pre> + <button>Button 1</button> + <button>Button 2</button> + <button>Button 3</button> +</pre> + +<p> + Write a function that sends click events to Google Analytics: +</p> + +<pre> + function trackButton(button_id) { + _gaq.push(['_trackEvent', 'button' + button_id, 'clicked']); + }; +</pre> + +<p> + And call it when each button is pressed: +</p> + +<pre> + <button onclick="trackButton(1);">Button 1</button> + <button onclick="trackButton(2);">Button 2</button> + <button onclick="trackButton(3);">Button 3</button> +</pre> + +<p> + The Google Analytics event tracking overview page will give you metrics + regarding how many times each individual button is clicked: +</p> + +<p style="text-align: center"> + <img src="images/tut_analytics/screenshot03.png" + style="width:300px;height:482px;" + alt="Analytics view of the event tracking data for a site." /> +</p> + +<p> + By using this approach, you can see which parts of your extension are + under-or-overutilized. This information can help guide decisions about UI + redesigns or additional functionality to implement. +</p> + +<p> + For more information about using the event tracking API, see the + Google Analytics + <a href="http://code.google.com/apis/analytics/docs/tracking/eventTrackerOverview.html]">developer + documentation</a>. +</p> + +<h2 id="toc-samplecode">Sample code</h2> + +<p> + A sample extension that uses these techniques is + available in the Chromium source tree: +</p> + +<blockquote> + <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/tutorials/analytics/">.../examples/tutorials/analytics/</a> +</blockquote> +</p> |