Internet Marketing Driver

  • GSQi Home
  • About Glenn Gabe
  • SEO Services
    • Algorithm Update Recovery
    • Technical SEO Audits
    • Website Redesigns and Site Migrations
    • SEO Training
  • Blog
  • Contact GSQi

Flash Tutorial, How to Track Flash in Google Analytics Using the Google Analytics for Adobe Flash Component (GAforFlash) Part 2 of 2

February 8, 2009 By Glenn Gabe

Flash Tutorial for Using the GAforFlash Component (AS3)In part 1 of this series I introduced the concept of tracking flash applications, why flash has been hard to track for many marketers, and I introduced the Google Analytics for Adobe Flash Component. To quickly review, the GA for flash component enables you to easily make calls directly from your ActionScript code in order to track pageviews, events, conversions, etc. in flash. It’s an important step for understanding how your flash elements contribute to the success of your website, and not just because you think it’s a killer flash app. ;-) In part 2 of my series, I will walk you through how to actually set up flash tracking using the gaforflash component (step by step in the flash authoring environment.) By the end of this tutorial, you should have a solid understanding of using the flash component and making calls to Google Analytics from within your ActionScript code. I will reference the flash movie that I created during my own testing and show the resulting Google Analytics reporting to tie it all together. So without further ado, let’s start coding. :)

Note: If you’re a small business looking to learn more about web analytics, then you should check out my internet marketing ebook, Taking Control of Your Online Marketing. There’s an entire chapter on Web Analytics covering the setup, installation, sections of reporting, how to track conversion, events, etc. It’s a great place to start.

Quick Disclaimer, Code Ahead:
As I mentioned in my first post, if you have some knowledge of developing flash movies and writing ActionScript code, then you should be able to follow along. If you aren’t familiar with developing in flash, grab your flash developer and possibly your web analyst and set up a working lunch. By the end of the tutorial, I’m confident you will see the power of using this technique to track your flash elements.

Visit the Google Code Project and Download the Components
First, visit the Google Code Project for Google Analytics for Flash (gaforflash). http://code.google.com/p/gaforflash/ Click the downloads tab at the top of the page and download the zipfile listed. The current version as of this blog post was v1.0.1. Once you download the zipfile, unzip the contents to a directory on your hard drive. Open the readme textfile and follow the instructions for copying the components to the proper directory in your Adobe flash folder. This will differ depending on if you are running a pc or a mac and you will be creating a new folder within the components directory where you will copy the files (the instructions tell you to create a Google folder and drop the components there). Once you copy the components into the new directory, then go ahead and launch flash. Again, make sure you follow the readme before launching flash.

The Google Code Project for GaforFlash:
The Google Code Project for GAforFlash

Determine What You Are going To Track:
To me, this is the most important step (and I bet the web analysts reading this post agree!) Mapping out what you want to track is essential to having clean reporting and a structured hierarchy. You can really have some messy reporting without working through this step… We’ll keep this example very simple to keep the amount of coding down, so here’s the scenario.

You will be adding a new flash element to a category page on your website and want to track how visitors engage the flash movie and how that flash element contributes to the success of the website. In our sample flash movie, there will be a start button, which launches the rest of the flash movie. The start button is there for a reason and you’ll learn why in a second. Once someone clicks the start button, they will be presented with two product thumbnails. The goal of our sample flash movie is to get visitors to learn more about each product and then click an email button at the bottom of the flash movie to get in touch with sales. Again, this is completely made up and simple, but we need to map this out in order to know what to track. Also, we’ll track when users hover over each thumbnail and then when they click each one to reveal more information. In addition, they obviously want to track the email link at the bottom of the flash movie, since clicking the button will be a conversion in GA.

To summarize the key pageviews, events and conversions we will track:
1. A start button will trigger a pageview so you know how many people engaged the flash movie. This is so you know that the flash movie was triggered (and not just sitting on the page).
2. The two product thumbnails will trigger events when someone hovers over the thumbnail and when someone clicks them.
3. The email link at the bottom of the flash movie will trigger a pageview for when someone clicks the button. That pageview will also trigger a conversion.
4. Note: you will need to set up a conversion goal in Google Analytics for the email pageview that we trigger when visitors click the email button. This is easy to do and then will start showing up within your Goals tab in GA. You can read more about tracking goals in the GA help center. http://www.google.com/support/googleanalytics/bin/answer.py?answer=55515

Open Up Flash and Create the Necessary Assets
In order to work though this tutorial, you will need to create some simple flash assets (buttons). Don’t worry about how they look. The core point of this tutorial is that you learn how to use the flash component to make calls to Google Analytics and not to win design awards. ;) You will need to create a start button, a product thumbnail button, and an email button (which can be simply text if you want). Once you have quickly created each button, proceed with the rest of the tutorial.

