Google Chronicles: Analytics And Chrome


Published on

This talk was presented at the Web Development SIG of the Greater Cleveland PC Users Group on Saturday, September 19, 2009.

There is a follow-up meeting with a more in-depth look on Google Analytics - this presentation only walks through how to set it up and get started.

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Sarah Dutkiewicz is a web developer for OverDrive, Inc.  When she isn't working, she can be found active in the .NET community and the Cleveland Tech Events community.  She is the owner of Cleveland Tech Events, which she currently runs on her own.  Sarah has a Bachelor of Science in Computer Science and Engineering Technology from the University of Toledo. She is also a Microsoft MVP in Visual C#. For more on Sarah, check out the following sites: Cleveland Tech Events Coding Geekette This presentation was given Saturday, September 19, 2009 for the Web Dev SIG of the Greater Cleveland PC Users Group as part of their Google Chronicles series.
  • Google Analytics gives web site owners and web developers a view of how their sites are being used.  It can show who is visiting the site and where they're from, the most popular pages, and even the most popular content within those pages.
  • Some of the things Google Analytics can track include: * Visitors - where they're coming from - new traffic - browser capabilities
  • Some of the things Google Analytics can track include: * Traffic - who's referring to your site - where people are going from your site - ad traffic - search engine traffic
  • Some of the things Google Analytics can track include: * Content - landing pages - most popular content
  • It's very easy to setup! 1. Go to 2. Log in with an account that's been tied to the Google system. 3. Click Sign Up button. 4. Start this wizard... - Which site is it tracking - Give the account a name - Set the country - Set the timezone 5. Click Continue.
  • Continuing setup... Just a few more basic details... then click Continue.
  • And now the tough part... copy and paste the Javascript code onto your site. - Perhaps include the code in an include file. - This code *must* appear within the <body></body> tags.
  • This is what it looks like in the Cleveland Tech Events template.
  • If you work for a company that likes this package but doesn't want to use Google's servers, this is the standalone product.  See the link on the slide for more details - including resellers.
  • Come out in December to learn more about the metrics covered in various web site statistics tracking packages - including Google Analytics, Google Urchin, and possibly others (like Webtrends and Woopra).
  • This presentation is covering Google Chrome, the web browser - not to be confused with their upcoming operating system of the same name.
  • As web developers, we may rely on the user agent to detect whether a browser is mobile or even what platform the end-user is using.  We may display selective text based on this user agent string.  This is how it looks in Chrome. More on WebKit can be found here:
  • Really.. no... Google is *not* entering the automobile industry.
  • For more information on Google Gears, check out the FAQ here:
  • Web Inspector To get this to work, right click on the web page and click "Inspect Element".
  • Task Manager To get to this feature: 1. Click on the page button (right next to the address bar). 2. Click on Developer. 3. Click on Task Manager. Stats for nerds goes to: about:memory If you terminate the page, the Google Chrome error page will appear.  You can see what this error page looks like by going here: about:crash
  • Javascript Debugger Yes - that is the Google Analytics Javascript file.
  • Resource Tracking See how large your site resources are and how long it takes for them to load.
  • Google Chronicles: Analytics And Chrome

    1. 1. Google Chronicles Analytics and Chrome Sarah Dutkiewicz Cleveland Tech Events [email_address]
    2. 2. Agenda <ul><ul><li>Analytics </li></ul></ul><ul><ul><ul><li>What is it? </li></ul></ul></ul><ul><ul><ul><li>Why is it important for web developers? </li></ul></ul></ul><ul><ul><ul><li>How easy is it to get started? </li></ul></ul></ul><ul><ul><ul><li>Future meeting information </li></ul></ul></ul><ul><ul><li>Chrome </li></ul></ul><ul><ul><ul><li>What do developers need to know about when developing for this web browser? </li></ul></ul></ul>
    3. 3. Google Analytics - What Is It? Google Analytics can be found at
    4. 4. Google Analytics - Types of Reports
    5. 5. Google Analytics - Types of Reports
    6. 6. Google Analytics - Types of Reports
    7. 7. Google Analytics - Getting Started
    8. 8. Google Analytics - Getting Signed Up
    9. 9. Google Analytics - Adding Tracking
    10. 10. Google Analytics - Adding Tracking
    11. 11. Google Urchin <ul><ul><li>Original name of the Google Analytics project </li></ul></ul><ul><ul><li>Now a standalone commercial product available to run Analytics on your own sites from your own servers, bypassing Google's servers </li></ul></ul><ul><ul><li> </li></ul></ul>
    12. 12. More on Web Analytics
    13. 13. Google Chrome <ul><ul><li>WebKit </li></ul></ul><ul><ul><li>V8 </li></ul></ul><ul><ul><li>Gears </li></ul></ul>Picture from
    14. 14. Google Chrome - User Agent <ul><li>Screenshot taken while visiting </li></ul>Based on WebKit
    15. 15. Google's V8 Picture taken from
    16. 16. Google's V8 Javascript Engine <ul><ul><li>Open source Javascript engine </li></ul></ul><ul><ul><li>Written in C++ </li></ul></ul><ul><ul><li>Targets EMCA-262 </li></ul></ul><ul><ul><li> </li></ul></ul><ul><ul><li>Goal:  fast execution of large JavaScript applications </li></ul></ul><ul><ul><li>Beats out SpiderMonkey (Firefox), JScript (Internet Explorer), and JavaScriptCore (Safari) in some benchmarks 1 </li></ul></ul>1 More on the benchmarks can be found here:
    17. 17. Google Gears <ul><ul><li>Cross-platform, open source browser add-on to let apps run offline </li></ul></ul><ul><ul><li>Three key features </li></ul></ul><ul><ul><ul><li>A local server to cache resources </li></ul></ul></ul><ul><ul><ul><li>A database to store to and access via a browser  </li></ul></ul></ul><ul><ul><ul><li>A worker thread pool </li></ul></ul></ul><ul><ul><li> </li></ul></ul>
    18. 18. Google Chrome Web Dev Quirks <ul><ul><li>Encoding </li></ul></ul><ul><ul><ul><li>Specify close to the top, within <head></head> tags. </li></ul></ul></ul><ul><ul><ul><li>Declare encoding in a standalone meta tag, as opposed to writing it out with a document.write(); statement </li></ul></ul></ul><ul><ul><li>URL Encoding </li></ul></ul><ul><ul><ul><li>Query parameters are already percent-encoded by Chrome </li></ul></ul></ul><ul><ul><li>Active X vs Netscape Plugin Application Programming Interface </li></ul></ul><ul><ul><li>Pop ups </li></ul></ul><ul><ul><li>HTTPS, SSL, and secure sites </li></ul></ul>
    19. 19. Google Chrome - Web Dev Tools
    20. 20. Google Chrome - Web Dev Tools
    21. 21. Google Chrome - Web Dev Tools
    22. 22. Google Chrome - Web Dev Tools
    23. 23. Google Chrome Resources <ul><ul><li>Features: </li></ul></ul><ul><ul><li>Information for Web Developers: </li></ul></ul><ul><ul><li>Chrome Experiments: </li></ul></ul><ul><ul><li>Chromium: </li></ul></ul>
    24. 24. Contact Information <ul><li>Sarah Dutkiewicz </li></ul><ul><li>[email_address] </li></ul><ul><li> </li></ul>This presentation was created with Google docs.  For more info, see Cleveland Tech Events [email_address]