These forums are provided for community interactions only. For official support please submit a support ticket.

You are not logged in.

#1 2009-07-02 20:27:31

damado
New Member
Registered: 2009-06-27
Posts: 10

How To: SSP Google Analytics (GA tracker for AS3) - Simple

This tracks each album viewed in google analytics using the newer GA tracker, not the older urchin. This code is for ActionScript 3.

Further on I link to how to do it for galleries and images.

I figured it out with some trial and error, reading google's flash analytics info and looking at the API section of the wiki.

Here's how I got this to work. 

Step one: Download Google Analytics for flash direct from google: http://code.google.com/p/gaforflash/
Step two: Follow the instructions in the readme.txt (from the zip you just downloaded) to get AnalyticsLibrary to appear in the components list of your FLA.

Step three: Start Flash again and open your FLA. Click on the components panel and you should see "Google". Expand it and you should see "Analytics" and AnalyticsLibrary".

Step four: Doubleclick "AnalyticsLibrary" to get it into your FLA.

Step five: Create a new layer above your movie and label it Google Analytics or whatever you want.

Step six: Click on that layer and go to window Actions and enter the following code(replace the UA-XXXXX with your code. Don't get rid of the quotes!):

Code:

import net.slideshowpro.slideshowpro.*;
import com.google.analytics.AnalyticsTracker; 
import com.google.analytics.GATracker; 
var tracker:AnalyticsTracker = new GATracker( this, "UA-XXXXXX", "AS3", true ); 

function onSlideShowData(event:SSPDataEvent) {
if (event.type=="albumData") {
trace("total images: " + event.data.title);
tracker.trackPageview("/"+event.data.title);
}
}
my_ssp.addEventListener(SSPDataEvent.ALBUM_DATA, onSlideShowData);

Step six: Test it: Shortly after the UA code is the value: true. It means it's in debug mode. I suggest you leave it on and upload it to a testsite. It will show you what is being sent to google. It will appear in a yellow box at the top of the flash movie.
Step seven: Once you see that it's actually working and the value is what you want, just go back into your AS3 code and change it to false.


That should be it. Note: You probably don't need that trace line in there but I left it in just in case hehe.


Extra:

Let me explain the part of the code I think I understand in case you want to change it a bit.

The tracker.trackPageview("/"+event.data.title); outputs the album title with a / in front so in google analytics you'll see /people for example if people is the name of one of your albums. You can change the / to whatever. You can also put something else in quotes at the end so if you wanted, you could have tracker.trackPageview("The"+event.data.title+"album was visited") and if an album with the people title was clicked you'd see "The people album was visited" on google analytics page. It sends it to google as a gif file.

It all works by pulling the title off the albumdata event which I got from here:
http://wiki.slideshowpro.net/SSPfl/API- … -albumData

You can substitute whatever data object you want instead of title from the list on that wiki page.

If you want to track what galleries people go to use this page in the same way:
http://wiki.slideshowpro.net/SSPfl/API- … alleryData

Same for images data:
http://wiki.slideshowpro.net/SSPfl/API- … -imageData

Just copy and paste the examples there and add the tracker.trackPageview("/"+event.data.title) substituting one of the allowed data objects listed on those pages for the title.

Last edited by damado (2009-07-05 22:21:53)

Offline

 

#2 2009-08-24 22:32:07

freshman
New Member
Registered: 2008-05-21
Posts: 11

Re: How To: SSP Google Analytics (GA tracker for AS3) - Simple

Thanks I implemented this on my site and works great!
http://www.annelangdon.com/

Offline

 

#3 2009-08-25 05:45:40

lolito06
Veteran Member
Registered: 2008-07-07
Posts: 213

Re: How To: SSP Google Analytics (GA tracker for AS3) - Simple

great thanks

Offline

 

#4 2009-09-23 20:18:25

grantmx
New Member
From: Atlanta, GA
Registered: 2007-08-22
Posts: 13
Website

Re: How To: SSP Google Analytics (GA tracker for AS3) - Simple

This is awesome!  I noticed that when I change the event type to imageData that the tracker sends a hit to Google when the image is viewed.  Is there any way to change it to where it just sends a hit if the image were clicked (Where that image would have a link assoicated with it)?

Code:

import net.slideshowpro.slideshowpro.*;
import com.google.analytics.AnalyticsTracker; 
import com.google.analytics.GATracker; 
var tracker:AnalyticsTracker = new GATracker( this, "UA-692258-24", "AS3", true ); 

function onSlideShowData(event:SSPDataEvent) {
if (event.type=="imageData") {
trace(event.data.link);
tracker.trackPageview("/"+event.data.link);
}
}
my_ssp.addEventListener(SSPDataEvent.IMAGE_DATA, onSlideShowData);

Last edited by grantmx (2009-09-23 20:19:58)

Offline

 

#5 2009-10-20 02:22:12

FotoHijinx
New Member
From: Adelaide, South Australia
Registered: 2007-12-18
Posts: 10

Re: How To: SSP Google Analytics (GA tracker for AS3) - Simple

Not much of a coder but hopefully I'll be able to make this work - thanks for supplying the info.

Just one question, can you add this information into the existing code above or do you have to do separate layers for the gallery code and image code?

If you want to track what galleries people go to use this page in the same way:
http://wiki.slideshowpro.net/SSPfl/API- … alleryData

Same for images data:
http://wiki.slideshowpro.net/SSPfl/API- … -imageData

Just copy and paste the examples there and add the tracker.trackPageview("/"+event.data.title) substituting one of the allowed data objects listed on those pages for the title.


Cheers
Irene


You've been a naughty boy, now go to my room! wink

Offline

 

#6 2010-01-21 04:25:09

Virtsorrent
New Member
Registered: 2007-12-08
Posts: 4

Re: How To: SSP Google Analytics (GA tracker for AS3) - Simple

Google Analytics on Video Click

First of all thankyou damado for your great article on GA


I'm using  SlideshowPro with ThumbGrid
Have AS3 code (below) working for src from the xml file
But would like to refine this more where GA tracks the (Hits) video play button when it is clicked

Hope someone can help with this
Thank you in advance

----------------------------------------------------


import net.slideshowpro.slideshowpro.*;
import com.google.analytics.AnalyticsTracker;
import com.google.analytics.GATracker;
var tracker:AnalyticsTracker = new GATracker( this, "UA-XXXXXX", "AS3", true );

function onSlideShowData(event:SSPDataEvent) {
if (event.type=="imageData") {
trace(event.data.src);
tracker.trackPageview("/"+event.data.src);
}
}
my_ssp.addEventListener(SSPDataEvent.IMAGE_DATA, onSlideShowData);

Offline

 

#7 2010-01-23 11:36:29

poblama
Member
From: Brisbane
Registered: 2009-10-10
Posts: 28
Website

Re: How To: SSP Google Analytics (GA tracker for AS3) - Simple

This is so helpful, thanks!

I'm just having one issue with conflicting AS3 

flash is reporting this error
1021: Duplicate function definition.  function onSlideShowData(event:SSPDataEvent) {

i already have this line within the code i'm using for external captions and titles.

I've tried to merge the 2 together but my AS3 is pretty weak!

Could you advise me how to stop the two bits of code conflicting??

Many thanks,

Andy


Code:

//External captions and text

import net.slideshowpro.slideshowpro.*;
import flash.external.ExternalInterface;

function onSlideShowData(event:SSPDataEvent) {
if (event.type=="imageData") {
var captionData=event.data.caption;
var titleData=event.data.title;

ExternalInterface.call("imageIden", captionData, titleData);
}
}
my_ssp.addEventListener(SSPDataEvent.IMAGE_DATA, onSlideShowData);

Code:

//GA Tracker
import net.slideshowpro.slideshowpro.*;
import com.google.analytics.AnalyticsTracker; 
import com.google.analytics.GATracker; 
var tracker:AnalyticsTracker = new GATracker( this, "UA-#########", "AS3", true ); 

function onSlideShowData(event:SSPDataEvent) {
if (event.type=="albumData") {
trace("total images: " + event.data.title);
tracker.trackPageview("/"+event.data.title);
}
}
my_ssp.addEventListener(SSPDataEvent.ALBUM_DATA, onSlideShowData);

Last edited by poblama (2010-01-23 11:43:07)

Offline

 

#8 2010-02-24 21:25:11

annepautler
New Member
Registered: 2008-09-25
Posts: 1

Re: How To: SSP Google Analytics (GA tracker for AS3) - Simple

Virtsorrent wrote:

But would like to refine this more where GA tracks the (Hits) video play button when it is clicked

This can be done using the videoStart event.

Code:

function onVideoEvent(event:SSPVideoEvent) {
    if (event.type=="videoStart") {

tracker.trackPageview("/your-link-here");
    }
}

my_ssp.addEventListener(SSPVideoEvent.VIDEO_START, onVideoEvent);

Last edited by annepautler (2010-02-24 21:26:20)

Offline

 

#9 2010-03-31 03:42:30

2sticks
New Member
From: Windsor - Ontario Canada
Registered: 2007-11-26
Posts: 12

Re: How To: SSP Google Analytics (GA tracker for AS3) - Simple

So when you say below you got it working with this code, you had changed "true" to "false"  for AS3 when you deployed it, correct?

Did you also get it to work with the video event trigger?

Are you using Director hosting, (probably for another topic) but I have domain mapping installed with director hosting and wondered if there's another variable that has to be introduced. I'm currently waiting on GA to see if it logs anything.

Virtsorrent wrote:

Google Analytics on Video Click

First of all thankyou damado for your great article on GA


I'm using  SlideshowPro with ThumbGrid
Have AS3 code (below) working for src from the xml file
But would like to refine this more where GA tracks the (Hits) video play button when it is clicked

Hope someone can help with this
Thank you in advance

----------------------------------------------------


import net.slideshowpro.slideshowpro.*;
import com.google.analytics.AnalyticsTracker;
import com.google.analytics.GATracker;
var tracker:AnalyticsTracker = new GATracker( this, "UA-XXXXXX", "AS3", true );

function onSlideShowData(event:SSPDataEvent) {
if (event.type=="imageData") {
trace(event.data.src);
tracker.trackPageview("/"+event.data.src);
}
}
my_ssp.addEventListener(SSPDataEvent.IMAGE_DATA, onSlideShowData);

Offline

 

#10 2010-03-31 13:58:02

ri7AgdLd
Senior Member
Registered: 2008-05-20
Posts: 92

Re: How To: SSP Google Analytics (GA tracker for AS3) - Simple

I got this code to work, with AS3 flash, set the debug to false, I am using director on my own server.  I have a unique page for each section of my site and each section has its own SSP instance, so I can track that it was loaded.  I have not tied it to note when the video was played, so im not yet getting that data.  I might try anne's code and see if it works.  tricky part is it takes a day to see if the data is passed.  so be patient when testing.

Best,
Slideshowpro fan


Slide Show Pro Fan

Offline

 

#11 2010-03-31 14:30:24

ri7AgdLd
Senior Member
Registered: 2008-05-20
Posts: 92

Re: How To: SSP Google Analytics (GA tracker for AS3) - Simple

annepautler wrote:

Virtsorrent wrote:

But would like to refine this more where GA tracks the (Hits) video play button when it is clicked

This can be done using the videoStart event.

Code:

function onVideoEvent(event:SSPVideoEvent) {
    if (event.type=="videoStart") {

tracker.trackPageview("/your-link-here");
    }
}

my_ssp.addEventListener(SSPVideoEvent.VIDEO_START, onVideoEvent);

Can this be used WITH:

Code:

function onSlideShowData(event:SSPDataEvent) {
if (event.type=="albumData") {
trace("total images: " + event.data.title);
tracker.trackPageview("/"+event.data.title);
}
}
my_ssp.addEventListener(SSPDataEvent.ALBUM_DATA, onSlideShowData);

or is it only possible to use 1 or the other?


Slide Show Pro Fan

Offline

 

#12 2010-04-18 19:30:11

orintas
New Member
Registered: 2010-04-06
Posts: 5

Re: How To: SSP Google Analytics (GA tracker for AS3) - Simple

This is a great thread.  I have a site that uses a "baseplate" master swf and the individual swf load in the baseplate.  I successfully added this code, but it send data to GA every time the slideshow changes pictures, which is not useful (eg, a user leaves the page open, walks away, and GA continues to count the slideshow images as they change).

I would like to have GA capture data when a user clicks an image on the Thumbgrid.  I've tried to amend the code to include onclick events, but they don't contain any data and it simply does not work.  Can someone please point me in the right direction?

The code works while testing in CS4, but when live I receive several 1009 errors. 

import net.slideshowpro.slideshowpro.*;
import net.slideshowpro.thumbgrid.*;
import com.google.analytics.AnalyticsTracker;
import com.google.analytics.GATracker;
var tracker:AnalyticsTracker = new GATracker( this, "UA-XXXXXXX", "AS3", true );

function onSlideShowData(event: TGThumbEvent) {
if (event.type=="clickThumb") {
trace("Image: " + event.data.file);
tracker.trackPageview("/"+event.data.file);
}
}
my_tg.addEventListener(TGThumbEvent.CLICK_THUMB, onSlideShowData);

Last edited by orintas (2010-04-19 02:30:10)

Offline

 

#13 2010-04-20 13:04:29

orintas
New Member
Registered: 2010-04-06
Posts: 5

Re: How To: SSP Google Analytics (GA tracker for AS3) - Simple

Bump

Offline

 

#14 2010-10-06 04:51:56

Virtsorrent
New Member
Registered: 2007-12-08
Posts: 4

Re: How To: SSP Google Analytics (GA tracker for AS3) - Simple

Thank You annepautler for your reply to my query and my apologies for the lateness of my reply.
Fortunately for me it's been a busy year.

Anyway back to Google Analytics
Re: On Video Click


annepautler wrote:

This can be done using the videoStart event.

Code:

function onVideoEvent(event:SSPVideoEvent) {
    if (event.type=="videoStart") {

tracker.trackPageview("/your-link-here");
    }
}

my_ssp.addEventListener(SSPVideoEvent.VIDEO_START, onVideoEvent);

Can the value for this please be clarified tracker.trackPageview("/your-link-here");

Is /your-link-here the path to the swf Example:  www.mysite.com/ssp.swf
or the html page the swf is in Example:  www.mysite.com
or am I completely wrong on both counts?
And if so, can someone please point me in the right direction.


I've also noticed on SSP Wiki http://wiki.slideshowpro.net/SSPplayer/API-Events

EVENT: videoStart includes  trace("video has started");

Should this also be in Google Analytics code (As Below)

Code:

import net.slideshowpro.slideshowpro.*;
function onVideoEvent(event:SSPVideoEvent) {
   if (event.type=="videoStart") {
      trace("video has started");
tracker.trackPageview("/your-link-here");
   }
} 
my_ssp.addEventListener(SSPVideoEvent.VIDEO_START, onVideoEvent);

I hope someone can advise on this.

Thank You
Ray

Offline

 

#15 2011-08-15 22:57:49

jbnightingale
New Member
Registered: 2010-11-23
Posts: 5

Re: How To: SSP Google Analytics (GA tracker for AS3) - Simple

THANK YOU THANK YOU THANK YOU!!!!!!  I started on Google's page and got a bit lost, you cleared it all up, and now my entire website works with GA so well, I can see exactly what images people are looking at, how deep they go into each album, etc....  Using the API and your instructions, I feel like I could add tracking code for many events if I wanted, so thanks a million!

Offline

 

#16 2011-08-16 01:18:17

jbnightingale
New Member
Registered: 2010-11-23
Posts: 5

Re: How To: SSP Google Analytics (GA tracker for AS3) - Simple

Okay, this is brilliant, it works great, but right now in GA admin, I see something like "/content-52" which of course does not match my websites URL string structure.  Right now, it takes a long time to actually figure out which image is 52!  I'd like the link in GA to go straight to the permalink for that image, taking into consideration the page/sub-page it is on.

I'm using the same .swf on every page of the site, and the XML is pulled dynamically from that page's java-script embed, so is there a way to pull the full URL, including permalink, in the AS3 tracking code?

So basically, I want the output of the code to give me:

/page/sub-page/num=album-XX&content-XX

But I'd like to get the /page/sub-page dynamically.  I can think of ways to do this very manually by using say, event.data.title and making the title of the image the URL string, but that is a lot of work for a site with a ton of pages and sub-pages (and therefore albums and images!).

I hope that makes sense, I can show you what I'm dealing with if you think there is a solution, the GA documentation is like reading icelandic!  I have a feeling the answer lies on this page, but hell if I can figure out what exactly I'm in need of:  http://code.google.com/apis/analytics/d … ctory.html

Thanks so much, a beer to anyone who can help!

Offline

 

#17 2012-01-16 22:10:39

hefgAdmin
New Member
Registered: 2011-12-18
Posts: 6

Re: How To: SSP Google Analytics (GA tracker for AS3) - Simple

Is this still current for Flash CS5? Also, the links to "http://wiki.slideshowpro.net/SSPfl/API- … alleryData" given in the original post are not longer valid. How would you adjust this for a gallery?

Thank you!!

Lisa

Offline

 

Board footer

Powered by PunBB
© Copyright 2002–2005 Rickard Andersson