Import the Tracking Libraries
First, make sure your current flash movie is targeting ActionScript 3. Open up the publish settings dialog box (control shift F12), click the flash tab, and use the dropdown to select an ActionScript version to target. Choose ActionScript 3. Next, you need to drag an instance of the AnalyticsLibrary Component to the stage in order to import the code libraries. Create a new layer in flash and open the components panel (control F7). You should see a category named Google (which you created earlier in this tutorial). If you don’t see the Google category, then go back to the beginning of this tutorial and follow the directions again in the readme text file that was part of the download. Click the plus sign (+) next to Google and drag the AnalyticsLibrary component to the stage. Don’t worry where you place it on the stage. It should now be present in your project library (you should also see it listed in your library. Click Control L to see your project library.) Keep in mind I’m referring to your project library, which holds all of the assets you create in your flash movie (buttons, movie clips, images, components, etc.) I’m not referring to code libraries, which we will discuss shortly.

Finding the AnalyticsLibrary Component in Flash:
Drag the AnalyticsLibrary component to the stage.

Next, create an Actions layer and select frame 1 of the timeline in that layer. Click F9 to open the Actions window (which is where you write ActionScript code). Since we are using the Analytics Library Component to make calls directly from our ActionScript 3 code, you will need to import the libraries that you will use to instantiate a tracking object and make calls to Google Analytics. If you don’t import the libraries, you will not be able to make calls to GA.

Here is what you should add to frame 1 of the actions layer:
import com.google.analytics.AnalyticsTracker;
import com.google.analytics.GATracker;
var tracker:AnalyticsTracker = new GATracker( this, “UA-111-222”, “AS3”, true );

A Quick Explanation of the Code:
Note, you would obviously want to add your own GA account number so the data is sent to the correct profile. i.e. Don’t keep 111-222 as the web property ID. The first two lines import the necessary code libraries and the third line of code initializes the tracking object. Keep “this” as the first parameter, which references the current display object. Enter your own GA account number for the second parameter, you can keep AS3 as the third parameter for this tutorial, and keep “true” as the fourth parameter. That sets the debug mode. When true, you will see a trace of all tracking events occurring. When false, this will not be visible. Also, you can read the gaforflash documentation to learn more about each parameter.

Making Calls From ActionScript to GA:
Now, if you create a start button that visitors have to click in order to see anything in your flash movie, then we can logically target that click as a pageview. Then we can view in GA how many people started the flash movie. That would answer one of the first questions from your CMO, right? :) So create a new layer in your flash movie called Start Button and add your button to frame 1 of this layer. To stop the flash movie from playing before someone clicks the start button, simply add a stop action on frame 5 in your Actions layer. Create new keyframe on frame 5 and enter this.stop(); as the code. Again, the intent of this tutorial is not to teach you how to use flash, but I’ll add some tips as we move along. Select the start button on the stage by clicking it once and give it an instance name of start_btn in the properties panel. You can click Control F3 to bring up the properties panel if it’s not on screen. We need to give the button an instance name in order to target it in ActionScript. If you don’t give it an instance name, your code will not work.

Creating an Instance Name in the Properties Panel:
Give your button in flash an instance name.

Now go back to frame 1 of your actions layer and open the actions window again (click F9). Below the code we first added (importing the libraries and initializing a tracking object), add the following lines of code. I will explain them in a second… You can give yourself some space by clicking enter a few times. Your code does not need to be lumped together!

//functionality for start button
start_btn.addEventListener( MouseEvent.CLICK, startExample );

function startExample( event:Event):void {
//we know that the user engaged the flash movie (they clicked start)
tracker.trackPageview(“/GAFlash/Start”);
play();
}

The Code Explained:
The first line is a comment, which is good programming practice. You can simply describe the code that follows. This will not be visible to anyone but you as a programmer. The second line is an event handler for the start button. It targets the instance name start_btn, which we set up earlier. This is why we needed to create an instance name. Now our code will look for a mouse event (CLICK) for the start button and then trigger the function called startExample, which I will cover in a second. Event handlers enable you to react to events in your flash movies. They are critical to creating advanced functionality in your flash applications.

The function startExample() will be called when someone clicks the start button. This function uses our tracker object to trigger the trackPageview method and then plays the main timeline in your flash movie, using the play(); action. Remember, we want the visitor to see the rest of our flash movie after clicking the start button. The trackPageview method tells Google Analytics to track a specific pageview when something happens. The page will show up in GA reporting as /GAFlash/Start in your content tab, as if someone actually visited a page on the website. Pretty cool, right? So, you’ll be able to go into GA and click the content tab and see how many times this “page” was triggered. Nice. That wasn’t so bad, was it? That was all done in less than 15 lines of code.

Tracking the Product Thumbnails:
You will use the same methodology for tracking the two product thumbnails in your flash movie. Remember, we want to know when someone clicks each thumbnail, but we’ll be adding one more event…when someone hovers over the thumbnails. You might find that people were interested enough to hover over a product, but not trigger it. If you see enough of this behavior, you might want to dig deeper to find out what’s causing it. That’s just a simple example and you should work with your web analyst to determine what to track for your specific website and flash content.

