SlideShare une entreprise Scribd logo
1  sur  11
Télécharger pour lire hors ligne
Custom Event Reporting from Flash to Google Analytics




                      Joseph Labrecque – University of Denver
                                                  Senior Multimedia Application Developer
                                                     Adobe Higher Education Leader


Copyright 2009 Joseph Labrecque – Adobe Higher Education Leader      1
Google Analytics Tracking For Adobe Flash

        http://code.google.com/p/gaforflash/

        This is an ActionScript 3 API for Google Analytics
        data collection.


        analytics_flash.swc – Special visual component
        for Flash Professional.

        analytics.swc – Code library for Flash or Flex.


        Tracks page views and custom events.




Copyright 2009 Joseph Labrecque – Adobe Higher Education Leader   2
Page Views vs. Event Tracking

        Instantiate Tracker
        Pass in a DisplayObject, Web Property ID, Mode, Debug
        import com.google.analytics.GATracker;
        import com.google.analytics.AnalyticsTracker;

        private var tracker:AnalyticsTracker;

        private function init():void {
            tracker = new GATracker(this, "UA-1156XXX-xx", "AS3", false);
        }



        Track Page View
        tracker.trackPageView(“http://somewebsite.com/somepage/");



        Track Custom Event
        tracker.trackEvent(“Category", “Action”, “Label”, “Value”);




Copyright 2009 Joseph Labrecque – Adobe Higher Education Leader   3
Video Player Event Tracking

        Custom Events / Custom Data

        Play [RTMP URL, Seconds]
        Pause [RTMP URL, Seconds]
        Scrub [RTMP URL, Seconds]
        End [RTMP URL, Seconds]

        Can be used as a supplement to
        normal FMS Logs.

        Won’t interfere with other Google
        Analytics data such as standard
        Page Views.

        Provides a lot more detail.



Copyright 2009 Joseph Labrecque – Adobe Higher Education Leader   4
Video Player Event Tracking




                                                                  DEMO

Copyright 2009 Joseph Labrecque – Adobe Higher Education Leader    5
Unorthodox Event Tracking

        Why be restricted to just Video Events
        or Application State data???

        Every click on Midge will generate a specific
        event to track both the body part clicked, and
        the specific X,Y coordinate of that click event.

        We’ve been collecting data from these mouse
        clicks since late August.




Copyright 2009 Joseph Labrecque – Adobe Higher Education Leader   6
Google Analytics Data Consumption Setup


        as3corelib
        ActionScript 3.0 library for several basic utilities
        http://code.google.com/p/as3corelib/

        as3httpclientlib
        HTTP/HTTPS client library for Actionscript 3
        http://code.google.com/p/as3httpclientlib/

        as3crypto
        Cryptography library for ActionScript 3
        http://code.google.com/p/as3crypto/


        This article is SUPER useful:
        http://www.zedia.net/2009/how-to-connect-to-
        google-analytics-data-api-in-air/



Copyright 2009 Joseph Labrecque – Adobe Higher Education Leader   7
Midge Data Consumption

        Midge again! Let’s plot some data.

        1.      Set namespaces for E4X
        2.      Authenticate to GA with our account data
        3.      Request data from GA through HTTP query string
        4.      Parse returned XML string to new XML Object
        5.      Loop over events and read X/Y coordinates
        6.      Plot click events over Midge’s body


        All done through AS3 – no PHP/CF/Whatever.

        Total Flash Player to GA data roundtripping.




Copyright 2009 Joseph Labrecque – Adobe Higher Education Leader   8
Midge Data Consumption




                                                                  DEMO

Copyright 2009 Joseph Labrecque – Adobe Higher Education Leader    9
In Conclusion… (what’s so great about all this?)

        Hey- expecting Flex data charts?
        No Flex data charts in this entire
        presentation!

        No traditional page view data from
        GA to mess with, sort through, or
        toss away!

        We both report and retrieve only
        the information relevant to specific
        needs.

        Not a huge investment in time or
        money to implement.




Copyright 2009 Joseph Labrecque – Adobe Higher Education Leader   10
Want More Info? Contact Me!


                                                                  Joseph Labrecque
                                                                  Senior Multimedia Application Developer
                                                                  Adobe Higher Education Leader
                                                                  Email:     Joseph.Labrecque@du.edu
                                                                  Twitter:   @JosephLabrecque
                                                                  Weblog:    http:///inflagrantedelicto.memoryspiral.com




                                                                                  11
Copyright 2009 Joseph Labrecque – Adobe Higher Education Leader                   11

Contenu connexe

Similaire à Custom Event Reporting from Flash to Google Analytics

FLASH AND AIR IN EDUCATION
FLASH AND AIR IN EDUCATIONFLASH AND AIR IN EDUCATION
FLASH AND AIR IN EDUCATIONJoseph Labrecque
 
iPhone App from concept to product
iPhone App from concept to productiPhone App from concept to product
iPhone App from concept to productjoeysim
 
Evolphin Zoom - Versioning DAM, Vercsion Cue Alternative
Evolphin Zoom - Versioning DAM, Vercsion Cue AlternativeEvolphin Zoom - Versioning DAM, Vercsion Cue Alternative
Evolphin Zoom - Versioning DAM, Vercsion Cue AlternativeRuchi Jain
 
Bootstrap4XPages
Bootstrap4XPagesBootstrap4XPages
Bootstrap4XPagesTeamstudio
 
Flash SEO Secrets
Flash SEO SecretsFlash SEO Secrets
Flash SEO Secretsrtretola
 
Apache Flex and the imperfect Web
Apache Flex and the imperfect WebApache Flex and the imperfect Web
Apache Flex and the imperfect Webmasuland
 
Adobe jax2010 1_dashboard
Adobe jax2010 1_dashboardAdobe jax2010 1_dashboard
Adobe jax2010 1_dashboardguest9776673
 
Getting Familiar with Adobe Edge Tools and Services
Getting Familiar with Adobe Edge Tools and ServicesGetting Familiar with Adobe Edge Tools and Services
Getting Familiar with Adobe Edge Tools and ServicesJoseph Labrecque
 
Orchestrate Your End-to-end Mainframe Application Release Pipeline
Orchestrate Your End-to-end Mainframe Application Release PipelineOrchestrate Your End-to-end Mainframe Application Release Pipeline
Orchestrate Your End-to-end Mainframe Application Release PipelineDevOps.com
 
Seattle bestpractices2010
Seattle bestpractices2010Seattle bestpractices2010
Seattle bestpractices2010Olaseni Odebiyi
 
Adobe AIR. NativeProcess. FFMPEG. Awesome.
Adobe AIR. NativeProcess. FFMPEG. Awesome.Adobe AIR. NativeProcess. FFMPEG. Awesome.
Adobe AIR. NativeProcess. FFMPEG. Awesome.Joseph Labrecque
 
Widgets Tools and Doodads for Webmasters - CIL 2008
Widgets Tools and Doodads for Webmasters - CIL 2008Widgets Tools and Doodads for Webmasters - CIL 2008
Widgets Tools and Doodads for Webmasters - CIL 2008Darlene Fichter
 
Xebia adobe flash mobile applications
Xebia adobe flash mobile applicationsXebia adobe flash mobile applications
Xebia adobe flash mobile applicationsMichael Chaize
 
Afik Gal @alphageeks: Flex Intro
Afik Gal @alphageeks: Flex IntroAfik Gal @alphageeks: Flex Intro
Afik Gal @alphageeks: Flex IntroAlphageeks
 
Go_ Building Web Applications ( PDFDrive.com ).pdf
Go_ Building Web Applications ( PDFDrive.com ).pdfGo_ Building Web Applications ( PDFDrive.com ).pdf
Go_ Building Web Applications ( PDFDrive.com ).pdfRicardoSousa631355
 
Google App Engine for Java
Google App Engine for JavaGoogle App Engine for Java
Google App Engine for JavaLars Vogel
 
Thinking in react 2018
Thinking in react 2018Thinking in react 2018
Thinking in react 2018Guy Balzam
 

Similaire à Custom Event Reporting from Flash to Google Analytics (20)

Swf search final
Swf search finalSwf search final
Swf search final
 
FLASH AND AIR IN EDUCATION
FLASH AND AIR IN EDUCATIONFLASH AND AIR IN EDUCATION
FLASH AND AIR IN EDUCATION
 
Fewd week4 slides
Fewd week4 slidesFewd week4 slides
Fewd week4 slides
 
iPhone App from concept to product
iPhone App from concept to productiPhone App from concept to product
iPhone App from concept to product
 
Evolphin Zoom - Versioning DAM, Vercsion Cue Alternative
Evolphin Zoom - Versioning DAM, Vercsion Cue AlternativeEvolphin Zoom - Versioning DAM, Vercsion Cue Alternative
Evolphin Zoom - Versioning DAM, Vercsion Cue Alternative
 
Bootstrap4XPages
Bootstrap4XPagesBootstrap4XPages
Bootstrap4XPages
 
Flash SEO Secrets
Flash SEO SecretsFlash SEO Secrets
Flash SEO Secrets
 
Apache Flex and the imperfect Web
Apache Flex and the imperfect WebApache Flex and the imperfect Web
Apache Flex and the imperfect Web
 
Adobe jax2010 1_dashboard
Adobe jax2010 1_dashboardAdobe jax2010 1_dashboard
Adobe jax2010 1_dashboard
 
Getting Familiar with Adobe Edge Tools and Services
Getting Familiar with Adobe Edge Tools and ServicesGetting Familiar with Adobe Edge Tools and Services
Getting Familiar with Adobe Edge Tools and Services
 
Intro to PhoneGap
Intro to PhoneGapIntro to PhoneGap
Intro to PhoneGap
 
Orchestrate Your End-to-end Mainframe Application Release Pipeline
Orchestrate Your End-to-end Mainframe Application Release PipelineOrchestrate Your End-to-end Mainframe Application Release Pipeline
Orchestrate Your End-to-end Mainframe Application Release Pipeline
 
Seattle bestpractices2010
Seattle bestpractices2010Seattle bestpractices2010
Seattle bestpractices2010
 
Adobe AIR. NativeProcess. FFMPEG. Awesome.
Adobe AIR. NativeProcess. FFMPEG. Awesome.Adobe AIR. NativeProcess. FFMPEG. Awesome.
Adobe AIR. NativeProcess. FFMPEG. Awesome.
 
Widgets Tools and Doodads for Webmasters - CIL 2008
Widgets Tools and Doodads for Webmasters - CIL 2008Widgets Tools and Doodads for Webmasters - CIL 2008
Widgets Tools and Doodads for Webmasters - CIL 2008
 
Xebia adobe flash mobile applications
Xebia adobe flash mobile applicationsXebia adobe flash mobile applications
Xebia adobe flash mobile applications
 
Afik Gal @alphageeks: Flex Intro
Afik Gal @alphageeks: Flex IntroAfik Gal @alphageeks: Flex Intro
Afik Gal @alphageeks: Flex Intro
 
Go_ Building Web Applications ( PDFDrive.com ).pdf
Go_ Building Web Applications ( PDFDrive.com ).pdfGo_ Building Web Applications ( PDFDrive.com ).pdf
Go_ Building Web Applications ( PDFDrive.com ).pdf
 
Google App Engine for Java
Google App Engine for JavaGoogle App Engine for Java
Google App Engine for Java
 
Thinking in react 2018
Thinking in react 2018Thinking in react 2018
Thinking in react 2018
 

Plus de Joseph Labrecque

Producing Quality Video Content for Online Learning
Producing Quality Video Content for Online LearningProducing Quality Video Content for Online Learning
Producing Quality Video Content for Online LearningJoseph Labrecque
 
Interactive Animation with Adobe Animate CC
Interactive Animation with Adobe Animate CCInteractive Animation with Adobe Animate CC
Interactive Animation with Adobe Animate CCJoseph Labrecque
 
Cinematic Interactives with Animate CC
Cinematic Interactives with Animate CCCinematic Interactives with Animate CC
Cinematic Interactives with Animate CCJoseph Labrecque
 
Getting Familiar with Animate CC
Getting Familiar with Animate CCGetting Familiar with Animate CC
Getting Familiar with Animate CCJoseph Labrecque
 
Animate CC and the Flash Runtimes at Adobe MAX
Animate CC and the Flash Runtimes at Adobe MAX Animate CC and the Flash Runtimes at Adobe MAX
Animate CC and the Flash Runtimes at Adobe MAX Joseph Labrecque
 
Adobe Animate CC: Introduction to Animation and Interactivity
Adobe Animate CC: Introduction to Animation and InteractivityAdobe Animate CC: Introduction to Animation and Interactivity
Adobe Animate CC: Introduction to Animation and InteractivityJoseph Labrecque
 
Adobe Animate CC: Tool for the Changing Tech Landscape
 Adobe Animate CC: Tool for the Changing Tech Landscape Adobe Animate CC: Tool for the Changing Tech Landscape
Adobe Animate CC: Tool for the Changing Tech LandscapeJoseph Labrecque
 
Surviving Industry Disruption in Higher Education
Surviving Industry Disruption in Higher EducationSurviving Industry Disruption in Higher Education
Surviving Industry Disruption in Higher EducationJoseph Labrecque
 
Designing Short, Simple, and Effective Video Content for Online Consumption
Designing Short, Simple, and Effective Video Content for Online ConsumptionDesigning Short, Simple, and Effective Video Content for Online Consumption
Designing Short, Simple, and Effective Video Content for Online ConsumptionJoseph Labrecque
 
Introducing Adobe Animate CC
Introducing Adobe Animate CCIntroducing Adobe Animate CC
Introducing Adobe Animate CCJoseph Labrecque
 
Flash Professional CC for Mobile
Flash Professional CC for MobileFlash Professional CC for Mobile
Flash Professional CC for MobileJoseph Labrecque
 
Flash Professional CC 2015: A New Era in Animation and Interactivity
Flash Professional CC 2015: A New Era in Animation and InteractivityFlash Professional CC 2015: A New Era in Animation and Interactivity
Flash Professional CC 2015: A New Era in Animation and InteractivityJoseph Labrecque
 
Adobe MAX 2015 - Giving Flash Professional Another Look
Adobe MAX 2015 - Giving Flash Professional Another LookAdobe MAX 2015 - Giving Flash Professional Another Look
Adobe MAX 2015 - Giving Flash Professional Another LookJoseph Labrecque
 
Why Flash Professional Still Matters for the Web and Beyond
Why Flash Professional Still Matters for the Web and BeyondWhy Flash Professional Still Matters for the Web and Beyond
Why Flash Professional Still Matters for the Web and BeyondJoseph Labrecque
 
Mobile Application Development Technology Roundup
Mobile Application Development Technology RoundupMobile Application Development Technology Roundup
Mobile Application Development Technology RoundupJoseph Labrecque
 
Adobe Generation Professional: Animation
Adobe Generation Professional:AnimationAdobe Generation Professional:Animation
Adobe Generation Professional: AnimationJoseph Labrecque
 
Flash Professional CC: Multiplatform Creativity Engine
Flash Professional CC: Multiplatform Creativity EngineFlash Professional CC: Multiplatform Creativity Engine
Flash Professional CC: Multiplatform Creativity EngineJoseph Labrecque
 
Flash Runtimes Conquer the Universe
Flash Runtimes Conquer the UniverseFlash Runtimes Conquer the Universe
Flash Runtimes Conquer the UniverseJoseph Labrecque
 

Plus de Joseph Labrecque (20)

Producing Quality Video Content for Online Learning
Producing Quality Video Content for Online LearningProducing Quality Video Content for Online Learning
Producing Quality Video Content for Online Learning
 
Interactive Animation with Adobe Animate CC
Interactive Animation with Adobe Animate CCInteractive Animation with Adobe Animate CC
Interactive Animation with Adobe Animate CC
 
Cinematic Interactives with Animate CC
Cinematic Interactives with Animate CCCinematic Interactives with Animate CC
Cinematic Interactives with Animate CC
 
Getting Familiar with Animate CC
Getting Familiar with Animate CCGetting Familiar with Animate CC
Getting Familiar with Animate CC
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Animate CC and the Flash Runtimes at Adobe MAX
Animate CC and the Flash Runtimes at Adobe MAX Animate CC and the Flash Runtimes at Adobe MAX
Animate CC and the Flash Runtimes at Adobe MAX
 
Adobe Animate CC: Introduction to Animation and Interactivity
Adobe Animate CC: Introduction to Animation and InteractivityAdobe Animate CC: Introduction to Animation and Interactivity
Adobe Animate CC: Introduction to Animation and Interactivity
 
Adobe Animate CC: Tool for the Changing Tech Landscape
 Adobe Animate CC: Tool for the Changing Tech Landscape Adobe Animate CC: Tool for the Changing Tech Landscape
Adobe Animate CC: Tool for the Changing Tech Landscape
 
Surviving Industry Disruption in Higher Education
Surviving Industry Disruption in Higher EducationSurviving Industry Disruption in Higher Education
Surviving Industry Disruption in Higher Education
 
Designing Short, Simple, and Effective Video Content for Online Consumption
Designing Short, Simple, and Effective Video Content for Online ConsumptionDesigning Short, Simple, and Effective Video Content for Online Consumption
Designing Short, Simple, and Effective Video Content for Online Consumption
 
Introducing Adobe Animate CC
Introducing Adobe Animate CCIntroducing Adobe Animate CC
Introducing Adobe Animate CC
 
Bootstrap Fundamentals
Bootstrap FundamentalsBootstrap Fundamentals
Bootstrap Fundamentals
 
Flash Professional CC for Mobile
Flash Professional CC for MobileFlash Professional CC for Mobile
Flash Professional CC for Mobile
 
Flash Professional CC 2015: A New Era in Animation and Interactivity
Flash Professional CC 2015: A New Era in Animation and InteractivityFlash Professional CC 2015: A New Era in Animation and Interactivity
Flash Professional CC 2015: A New Era in Animation and Interactivity
 
Adobe MAX 2015 - Giving Flash Professional Another Look
Adobe MAX 2015 - Giving Flash Professional Another LookAdobe MAX 2015 - Giving Flash Professional Another Look
Adobe MAX 2015 - Giving Flash Professional Another Look
 
Why Flash Professional Still Matters for the Web and Beyond
Why Flash Professional Still Matters for the Web and BeyondWhy Flash Professional Still Matters for the Web and Beyond
Why Flash Professional Still Matters for the Web and Beyond
 
Mobile Application Development Technology Roundup
Mobile Application Development Technology RoundupMobile Application Development Technology Roundup
Mobile Application Development Technology Roundup
 
Adobe Generation Professional: Animation
Adobe Generation Professional:AnimationAdobe Generation Professional:Animation
Adobe Generation Professional: Animation
 
Flash Professional CC: Multiplatform Creativity Engine
Flash Professional CC: Multiplatform Creativity EngineFlash Professional CC: Multiplatform Creativity Engine
Flash Professional CC: Multiplatform Creativity Engine
 
Flash Runtimes Conquer the Universe
Flash Runtimes Conquer the UniverseFlash Runtimes Conquer the Universe
Flash Runtimes Conquer the Universe
 

Custom Event Reporting from Flash to Google Analytics

  • 1. Custom Event Reporting from Flash to Google Analytics Joseph Labrecque – University of Denver Senior Multimedia Application Developer Adobe Higher Education Leader Copyright 2009 Joseph Labrecque – Adobe Higher Education Leader 1
  • 2. Google Analytics Tracking For Adobe Flash http://code.google.com/p/gaforflash/ This is an ActionScript 3 API for Google Analytics data collection. analytics_flash.swc – Special visual component for Flash Professional. analytics.swc – Code library for Flash or Flex. Tracks page views and custom events. Copyright 2009 Joseph Labrecque – Adobe Higher Education Leader 2
  • 3. Page Views vs. Event Tracking Instantiate Tracker Pass in a DisplayObject, Web Property ID, Mode, Debug import com.google.analytics.GATracker; import com.google.analytics.AnalyticsTracker; private var tracker:AnalyticsTracker; private function init():void { tracker = new GATracker(this, "UA-1156XXX-xx", "AS3", false); } Track Page View tracker.trackPageView(“http://somewebsite.com/somepage/"); Track Custom Event tracker.trackEvent(“Category", “Action”, “Label”, “Value”); Copyright 2009 Joseph Labrecque – Adobe Higher Education Leader 3
  • 4. Video Player Event Tracking Custom Events / Custom Data Play [RTMP URL, Seconds] Pause [RTMP URL, Seconds] Scrub [RTMP URL, Seconds] End [RTMP URL, Seconds] Can be used as a supplement to normal FMS Logs. Won’t interfere with other Google Analytics data such as standard Page Views. Provides a lot more detail. Copyright 2009 Joseph Labrecque – Adobe Higher Education Leader 4
  • 5. Video Player Event Tracking DEMO Copyright 2009 Joseph Labrecque – Adobe Higher Education Leader 5
  • 6. Unorthodox Event Tracking Why be restricted to just Video Events or Application State data??? Every click on Midge will generate a specific event to track both the body part clicked, and the specific X,Y coordinate of that click event. We’ve been collecting data from these mouse clicks since late August. Copyright 2009 Joseph Labrecque – Adobe Higher Education Leader 6
  • 7. Google Analytics Data Consumption Setup as3corelib ActionScript 3.0 library for several basic utilities http://code.google.com/p/as3corelib/ as3httpclientlib HTTP/HTTPS client library for Actionscript 3 http://code.google.com/p/as3httpclientlib/ as3crypto Cryptography library for ActionScript 3 http://code.google.com/p/as3crypto/ This article is SUPER useful: http://www.zedia.net/2009/how-to-connect-to- google-analytics-data-api-in-air/ Copyright 2009 Joseph Labrecque – Adobe Higher Education Leader 7
  • 8. Midge Data Consumption Midge again! Let’s plot some data. 1. Set namespaces for E4X 2. Authenticate to GA with our account data 3. Request data from GA through HTTP query string 4. Parse returned XML string to new XML Object 5. Loop over events and read X/Y coordinates 6. Plot click events over Midge’s body All done through AS3 – no PHP/CF/Whatever. Total Flash Player to GA data roundtripping. Copyright 2009 Joseph Labrecque – Adobe Higher Education Leader 8
  • 9. Midge Data Consumption DEMO Copyright 2009 Joseph Labrecque – Adobe Higher Education Leader 9
  • 10. In Conclusion… (what’s so great about all this?) Hey- expecting Flex data charts? No Flex data charts in this entire presentation! No traditional page view data from GA to mess with, sort through, or toss away! We both report and retrieve only the information relevant to specific needs. Not a huge investment in time or money to implement. Copyright 2009 Joseph Labrecque – Adobe Higher Education Leader 10
  • 11. Want More Info? Contact Me! Joseph Labrecque Senior Multimedia Application Developer Adobe Higher Education Leader Email: Joseph.Labrecque@du.edu Twitter: @JosephLabrecque Weblog: http:///inflagrantedelicto.memoryspiral.com 11 Copyright 2009 Joseph Labrecque – Adobe Higher Education Leader 11