This example shows how to enable the Google Analytics Tracking feature (urchin.js) using the XML playlist. Please note that you must set up a Google Analytics account and implement the tracking codes on each page that you want to track. We cover the basics of setting up the tracking codes in a webpage, but if you are not familiar with Google Analytics, you should expect to use the Google Help tools to learn more about their system and how it should be implemented (link to Google Analytics). This example utilizes a StreamingPlayer component (320x240 pixels) and the optional Playlist and Controller components with play, pause, next, previous, progress controls, volume controls, and controller text enabled (Titanium Skin). The XML location is set using FlashVars in the embed scripts and the available playback parameters have been set within the XML (including the "mediaLink", "linkTarget", and "googleTracking" parameters). Notice that the scrubber/progress controls are disabled while the preroll advertisements play (disabled using settings in the Component Inspector).
This example assumes that you are using FlashVars in your embed scripts to load your media items.
Use the Dynamically Load Single Videos and XML Playlists using FlashVars example to learn how to enable FlashVars support in your player (if you're using the default Titanium skin or the player above, FlashVars should already be enabled).
To enable the Google Analytics Tracking feature in your existing HD Video Player SWF (XML required):
- Set the "googleTracking" and "mediaLink" parameters to "true" in the XML, and then alter the "linkTarget" parameter if necessary (NOTE: these parameters can also be set in the Component Inspector; remember that settings in the XML override those in the Component Inspector).
- To track the impressions and clicks for the video in the <streams> node add <streamLink>, <streamImpression>, and <streamClick> nodes to the XML. For example, if your XML nodes read (Link to XML example):
the impression (dispatched every time a video loads) and click (dispatched every time a video is clicked and the user is directed to the url in the <streamLink> node) events will be logged as though they were pageviews of "/videos/video1_impressions" and "/videos/video1_clicks", respectively. The arguments must begin with a forward slash as shown. The pagenames may be organized into any directory style structure you wish, and actual pages with these filenames need not exist (i.e. can be real or virtual).
- To track the impressions and clicks for the video in the <prerolls> node add <prerollLink>, <prerollImpression>, and <prerollClick> nodes to the XML. For example, if your XML nodes read (Link to XML example):
the impression (dispatched every time a video loads) and click (dispatched every time a video is clicked and the user is directed to the url in the <prerollLink> node) events will be logged as though they were pageviews of "/ads/ad1_impressions" and "/ads/ad1_clicks", respectively. The arguments must begin with a forward slash as shown. The pagenames may be organized into any directory style structure you wish, and actual pages with these filenames need not exist (i.e. can be real or virtual). NOTE: you may also want to disable the navigation controls and playlist while preroll items play, and if so you should check out the Preroll Videos with Media Links example for more information.
- The following Analytics tracking code must be placed in the <body> of your HTML code above the scripts used to embed the HD Video Player (note: you will need to substitute your account number for the x's):
_uacct = "xx-xxxxxxx-x";
- You can check your Google Analytics Top Content report 24-48 hours after the updated tracking code has been executed. You should be able to see the assigned pagenames in your report.
To use the example player above without the DEMO text (purchase required):
- Install your purchased copy of the MXP in your Flash 8/CS3/CS4 authoring software by double-clicking the file named "ESA_HD_Video.mxp". This will open the Extension Manager, which will prompt you to complete your installation. NOTE: Before installing the MXP file you will have to unpack your downloaded ZIP file and shut down your authoring software if it is open.
- Download the example files using the link below, and unpack the ZIP file.
- Open the file named "tracking.fla" in your copy of Flash 8/CS3/CS4.
- Open the Components menu and look for a folder named "ESA HD Video Player". In this folder, there will be three components named StreamingPlayer, Playlist, and Controller.
- Add an instance of the StreamingPlayer to the stage by double-clicking it in the menu.
- Flash will open a "Resolve Library Conflict" window, and ask if you want to replace the existing item in the library - toggle the "Replace existing items" button and click "OK".
- You should now see 2 StreamingPlayer components on the stage; one in the same position as the original, and a new component near the middle of your screen.
- Select the new StreamingPlayer component near the middle of your screen and delete it.
- The remaining StreamingPlayer component on the stage is the updated component with your previous settings (without the DEMO text).
- You can now modify the component parameters, save your project, and publish a new SWF.