A Screenshot of the 2 Product Thumbnails for this Example:
Adding the product thumbnails in flash.

We used the trackPageview method for the start button, but we will use trackEvent for the thumbnails. Examples of events might be clicking a button, hovering over that button, visiting a specific area of a flash movie, etc. GA now provides an Event Tracking tab within your Content tab. Within the Event Tracking tab, you can view categories of events, the specific actions users took, the labels associated with those events, trending, etc. So, we’ll track two events with each product thumbnail in our flash movie. I will only cover the first thumbnail here and you can copy this process to apply event tracking to the second thumbnail.

After someone clicks the start button, you used the play(); action to play the main timeline. At frame 20 on your main timeline, create a new stop action in your actions layer. Add a new keyframe at frame 20 and open the Actions windows. Enter this.stop(); as the code. Then create a new layer for your product thumbnails and add the buttons that you created earlier in this tutorial. Note, for this example, add them to frame 1 so your code can target the button instances. You can place them off the stage (off-screen) in frame 1 so they aren’t visible and then move them on-stage later in the flash movie when visitors need to see them. If they aren’t on the stage in frame 1, the event handlers you create targeting these buttons won’t work. Give each instance on the stage a unique instance name, like product1_btn and product2_btn. You do this by selecting each button and then entering an instance name in the properties panel. Again, we need to give them instance names in order to target them in our ActionScript code. Once you do this, go back to frame 1 of your Actions layer, click F9 to open the Actions window again and add the following code:

//functionality for product btn 1
product1_btn.addEventListener( MouseEvent.CLICK, clickProduct1 );
product1_btn.addEventListener( MouseEvent.MOUSE_OVER, hoverProduct1 );

function hoverProduct1( event:Event):void {
tracker.trackEvent(“Products”, “HoverProduct1”);
}

function clickProduct1( event:Event):void {
tracker.trackEvent(“Products”, “ClickProduct1”);
gotoAndStop(“product1”);
}

So we have two event handlers for the product1_btn. The first event handler will handle the CLICK mouse event and the second will handle the MOUSE_OVER mouse event. MOUSE_OVER is when someone hovers over the button (as you probably guessed). Checking the clickProduct1 function, you see that we are using trackEvent to send an event tracking call to Google Analytics. The two parameters are Category and Action respectively. I lumped both product buttons under the same category called “Products” and then gave specific events to each click and hover (HoverProduct1 and ClickProduct1). You will be able to drill into event categories in your GA reporting and then see specific actions, along with trending.

Important: When you set up the code for the second product button, make sure your event handlers target product2_btn versus product1_btn and that you trigger specific functions, such as clickProduct2 and hoverProduct2 versus clickProduct1 and hoverProduct1. You definitely don’t want to call the wrong functions, as this will ultimately skew your reporting or throw errors in your flash movie. i.e. Someone might click the profile 2 button, but you triggered the profile 1 tracking.

The Email Link, Our Conversion in Flash
Last, but not least, we want to track when people click the email button. We have decided that clicking this button will be a conversion for our flash movie. Create a new layer in your flash movie and add your email button to frame 1 of this layer. Select the email button on the stage by clicking it and give it an instance name of emailMe_btn. Then go back to frame 1 of your Actions layer and open the actions window (hit F9). Below the code we added earlier, add the following lines of code:

//functionality for email button, this is also our conversion
emailMe_btn.addEventListener( MouseEvent.CLICK, onButtonClick );
function onButtonClick ( event:Event ):void
{
tracker.trackPageview(“/GAFlash/EmailMe”);
}

OK, so when visitors click the email button, we will trigger the trackPageview method to track that click as a pageview in Google Analytics. The page will show up as /GAFlash/EmailMe in your Content tab. In addition, since this is a conversion, you can set up a conversion goal in Google Analytics targeting that page. Then conversions will show up in your Goals tab within Google Analytics. Now you can tell your CMO how many visitors are converting within your flash movie. That’s not as generic as “Sorry, we don’t know”, right? ;-)

Quickly Test and Track Your Flash Movie
In the first piece of code we added in this tutorial, we included this line:
var tracker:AnalyticsTracker = new GATracker( this, “UA-111-222”, “AS3”, true );

As mentioned earlier, the “true” parameter tells flash whether you want to run debug mode. If you set this to true, then you can see a trace of your calls to Google Analytics. I recommend turning this on during your testing and then when you are ready to go live, you can turn if off by setting the parameter to “false”. Go ahead and test your movie and click the start button. You should see a message when the call is made to GA, and if it was successful. Then as you interact with your product thumbnails, you will also see the calls being made. Last, as you click the email button, you should also see the call being made. If all looks good, then you can add your published flash movie to an html page and then upload the files to your website. Remember to set debug to false as mentioned earlier or else everyone viewing with your flash movie will see the trace of your calls. Then click away and thoroughly test out your flash movie, try different browsers, platforms, etc. Make sure you trigger each of the elements enough and wait for GA to show you the results in your reporting.

