search
top

HTML5 animation – one step closer

And is from Adobe.

Yes, there is a new product just around the corner called Adobe Edge.

Quoting from Adobe Labs:

an upcoming tool for creating smooth motion and transitions for screens of all sizes, utilizing the latest web standards like HTML/HTML5, JavaScript and CSS. Highlights include:

  • Visually create motion content in an easy to use, timeline-based interface
  • Create new compositions from scratch, import and energize web graphics, or add motion to existing CSS-based HTML layouts.
  • Trust that your content works reliably on desktops as well as devices.

There is also a video preview of the tool on the preview page and is does look impressive.

Van Halen and media targeting.

First I will start by saying that Van Halen has nothing to do with media targeting. However this idea come to me while listening one of their songs.

The story begins with me having a small problem with my American Express card so I called their customer service to fix it. I have talked for a couple of minutes with some very nice guy there trying to help me and he needed to put me on hold to find out something from one of their department. And then it happened.

The “elevator music”, the dreadful “on hold – wait for us” music was actually a very nice surprise for me – Van Halen. I was literally blown away. This was the best experience ever I’ve had staying on hold on a phone.

And then I thought, I am a rock fan and that music was a perfect match for me. I could have stayed without problem half an hour at the phone listening to rock. What if everybody that is placed on hold on the phone could benefit from the same experience? What if the customer service from each company could benefit from having my profile and target me with a better selection of music?

I know that what happened to me was just pure luck (on my side) but it definitely created a positive impression on my side for the American Express company. Translate this to the thousands customer that call them each day and that can be quite beneficial for their business IF they could target even 50% of the calls and provide the right music.

 

Adobe SiteCatalyst extension is back and is.. simple.

The latest version (1.2) of Adobe SiteCatalyst extension for Flash Pro was just released. The first major change that can be seen form the beginning is a new screen just after the login.

Simple Tracking

Simple Tracking

This first screen will present two options: Simple Tracking and Custom Tracking. The Custom Tracking is the previously available way to track Flash applications. This version of the extension, adds a new simpler way for those that just want to track something fast and do not need customization.

This Simple Tracking will allow for three simple tagging workflows.

1. Tagging the widget

Track widget view

Track widget view

Just after logging in and selecting Simple Tracking from the previous screen all that needs to be done to track every displaying of a SWF is to select the report suite you need your data to be sent and check the “Track widget views” checkbox. If you enable debugging (conveniently placed on the left bottom side of the panel) you can see the following call being made by the SWF just at the beginning.

AppMeasurement Debug: http://a……m.112.2o7.net/b/ss/acralexqe/0/FAS-3.1.2-AS3C/s31989403446204?AQB=1&ndh=1&t=17/11/2010%2011%3A36%3A55%205%20-120&ce=ASCII&ns=a……m&cdp=2&pageName=Simple%20application&g=file%3A///C%7C/demo/Simple%2520application.swf&cc=USD&s=1680×1050&AQE=1
http://a……m.112.2o7.net/b/ss/acralexqe/0/FAS-3.1.2-AS3C/s31989403446204?AQB=1
ndh=1
t=17/11/2010 11:36:55 5 -120
ce=ASCII
ns=a……m
cdp=2
pageName=Simple application
g=file:///C|/demo/Simple%20application.swf
cc=USD
s=1680×1050
AQE=1

So, this was very easy. I have now a way to be notified each time somebody views my application. And of course not only this. SiteCatalyst infers a lot of other useful information out of this request.

As it can be seen, the pageName parameter is automatically filled with the widget name.

2. Tagging a frame

Tagging a frame

Tagging a frame

Two steps are required to tag a frame view: select the frame from the timeline and click the “Add tracking” button. To have more relevant information in the SiteCatalyst reports, you can specify a label for that tag and you will know how many users reached that frame. The generated call looks like this:

AppMeasurement Debug: http://a……m.112.2o7.net/b/ss/acralexqe/0/FAS-3.1.2-AS3C/s36277548735961?AQB=1&ndh=1&t=17/11/2010%2011%3A48%3A32%205%20-120&ce=ASCII&ns=a……m&cdp=2&pageName=Simple%20application%3A%3Ashow%20model&g=file%3A///C%7C/demo/Simple%2520application.swf&cc=USD&s=1680×1050&AQE=1

http://a……m.112.2o7.net/b/ss/acralexqe/0/FAS-3.1.2-AS3C/s36277548735961?AQB=1