Enabling Debug Mode to View a Trace of Your Calls:
Visual debugging with the gaforflash component

My Working Example of Using GAforFlash
I uploaded my example of using the Google Analytics for Adobe Flash Component in case you wanted to see how it looked and worked. I know it’s hard sometimes to follow along without seeing the final product.

Checking Your Google Analytics Reporting
I’m going to show you what the reporting looked like for my own example. The first thing I did was click the Content Tab in Google Analytics and then Event Tracking within that tab. I immediately could see the total number of events that took place, visits with an event, etc. {See screenshots below.} Clicking the Categories tab displayed the event categories we set up earlier, such as Products (Note, I used UserProfiles in my example versus Products so that’s what you will see in the screenshots below). This category includes the actions of hovering and clicking the product thumbnails. This is why mapping out what you want to track is important. You want a clear hierarchy in your reporting. Drilling into each category, I could see the actions that took place like HoverProfile1, ClickProfile2, etc. Note, I used the word “profile” in my testing versus products. If you click the Actions tab (below categories), you will see all of your actions listed, regardless of category. We didn’t add the optional parameter for Labels so you won’t see anything there (in case you were wondering).

The Event Tracking Overview Report in Google Analytics:
Viewing the event categories in Google Analytics

The Events Category Page in Google Analytics:
Viewing the event categories in Google Analytics

The Event Actions Report in Google Analytics:
Viewing the event categories in Google Analytics

Pageviews and Conversions
Remember we wanted to know how many people started our flash movie (after clicking the start button)? Well if you go into the Content Tab and check top content, you will see the /GAFlash/Start page listed. The number of pageviews shows how many times visitors started the flash movie. In addition, you can view /GAFlash/EmailMe, which shows the number of times the email button was clicked. And since we set this up as a conversion, you can click the Goals tab and see your TrackFlash conversion listed. Drilling into that conversion goal will also reveal conversion rate. And since it’s a conversion goal, you can see conversion by traffic source, campaign, keyword, etc. That’s the benefit of setting up conversion goals… So, you might find that organic search traffic converted 10x as much as paid search, or that visitors arriving via your email marketing didn’t even trigger your flash movie, so on and so forth.

Viewing Flash Pageviews in the Top Content Report in Google Analytics:
Tracking flash pageviews in Google Analytics

Viewing a Flash Conversion in Google Analytics:
Tracking flash pageviews in Google Analytics
Summary
OK, we’ve definitely covered a lot in Part 2. Either your head is reeling or you’re excited to use the gaforflash component in your own projects (or both!) Take your time and test our different scenarios. Work with your flash development team and your web analysts to map out how to best track your flash apps. You never know, it very well could lead to more flash application work… like if you told your CMO that 25% of the people interacting with your flash movie converted! :) Imagine if you could glean insights from your flash content versus it just being slick and pretty. And I’ll take data over pretty any day of the week. ;-)

GG

Read Part 1 of this Series on Tracking Flash in Google Analytics

Filed Under: flash, google-analytics, web-analytics

How To Track Flash In Google Analytics (GA) Using The Google Analytics For Adobe Flash Component (GAforFlash), Part 1 of 2

February 8, 2009 By Glenn Gabe

Tracking Flash in Google Analytics Using the GAforFlash ComponentI wanted to start this post with some quick points about flash:
* flash content can be extremely engaging.
* flash apps are a great way to create something viral.
* flash is currently used extensively on the web for everything from video to games to product demos.
* Creative Directors love flash.
* Brand Managers also love flash.

* But unfortunately, flash has been hard and confusing to track via web analytics…

I apologize if you were feeling pretty good about flash until the last bullet! ;-) That is the reality, though.

Why Has Flash Been Confusing And Hard To Track?
Let’s take a quick look at why flash tracking has been an issue. First and most basic, there are many people that don’t know you can even track flash applications. That’s a tough obstacle to overcome, right? Second, the Analytics team is sometimes not involved during the planning of flash-based projects or campaigns. I’m sure some web analysts reading this post probably believe that’s an understatement! Third, you need to coordinate mechanisms for tracking flash with both flash developers and analysts. Fourth, there has been confusion about how to actually track flash even if you already have your flash developers and analysts in the same room. Last (at least for this initial list), some people will focus on the end result (conversions only) and not track the specific elements on the website that lead to the conversion. i.e. As long as people buy something or sign up, I don’t care what they do on the site. As you can probably guess, I’m not a big fan of the latter… I think the more information you can gather about how visitors interact with your website, the more you can optimize the website to increase conversion (whatever conversion is for your specific business).

Yes, You Can Track Flash
I’m here to tell you that you can track flash and you can see how visitors are interacting with your flash applications. The approach I am going to show you is a more elegant method for tracking flash than what’s been used in the past. My hope is that this two part series can save you from a potentially embarrassing moment. You know, when your CMO asks how the 6 month flash development project that cost $75K, that looks incredible, is highly engaging, and wins awards is contributing to the success of the website. Unfortunately, many people run for the hills at that moment, or act like they didn’t hear the question (Chevy Chase-style). I’d hate for you to say, “We’re not actually sure Mr. CMO…” ,and I’d rather hear you say, “Absolutely, here’s detailed reporting of how visitors are engaging our flash content, as well as the tangible effects on conversion.” Yes, I want you to be the flash analytics rock star. :)

Introduction to the Google Analytics for Adobe Flash Component (GAforFlash)
The GA for flash tracking component enables you to track specific events and functionality in your flash movies and seamlessly communicate with Google Analytics for tracking. It gracefully handles any DOM issues that could cause problems in other types of flash tracking using GA. It’s an open source initiative between Google and Adobe Systems and you can find more information on the Google Code Project website. http://code.google.com/p/gaforflash/

OK, But What Is It Exactly?
There are two components you can use in flash that enable you to track events, pageviews, conversions, etc. One is a simple flash component that you can customize in the component inspector in flash and the other component involves importing the tracking libraries into your project and then making calls to GA from within your ActionScript code (AS3). I’m going to cover the second approach, since it gives you the most flexibility. And don’t get scared with the way it was explained above. It’s actually straight forward if you are comfortable working in flash.

A Quick Tip For The Code-Averse:
I’m going to walk you through my example step by step in Part 2 of my series on tracking flash in google analytics. If you have worked in flash and written some ActionScript code, I’m confident you will be able to follow along. If not, grab your flash developer and your web analyst and then schedule a working lunch. You can all walk through my example together as a team. After going through my second post, I have a feeling you will collectively brainstorm several ways to use the GA for flash component to track your flash elements, websites, and applications.

So Are You Excited To Start?
Good, then you’re ready to read my second post, which covers how to track flash in Google Analytics using the GA for flash Tracking Component.

GG

Filed Under: flash, google-analytics, web-analytics

Google Indexes Flash Content (SWF), Some Initial Questions, Concerns, and Findings

July 17, 2008 By Glenn Gabe

Google Indexing Flash Content (SWF)On June 30th, Google announced that it was working with Adobe in order to index flash content and thousands of flash developers around the globe rejoiced! Having developed countless flash applications, I fully know the impact of making sure flash content is crawlable for SEO. Until now, many developers were faced with a big question from marketers (and that question typically came at the end of the project), “How do I make sure our flash content can be indexed by Google?” This was never a comfortable situation for flash developers… Needless to say, the news that Google will index flash content is a big step forward for content providers, marketers, and for the engines. That said, I did have some serious questions and concerns after I heard the news. I understand flash development extremely well and I’m neck deep in SEO, so it was natural for me to start thinking about this from both perspectives.

Over the past few days, I’ve been testing several flash movies and applications across my sites to see how Google has indexed them. Below, I have listed some concerns and questions, based on my experience with flash, SEO, and my research and testing over the past few days. Keep in mind, this is by no means final…I plan to write more about how the search engines index flash content over the next few months. I know this is a dynamic area for search engine optimization.

Questions, Concerns, and Findings About Google Indexing Flash Content:

1. Indexing the Core SWF File (the parent swf)

Based on what Google explained in their communication, it will index the core swf file on the page, but not associate dynamically loaded files (other swfs, xml, etc.) with the original flash file. Now, there are many reasons to load content dynamically and most professional flash developers are using these techniques to keep their content fresh and to maintain a small file size. In addition, Google said that it won’t index FLV files (which are typically loaded on demand into a parent swf), because they don’t contain any text content.

My concern is that best practices may not be used so marketers can get all of their text content into one swf. In addition, loading xml data to keep your content up to date (such as pulling the latest product information from a database) won’t be associated with the parent swf (from an SEO standpoint). So, if developers start to add more and more content into the parent SWF file, then file size can become a real issue. I know bandwidth isn’t as big of a problem as in the past, but the proper way to code multi-section flash applications is to load additional SWF files into the parent SWF. So, get ready for more, “Loading Site” animations. :) I can only hope that Google and the other engines decide to associate externally loaded content with the parent SWF file.

2. Black Hat SEO’s Must Be Chomping at the Bit!

OK, this one hit me right away and concerns me greatly. As a flash developer, you typically display text content on the fly, based on how the user is interacting with your flash movie. For example, you might have movieclips in Flash that only display when someone triggers that feature in your application (i.e. to view the latest products you have). These movieclips aren’t visible until needed. I think you can see where I am going with this… In my tests, Google indexed all of the text content in the parent SWF, including text in movieclips that may never be triggered.