ndh=1
t=17/11/2010 11:48:32 5 -120
ce=ASCII
ns=a……m
cdp=2
pageName=Simple application::show model
g=file:///C|/demo/Simple%20application.swf
cc=USD
s=1680×1050
AQE=1

You may notice that the pageName parameter now contains both the widget name and the frame name.

3. Tagging and object

Tagging an object

Tagging an object

Tagging an object is as simple as tagging a frame. There are however two differences. For an object, it’s instance name (in this case Cancel) will be used to identify the tag. Also for objects, a trigger event can be selected. By default the click event is selected.

Running the application and pressing the Cancel button that becomes visible on frame 31 will generate the following call to SiteCatalyst.

AppMeasurement Debug: http://a……m.112.2o7.net/b/ss/acralexqe/0/FAS-3.1.2-AS3C/s38168986542150?AQB=1&ndh=1&t=17/11/2010%2011%3A56%3A21%205%20-120&ce=ASCII&ns=a……m&cdp=2&pageName=Simple%20application%3A%3ACancel&cc=USD&pe=lnk_o&pev1=Simple%20application%3A%3ACancel&pev2=Simple%20application%3A%3ACancel&s=1680×1050&AQE=1

http://a……m.112.2o7.net/b/ss/acralexqe/0/FAS-3.1.2-AS3C/s38168986542150?AQB=1

ndh=1
t=17/11/2010 11:56:21 5 -120
ce=ASCII
ns=a……m
cdp=2
pageName=Simple application::Cancel
cc=USD
pe=lnk_o
pev1=Simple application::Cancel
pev2=Simple application::Cancel
s=1680×1050
AQE=1

The pageName parameter now contains a combination of the widget name and the button name. Also two other parameters are sent now: pev1 and pev2. This are the URL and the URL Name that are sent because this object related calls are sent as Custom Links.

This simple way of tagging a SWF will be most of the time sufficient. If this is not the case, you can always go to the Custom Tracking to benefit from the full power of SiteCatalyst customizations.

Getting started with the Adobe SiteCatalyst extension for Flash Professional CS5

And the last piece of the puzzle:

In this tutorial, you’ll learn how to add SiteCatalyst tracking to a SWF file using the features provided by the Adobe SiteCatalyst extension for Adobe Flash Professional CS5. SiteCatalyst is one of the most powerful web analytics tools on the market. It offers the ability to track visitor behavior and gather various data in meaningful reports, organized in report suites. Among these reports, statistics such as client conversion funnels, user activity, and product sales are broken down by events, such as shopping cart additions or checkouts, movie viewing statistics, and many more….

Read the full article on Flash Developer Center.

Getting started with the Adobe Test&Target Extension for Flash Professional CS5

A colleague of mine has written the second article about the extensions we are creating. This one is about how a Flash developer can instrument an asset with Adobe Test&Target.

You can read the article here: http://www.adobe.com/devnet/flash/articles/fl_tnt_overview.html

Getting started with the Adobe Test&Target Extension for Dreamweaver CS5

My article with the same title has become public on the Adobe Developer Connection site. So if you are interested in how to enable A/B testing for your site using Adobe Test&Target you can find all the details in that article.

You can read the article here: http://www.adobe.com/devnet/dreamweaver/articles/dw_tnt_overview.html

Latest Internet trends at your disposal

I have written lately only about SiteCatalyst and Test&Target, specifically about the extensions created to help a Flash Pro user to easily instrument a Flash project.

There is another project that is kind of related to these ones, but is all about data: Adobe SiteCatalyst NetAverages.

SiteCatalyst NetAverages

SiteCatalyst NetAverages

So, what is this good for?

First of all, in my opinion, you can use it to optimize your web site or web application to have a best look on the most popular browsers or platforms. It’s a 20-80 kind of thing. Use 20% of your energy to support 80% of your market. And what better way to know what are your 80′s?

NetAverages offers a wide range of properties you can drill down into, like: JavaScript version, screen resolution, operating system or flash player version. It has properties for both the desktop world and mobile.

However, by far the coolest feature for me is the ability to set up alerts. Do you what to know when Google Chrome reaches 10% of the market? It’s just one click away:

Setting up an alert in NetAverages

Setting up an alert in NetAverages

Using external images with Adobe Test&Target for Flash Professional CS5

Let’s start this small tutorial from an empty file and three experiences created in the panel. For how to create these experiences please read the previous article:

Omniture Test&Target for Flash Professional CS5 – how-to in images.

Campaign with three experiences.

Campaign with three experiences.

Having this place to start from, what it remains is to add an external image to the flash and to create variations for this image. To add an external image to your file just go in the Components panel and drag a UILoader to the stage.