Now, the fact that Google indexed all of the text content is great for white hat SEO’s, but could be extremely dangerous in the hands of a black hat SEO. I fear that some may include dozens of movieclips stuffed with keywords in order to get those terms indexed by Google. In flash, you can basically add code to any object at your disposal. So how will Google decipher what’s real text content versus text content that’s there to game their algorithm? In HTML, you pretty much know if something is hidden. In flash, how do you know if something is really hidden? For example, let’s say you had a product image and some text show up when someone rolled over a small button in the corner of the screen. Let’s say 2% of users realize it’s a button and trigger it. Is that wrong? Is that against the rules? Take that example to the nth degree and you can see why I’m concerned. I’m eager to see how Google combats black hat tactics now that flash is being indexed. And more importantly, will you (as a white hat SEO) become collateral damage if they tweak the algorithm to handle this??

3. Obfuscation and SWFEncrypt

Many flash developers use tools like SWFEncrypt to obfuscate their code. I know, horrible word, right? Try saying that 5 times really fast. :) Obfuscation encrypts your code so other programmers can’t steal it. It bumps up your file size somewhat, but helps you protect what you’ve spent hours writing! My initial concern was that if Google decompiles your flash movies to find text content, what will it do with the your obfuscated code? But I’ll stop there, as Google explained that it won’t be decompiling flash movies. I was happy to hear this… So, programmers of the world, keep obfuscating! ;-)

4. Flash Publishing, Choose your method wisely…

There are several ways to output your flash movie (SWF) in your HTML code. In a nutshell, you can use standard object and embed tags, you can use JavaScript to write out your flash movie, or you can use SWFObject to elegantly provide flash content while providing alternative HTML content. SWFObject has a few different versions that you can use, and one relies on JavaScript and the other is a standards-compliant version that doesn’t rely on JavaScript. So, how will all of these publishing methods impact your flash indexation? I definitely recommend testing each of these methods out on your own sites to gauge their effectiveness. However, Google has already said that it won’t execute some types of JavaScript. So, as you can guess, using JavaScript to publish your flash content probably isn’t the best way to go at this stage. :) That would include SWFObject 1.0 and 1.5 (for now). Google said that it is working on an update for SWFObject, but does that include 1.0 and 1.5? That said, SWFObject 2.0 using static publishing (standards-compliant) doesn’t rely on JavaScript and I’ve noticed some strong results indexation-wise.

This is such a fluid situation, that you should test out your own flash content on your own sites to see how they get indexed. In addition, keep up to date on the latest changes Google is making regarding indexing flash content. My guess is that the changes will be relatively frequent as Google learns more.

My Flash SEO Advice

So there you have it, 4 concerns and observations that I’ve had since the news hit that Google will be indexing flash content. I have listed some quick advice below:

* Don’t assume Google will automatically index all of your flash content. That would be a big mistake, as there are numerous factors involved with how you code and publish your flash movies.

* Don’t run and create an all-flash site! Please don’t do this for numerous reasons… ;-)

* Test your flash content on several sites that you control, using various publishing methods. This is the best way to gauge how your flash content is being indexed.

* Keep up to speed on how Google changes its algorithm with regard to flash content. The techniques that you use today may need to be tweaked tomorrow. That’s the just the nature of SEO.

Quick Summary

As I wrap up this post, I wanted to reemphasize that this is a big step forward for Google and the other engines, Adobe, and countless content producers across the world. I’ve been waiting for this day for a long time and I’m excited to track the progress of flash indexation. If you have discovered any interesting results, please feel free to include them here as a comment. I know I’ll be writing new posts about this topic as time goes on, based on my own testing. Now off to code and test some more flash movies! :)

GG

Filed Under: flash, google, SEO

Using SWFObject 2.0 to Embed Flash While Providing SEO Friendly Alternative Content

February 19, 2008 By Glenn Gabe

Providing Alt Content for Flash Using SWFObject 2.0

Or is it friendly? More on that later… While mapping out and building your website content, chances are you have come across a situation where you really want to utilize flash versus html content (for some functionality). Although flash can provide an extraordinary level of interactivity, the problem (SEO-wise), is that flash content cannot be indexed by the search engines (at least for now). So, you might find yourself wanting to use flash for a given task, but you might also be struggling with the lack of search engine friendly content. I have been developing with flash for over 10 years and I also work extensively on Natural Search projects, so believe me, I feel your pain. :-) I wanted to write this post to introduce and explain SWFObject 2.0, the latest and greatest version of the popular flash replacement library.

Note: If you’re a small business looking to learn more about Local Search, SEO, and The Long Tail of SEO, then you should check out my online marketing ebook, Taking Control of Your Online Marketing: Small Business Edition. The book includes detailed chapters on each of those topics. It’s a great place to start.

A Quick SWFObject Disclaimer:

Unfortunately, I (or anyone else for that matter) cannot tell you that using SWFObject is entirely search engine safe. In a perfect world, providing an accurate, alternative html version of your flash content is extremely beneficial. I’m sure that Google and the other engines would have no problem with developers using it that way. But…and it’s an important but, there will always be those who exploit something like SWFObject for cloaking.

Let’s define cloaking: Providing one version of your content to the search engines while providing a different version of content to visitors. i.e. Altered content meant to trick the search engines.

You can easily see why this could be problematic for the search engines… There has been much debate about whether SWFObject is search engine safe or not, and I cannot give you the answer. That said, I think if you utilize SWFObject to provide alternative content that directly reflects your flash content, then you should be fine. I will show you how to do this later in the post.

SWFObject 2.0 Versus SWFObject 1.5

So what’s the difference between SWFObject 2.0 and SWFObject 1.5? Well, 2.0 is the latest version of the package (thank you Captain Obvious), which enables you to provide alt html content for your flash content using standards compliant markup. Version 2.0 will replace 1.5 and other forms of flash replacement like the flash player detection kit and UFO. That said, SWFObject 1.5 is still a great solution and you may choose to keep using 1.5 until you feel comfortable using 2.0. However, you will probably want to use version 2.0 based the benefits of the new process. :)

Static Versus Dynamic Publishing

There are 2 ways to use SWFObject 2.0, providing alt content using standards compliant markup (called static publishing) and inserting alt content using unobtrusive JavaScript (called dynamic publishing). Using dynamic publishing with SWFObject 2.0 is very similar to using SWFObject 1.5, where using static publishing is the new process. In this post, I will cover the standards compliant way (static) to use SWFObject 2.0 to embed flash content in your webpage. Let’s get started.

Download SWFObject 2.0

First, visit the Google Code Project for SWFObject 2.0 and download the zipfile containing the files you need. (FYI, you should download swfobject_2_0_rc2.zip). You can also download the official documentation and always have it handy. Extract the files to your hard drive and then copy the contents to your working directory. That way, you always have the original as a backup….good lesson from my programming days. :) View the screenshot below to see which files and folders your swobject2 directory should contain.

Folder Contents for SWFObject 2.0

SWFObject and Static Publishing

Let’s implement the standards compliant version of the package to replace your flash content with alternative html content. The alt content should directly reflect the content contained in your flash movie.

1. In your swfobject2 directory, open the index.htm file, which uses the static version of swfobject 2.0. Use this file as the template for your own implementation.

2. Look at the source code to follow along. In the head of the document, you will notice the following line of code:

Adding the SWFObject JavaScript Library to Your HTML Document

3. This line of code adds the SWFObject JavaScript library in your document. Including this code is a necessary component for the package to work properly.

4. Next, let’s hop down to the html portion of the document. Note, I have changed the code below to reflect my own flash movie and alt content. You can still easily follow along, though:

Click the image below to view a larger version:

The Nested Object Tags When Using the SWFObject Static Method

5. The code above includes a series of nested object tags, which enables the SWFObject package to provide cross-browser support. When adding your own content, you will need to replace a few items:

a. Replace “swfobject2-exampleb.swf” with the name of your actual flash movie. Note, the swfobject download includes a file named “test.swf”, so if you want to run the page using that flash movie, you should be good to go.

b. Change the width and height to match your actual flash movie’s width and height. My flash movie is 400×300.

6. About half way down the page, you will find a div tag for your alternate content. This is where you will provide alternate html content that directly reflects your flash movie’s content. Feel free to use any html tags here to provide your alternative content. As you can see in the image below, I described my flash movie content in HTML.

Click the image below to view a larger version:

Providing Alternative HTML Content for Your Flash Movie

7. Let’s move back to the head of your html document for a second. You will need to register your flash movie with the swfobject library. Note, my page uses “exampleID” for the outer object tag id. You can use whatever you like or just keep the current id. You will see the following lines of code:

Register Your Flash Movie with SWFObject

8. The three parameters contain:

a.The id of the outermost object tag (myID). Note, you can change the id of the outermost object tag, but it must match what you enter in the JavaScript code when you register your flash movie. So, if you entered “flashID” instead, then you would need to enter “flashID” when you register your flash movie in the code above. Again, I used “exampleID”.

b. The version of the flash plugin you are targeting (9.0.0), and

c. The name of the express install flash movie (if you wish to use one). Note, express install will display a standard dialog box that will enable your visitors without the required plugin version to download the flash plugin. I have noticed some buggy behavior with the express install functionality, so I just provide my own link to the flash plugin. Therefore, I enter false as the third parameter.

SWFObject 2.0 Code Generator