Add an UILoader to the stage.

Add an UILoader to the stage.

To actually add the external image to the stage, just go into the Properties panel and change the source property to point to an image. I have used as source an image from my previous article.

Add a source for UILoader.

Add a source for UILoader.

The next thing to do is to add the UILoader to the campaign an create variations for this image. For that, just select the component on the stage and press the Include button. You can see now in the panel the image being part of all experiences.

Include the UILoader to flashbox.

Include the UILoader to flashbox.

Previewing the experiences will render the same external image for all of them. You will need to create now the variations for each of the experiences. The process simple. Open the symbol created for the UILoader when it was included into the flashbox (double click on it) and change the source property for each of the experiences. When previewing each experience you should be able to see each different image.

All three experiences have different images.

All three experiences have different images.

The UILoader is not restricted however just to images, you can also load other SWFs.

Omniture Test&Target for Flash Professional CS5 – how-to in images

Returning to my previous post, I have promised to continue talking about these extensions. The first one is Omniture Test&Target for Flash Professional CS5. As a picture is a thousand words, this article is a very long one :).

For this demo I will use a simple add that shows an image, some text and a button to click on. My goal is to have two variations for this add, both in the same SWF and the targeting for this ad to be done using Test&Target.

Create campaign and flashbox

Create campaign and flashbox

As you can see in the image, I am already logged in and I can choose to work on an existing campaign or to create a new one. I will create a new one.

Create campaign and flashbox

Create campaign and flashbox

After creating the campaign I will create two experiences that will hold the two variations I want for this ad.

Create experiences

Create experiences

So, one variation is exactly what the ad is showing right now and I’ve called it “Local Picks”. The other variation called “Subscription” will use the same ad as a template (design and animation) but will have a different image, text and button label. The first thing I will change is the text. The text is a symbol in this case so I will go inside the symbol and using the Include button I will include the text into the Test&Target workflow, making it part of both experiences.

Add text to experiences

Add text to experiences

To have variations between the two experiences I will select the Subscription experience from the Test&Target panel, go inside the text symbol and change the text to “Subscribe to our magazine”

Change the text

Change the text

I will do the same thing with the buttons’s label and with the image.

Add image to experience

Add image to experience

When adding an image to the Test&Target workflow, the image is transformed into a symbol and a labeled keyframe is created on that symbol timeline for each experience present into the panel. To change the image for the Subscription experience I will go inside the symbol and for the second keyframe I will swap the image with a different one from the Library panel.

Swap the image

Swap the image

Swap the image

Swap the image

After this, I sync my work with the Test&Target server. By doing so, all the information necessary to present the two variations for this ad are saved on the Test&Target server.

My campaign and flashbox on the Test&Target server.

My campaign and flashbox on the Test&Target server.

On the server, I can still edit the text present in the ad WITHOUT the need to recompile the SWF. I can create new experiences if I want to test different tag lines also WITHOUT recompiling the SWF. The only limitation is that I can not select for these experiences images that are not already embedded in the SWF, at least not in the way I have created this demo. This is possible if a Loader object is used and the experiences will hold the URL to a remote image.

I will create some very simple targeting rules for my ad: I want my site to show the Local Picks experience for all the new users arriving on it and to show the Subscription experience for all the returning ones.

Add targeting rules

Add targeting rules

All I need to do now is approve the campaign and I’m set.

Belorussian provided by PC

Omniture SiteCatalyst and Test&Target extensions

We’ve been working hard for the last couple of months, after the Omniture was acquired by Adobe, to create an integration between Omniture products and Adobe products. The result was the Omniture SiteCatalyst and Test&Target extensions.

First, a short description taken from the release notes:

  • Omniture SiteCatalyst extension for Adobe Flash Professional CS5 – Visually add tracking to Flash content, directly from the creative workflow, without manually tagging each piece of content. This will dramatically shorten analytics implementation times, allowing you to focus on the impact of your creative work.
  • Omniture Test&Target extension for Adobe Flash Professional CS5 – Easily create and manage Flash content variations for online marketing campaigns directly from your creative workflow, without duplicating effort or writing ActionScript code.
  • Omniture Test&Target extension for Adobe Dreamweaver CS5 - Visually create and manage HTML content for online marketing campaigns, without having to write HTML code.

And now, lets present the Flash Pro extensions using some images:

login

login

call to action

call to action

working environment

working environment

Soon I will start to create some small demos to showcase how to work with this extensions on a real working scenario. Stay tuned..

« Previous Entries

top