That’s all you need to do in order to use the standards compliant version of SWFObject 2.0. I know that opening the hood and working with code directly can be tough for non-programmers, so the creators of SWFObject have been nice enough to create a code generator for you. I didn’t want to mention it until after you went through the code so you can get a good feel for how this works. :-) I know…tough love! You can download the generator from the Google Code Project. The generator presents a form where you can enter the necessary information about your projects and then it generates the right code for you. I actually find it easier to drill into the code, but that’s what I’m used to!

A Working Example

Here is a simple example of using the standards compliant version of SWFObject 2.0. After viewing the flash content, you can click View, and then Source in your browser to see the alt content in the html. I also uploaded a webpage where I am forcing the browser to show you the alt content. This is what visitors would see if they didn’t have the required version of the flash plugin. In addition, the static version of SWFObject 2.0 doesn’t rely on JavaScript to provide your flash content, so your visitors will see your flash content even if they have JavaScript turned off. A nice benefit. When you look at the source code, you can see an additional parameter I added for turning off the standard right click menu. You need to add this in two locations (both object tags) as you’ll see in the code. You can use a number of flash parameters and the SWFObject 2.0 documentation lists them for you. i.e. menu, loop, quality, wmode, etc.

Adding parameters within your object tags.

Click to Activate this Control

I know…Ugh. I won’t go into how or why Internet Explorer 6+ users must click to activate a flash movie, but it’s extremely annoying (especially for flash developers that work hard on creating killer flash movies!) Unfortunately, the standards compliant version of SWFObject 2.0 doesn’t alleviate this problem, where the dynamic versions of both SWFObject 2.0 and 1.5 alleviate the problem! Go figure. If you are looking to get rid of the dreaded “click to activate” message, then use the dynamic version of SWFObject 2.0 or 1.5 (not covered in this post). I may detail using the dynamic version of SWFObject in future posts, but this post is already getting too long! ;-)

Summary

OK, that was a lot to cover, but now you have a way to provide alternative html content for your killer flash content…and the search engines can index the alt content to boot! Again, nobody can guarantee that this is 100% search engine safe…thanks to some bad people who exploit this functionality. That said, if your alt content directly reflects your flash content, you should be ok. Used properly, this enhances the accessibility and usability of your site and will enable your killer content to be found by the search engines.

Just don’t go nuts when providing your alt content… :)

GG

Filed Under: flash, SEO

Connect with Glenn Gabe today!

RSS Latest Blog Posts

  • Google’s December 2020 Broad Core Algorithm Update Part 2: Three Case Studies That Underscore The Complexity and Nuance of Broad Core Updates
  • Google’s December 2020 Broad Core Algorithm Update: Analysis, Observations, Tremors and Reversals, and More Key Points for Site Owners [Part 1 of 2]
  • Exit The Black Hole Of Web Story Tracking – How To Track User Progress In Web Stories Via Event Tracking In Google Analytics
  • Image Packs in Google Web Search – A reason you might be seeing high impressions and rankings in GSC but insanely low click-through rate (CTR)
  • Google’s “Found on the Web” Mobile SERP Feature – A Knowledge Graph and Carousel Frankenstein That’s Hard To Ignore
  • Image Migrations and Lost Signals – How long before images lose signals after a flawed url migration?
  • Web Stories Powered by AMP – 12 Tips and Recommendations For Creating Your First Story
  • Visualizing The SEO Engagement Trap – How To Use Behavior Flow In Google Analytics To View User Frustration [Case Study]
  • The May 2020 Google Core Update – 4 Case Studies That Emphasize The Complexity Of Broad Core Algorithm Updates
  • How To Remove An Image From Google Search Using The Outdated Content Tool (When The Image Was Published On Another Site)

Web Stories

  • Google's Disqus Indexing Bug
  • Google's New Page Experience Signal

Archives

  • July 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • June 2009
  • May 2009
  • April 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • September 2008
  • August 2008
  • July 2008
  • June 2008
  • April 2008
  • March 2008
  • February 2008
  • January 2008
  • December 2007
  • November 2007
  • October 2007
  • September 2007
  • August 2007
  • July 2007
  • June 2007
  • May 2007
  • April 2007
  • November 2006
  • October 2006
  • GSQi Home
  • About Glenn Gabe
  • SEO Services
  • Blog
  • Contact GSQi
Copyright © 2021 G-Squared Interactive LLC. All Rights Reserved. | Privacy Policy

We are using cookies to give you the best experience on our website.

You can find out more about which cookies we are using or switch them off in settings.

Internet Marketing Driver
Powered by  GDPR Cookie Compliance
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

Strictly Necessary Cookies

Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

3rd Party Cookies

This website uses Google Analytics to collect anonymous information such as the number of visitors to the site, and the most popular pages.

Keeping this cookie enabled helps us to improve our website.

This site also uses pixels from Facebook, Twitter, and LinkedIn so we publish content that reaches you on those social networks.

Please enable Strictly Necessary Cookies first so that we can save your preferences!