CBS Interactive Hosted Flash Setup

Please see below for instructions on setting up CBS Interactive hosted Flash files. For more information, please email us at AdSpecQuestions@cbs.com.

  • AS2 clickTAG
  • AS3 clickTAG
  • AS3 COMPONENT

ACTIONSCRIPT 2.0 clickTAG INSTRUCTIONS

1.

The clickTAG tracking code

In single-SWF Flash creative, advertisers should use the clickTAG method of tracking exit links. For multiple-SWF creative or more advanced options, refer to the CBS Interactive AS2 Tracking Component instructions. CBS Interactive will provide the advertiser with reports on both clicks and impression data. To implement the clickTAG method, attach the following code to a button you wish to track.

on (release) {
if (_root.clickTAG.substr(0,5)=="http:"){
getURL (_root.clickTAG, "_blank");
}
}

Advertiser must use target=”_blank” for the window option.

The exit link for the button should be provided to CBS Interactive separately and not hard coded into the SWF. You may provide a direct link to your website or a third-party tracking url. The URL can be no more than 128 characters long.

2.

Where to add the code

The clickTAG code should be added to a button’s on (release) actions. Be careful not to add this code directly to your timeline. First select the button you wish to track, open the “Actions” panel (press F9) and add the code. See below for an example: step2

3.

Multiple exit links

If there is more than one link to be tracked, we recommend numbering each clickTAG variable. The first button’s action would use clickTAG1, the second would use clickTAG2, and so on through clickTAG10. CBS Interactive will only track up to 10 links individually.

Button 1:

on (release) {
if (_root.clickTAG1.substr(0,5)=="http:"){
getURL (_root.clickTAG1, "_blank");
}
}

Button 2:

on (release) {
if (_root.clickTAG2.substr(0,5)=="http:"){
getURL (_root.clickTAG2, "_blank");
}
}
4.

Common mistakes

Do not use on (press) instead of on (release), as the press event triggers pop-up blockers. This code is incorrect: incorrect_ex1 The clickTAG variable is case-sensitive. Do not use alternate variations such as clicktag, ClickTag, ClickTAG, CLICKTAG, etc. incorrect_ex2

For more information on clickTAG implementation, please visit Adobe Support.

For technical help regarding Flash tracking, please contact: AdSpecQuestions@cbs.com.

ACTIONSCRIPT 3.0 clickTAG INSTRUCTIONS

1.

The clickTAG tracking code

In single-SWF Flash creative, advertisers should use the clickTAG method of tracking exit links. For multiple-SWF creative or more advanced options using ActionScript 3, refer to the CBS Interactive AS3 Tracking Component instructions. CBS Interactive will provide the advertiser with reports on both clicks and impression data. The getURL function and on(release) handlers no longer exist in ActionScript 3.0, so the clickTAG code must be reworked to accommodate the navigateToURL function. The code below assumes there is a blank movie clip on your stage (acting as the button) which has an instance name of blank_button.

Example using navigateToURL:

import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.events.MouseEvent;
import flash.net.navigateToURL;
import flash.net.URLRequest;

blank_button.addEventListener(
 MouseEvent.MOUSE_UP,
  function ():void{
   if (LoaderInfo(stage.root.loaderInfo).parameters.clickTAG!=null){
    var clickURL:String = LoaderInfo(stage.root.loaderInfo).parameters.clickTAG;
    if (clickURL.substr(0,5)=="http:") {
     navigateToURL(new URLRequest(clickURL), "_blank");
    }
   }
  }
);

The exit link for the button should be provided to CBS Interactive separately and not hard coded into the SWF. You may provide a direct link to your website or a third-party tracking URL. The URL can be no more than 128 characters long.

ActionScript 3.0 requires importing various libraries in order to thoroughly track clicks on our end (Loader, LoaderInfo, MouseEvent, navigateToURL, URLRequest). These libraries only need to be imported once per creative, but the five imports listed at the top of the code are all required for clickTAG.

2.

Where to add the code

The clickTAG code should be added to the timeline (in ActionScript 3.0, you can no longer attach ActionScript to the movie clip itself, only to the layer). Create a new layer, select the first keyframe in the layer and open the Actions panel (press F9) and add the code. This layer should be present for the entire duration of the timeline.

3.

Multiple exit links

If there is more than one link to be tracked, we recommend numbering each clickTAG variable. The first button’s action would use clickTAG1, the second would use clickTAG2, and so on through clickTAG10. CBS Interactive will only track up to 10 links individually. Note that clickTAG appears in two places in the code; both must be consistent.

Button 1:

blank_button1.addEventListener(
 MouseEvent.MOUSE_UP,
 function ():void{
  if (LoaderInfo(stage.root.loaderInfo).parameters.clickTAG1!=null){
   var clickURL:String = LoaderInfo(stage.root.loaderInfo).parameters.clickTAG1;
   if (clickURL.substr(0,5)=="http:") {
    navigateToURL(new URLRequest(clickURL), "_blank");
   }
  }
});

Button 2:

blank_button2.addEventListener(
 MouseEvent.MOUSE_UP,
 function ():void{
  if (LoaderInfo(stage.root.loaderInfo).parameters.clickTAG2!=null){
   var clickURL:String = LoaderInfo(stage.root.loaderInfo).parameters.clickTAG2;
   if (clickURL.substr(0,5)=="http:") {
    navigateToURL(new URLRequest(clickURL), "_blank");
   }
  }
});

4.

Common mistakes

The clickTAG variable is case-sensitive. Do not use alternate variations such as clicktag, ClickTag, ClickTAG, CLICKTAG, etc.

blank_button.addEventListener(
 MouseEvent.MOUSE_UP,
 function ():void{
  if (LoaderInfo(stage.root.loaderInfo).parameters.clickTAG!=null){
   var clickURL:String = LoaderInfo(stage.root.loaderInfo).parameters.clickTag;
   if (clickURL.substr(0,5)=="http:") {
    navigateToURL(new URLRequest(clickURL), "_blank");
   }
 }
});

When exporting your SWF you will need to target Flash Player 9 or higher. ActionScript 3 requires a minimum of Flash Player 9.

For more information on navigateToURL implementations, please visit Adobe Support.

For technical help regarding Flash tracking, please contact AdSpecQuestions@cbs.com.

ACTIONSCRIPT 3.0 TRACKING COMPONENT INSTRUCTIONS

Use this guide to add CBS Interactive tracking into AS3 Flash creative that meets any of the following criteria:

  • Contains more than one SWF File
  • Contains Flash Video (FLV)
  • Contains internal events which require tracking
  • Is an expand ad, a pushdown ad, or a lightbox ad

If you are building a single-SWF Flash creative and only need to track exit links, please see the AS3 clickTAG Instructions.

Flash designers outside of CBS Interactive must meet with the CBS Interactive Rich Media Team for a tutorial before using the CBS Interactive Tracking Component. Contact your sales representative or AdSpecQuestions@cbs.com to set up a call.

1.

Installing the CBS Interactive AS3 Tracking Components

download as3 tracking component

Download CBSI_AS3_Tracking_v1.0.0.mxp Version 1.0.0 (updated 11.17.11)
Includes: CBS Interactive AS3 Tracking Component, CBS Interactive AS3 Video Component

Install the CBS Interactive Tracking Component

Once downloaded, start Adobe’s Macromedia Extension Manager program. From the File menu, choose “Install Extension”. Browse to the location of the CBS Interactive Tracking Component MXP file you just downloaded. Follow the dialog to install the package to Flash. If you run into issues installing the MXP, make sure you have the correct version of the Extension Manager installed. Your Extension Manager version should correspond to your version of Flash.

as3_componentWhen you next start Flash, you will find the CBS Interactive components in your component library. To open the Component Library, use the shortcut Control-F7 (Windows) or Command-F7 (Mac). Inside the library, expand the CBS Interactive folder to see all the available tracking components (see right).

If you have also installed the CBS Interactive AS2 Tracking Components, you will notice that the AS3 tracking components and video controls are differentiated by “AS3″ in the title.

Next, use the instructions below to set up tracking of your exit links, events, movie subloads, and Flash video.

Set up your creative and include the CBS Interactive Tracking Component

  1. Open your main FLA file (if you have multiple Flash movies, this would be your main SWF file that will load the other SWF files).
  2. Create a new layer named “CBS Interactive” on the top level of your creative’s main timeline for scene 1.
  3. Select the keyframe on frame 1, scene 1 of the “CBS Interactive” layer and drag the CBS Interactive Tracking Component onto your stage (but outside the movie’s viewable area) in this keyframe. You must have the tracking component remain on the stage throughout the duration of your animation. Your timeline should look similar to this:

as3_component

The CBS Interactive Tracking Component is ready to use. You may now add tracking commands to the rest of your movie.

2.

Implementing and Tracking Submovie Loads

The CBS Interactive tracking class will track up to 4 SWF loads or 3 SWF loads and 1 FLV load. For instructions on loading a FLV video into your creative, see 5. Implementing and Tracking a Flash Video (FLV). To implement and track a Submovie load, use the method getMovie described below.

The getMovie function

Usage

CBSI.getMovie ( movieNumber , " swfFileName " , movieClipTarget )

Parameters

movieNumber
An integer between 1 and 4, identifying which of the four subloads you wish to track.

swfFileName
A string identifying the SWF filename you wish to load. Your submovie should be saved in the same directory as your main creative.

movieClipTarget
The movie clip target is the instance name of the movie clip into which you wish to load your submovie. Your movie clip target should always be relative to the _root of your movie. If you would like to make a subload within a subload, the movie clip target should reflect this hierarchy.

Example

function():void { 
   CBSI.getMovie(1, "movie_Subload_1.swf", parent_clip.movieclip_name);
}

This function will load the file “movie_Subload_1.swf” into the movie clip movieclip_name (which is contained in parent_clip) and track the event as subload 1. Make sure to enclose the SWF name in quotes. Add this line again for each movie subload in your creative, substituting the correct movie number, filename, and movie clip target.

Notes

  • The CBS Interactive Tracking Component does not support loading movies into layers and does not support loading submovies from outside domains.
  • All subloads must be hosted by CBS Interactive.
3.

Tracking Exit Links

You may track up to 30 exit links. This limit applies to the creative as a whole, not each subload. To set up an exit link, use the exit function noted below. The exit function will track and execute the exit link. There is no need for an additional navigateToURL or ExternalInterface command. The URLs for your exit links will be entered into the ad system when your ads are ready for trafficking. As a result, none of your exit links will be active until the ads are running inside the CBS Interactive ad system.

The exit function

Usage

CBSI.exit ( exitNumber , " description " , " target ", " url " )

Parameters

exitNumber
An integer between 1 and 30, identifying which of the ten exit links you wish to track.

description
A string describing the exit link. This is used to help debugging and testing.

target
This is an optional parameter to specify the browser target of the URL. If left unspecified, the browser target is set to “_blank” by default.

url
This is an optional parameter to specify the URL for the exit link. By default this will be added to the creative by the CBS Interactive ad server. Use this parameter if your exit URL is dynamic (for instance, the URL is specified in an RSS feed).

EXAMPLE: Linking to a new browser window

function():void {
   CBSI.exit (1, "Your exit link description");
}

Example: Linking to the same browser window

function():void {
   CBSI.exit(1, "Your exit link description", "_top");
}

CBS Interactive hosts Flash files in an Iframe, so links to the same browser window should target _top rather than _self.

Example: Linking to a dynamic URL from an RSS feed where RSS_URL is the name of your URL variable

function():void {
   CBSI.exit (1, "Your exit link description", RSS_URL, "_top");
}

4.

Tracking Internal Events

You may track up to 10 internal events. This limit applies to the creative as a whole, not each subload. Events can be triggered by rollovers, clicks, or any other interaction allowed in Flash, including select, drag, and scroll. To track an event, use the event function.

The event function

Usage

CBSI.event ( eventNumber , " description " )

Parameters

eventNumber
An integer between 1 and 10, identifying which of the ten events you wish to track.

Description
A string describing the event. This is used to help debugging and testing.

Example

function():void {
   CBSI.event(1, "Your event description");
}

5.

Implementing and Tracking a Flash Video (FLV)

CBS Interactive only supports tracking of one Flash Video. These instructions assume you have an FLV file which meets CBS Interactive specifications ready to use in your movie. If your video file is not in FLV format, use a program like Flash Media Encoder to export your video file to FLV and make sure the compression settings output a file under 1.2 MB.

Using the CBS Interactive Video Component

  1. To set up tracking of a Flash Video, drag the Video Component from the CBS Interactive directory of your Component Library onto your stage to the frame where you would like to incorporate video. as3_tracking_setup_video
  2. Next, resize the component to your desired dimensions. For best results, keep the aspect ratio of the video object the same as your FLV.
  3. Finally, set the parameters for the CBS Interactive Video Component in the Properties panel (use Shift-F3 to display the panel if hidden): as3_tracking_setup_video

Parameters

Audio on autoplay:
Choose if the video should play with audio if it is started without user interaction. This should be off unless approved otherwise by CBS Interactive.

Auto play video:
Choose if the video should automatically start playing when it is reached in the timeline.

FLV Filename:
Supply the filename of your FLV file (saved in the same directory as your main creative).

Enabled:
Will enable or disable the video component.

Visible:
When left unchecked, only sound from the video will play. With visible checked, the video will be viewable in addition to audio.

Adding video controls

To add a video control, simply drag it from the Component Library onto the stage. If you have the CBS Interactive AS2 Video Component installed, please be sure to select only the video controls labeled AS3. Once on your stage, the controls are editable to conform to your creative’s style and color scheme. To edit the visual style of a control, open the CBS Video Assets folder in your library and reformat the buttons contained therein.

play_pause_toggle CBS Play/Pause Toggle
The Play/Pause Toggle button will play or pause your Flash Video depending on the current state of the video.

mute_unmute_toggle CBS Mute/Unmute Toggle
The Mute/Unmute Toggle button will mute or unmute your Flash Video depending on the current state of the video.

stop_button CBS Stop Button
The Stop button will stop the video and return the video to the first frame.

replay_static_button CBS Replay Static Button
The Replay button will restart the video from the beginning.

replay_overlay_button CBS Replay Overlay Button
The Replay Overlay button can be dragged over the Video Component and it will hide itself while the video is playing. If the user stops the video or the video reaches the end, the replay button will appear.

Flash may take a second or two to buffer your video, so playback may not begin immediately. See the advanced tips below for more information.

5a. Advanced Flash Video Usage

There are a variety of advanced functions available for use with the CBS Interactive Video Component if the control buttons do not provide sufficient control for your creative. These functions will only work while the Video Component exists on your stage.

Flash Video control functions

CBSIVideo.play();

Use this function to start or unpause your video. The videoPlay function is designed to work when the video is not yet started, paused, or finished.

CBSIVideo.pause();

Use the pause function to pause your video.

CBSIVideo.unPause();

Use the unpause function to restart your video when paused.

CBSIVideo.replay();

The replay function will restart your video from the beginning. This function will replay the video regardless of whether your video is currently playing, paused, or finished.

CBSIVideo.mute();

Use the mute function to mute your video. This function will only mute your video; it will not affect other sounds in your movie.

CBSIVideo.unmute();

Use the unmute function to unmute your video. This function will only mute your video; it will not affect other sounds in your movie.

6.

Implementing and Tracking Expand Ads

An expand ad is composed of two Flash files:

  • A base panel Flash file: a standard IAB-sized Flash ad.
  • An expand panel Flash file: initially hidden and revealed only upon user interaction.

The CBS Interactive Tracking Component must be included in both panels. In your expand panel file, the component should be the only Flash object on keyframe 1. Your animation should begin on keyframe 2.

Tracking data and limitations are shared between the two SWFs. Only 30 exit links, 10 events, 4 subloads, and 1 FLV will be tracked for the creative as a whole.

The expand function

Use the expand function in your base panel Flash file to trigger the opening of your expand panel. CBS Interactive ad specs may require your creative to expand on either a rollover or click. Both types of expand function require the following setup:

Usage

CBSI.expand()

Example

on (release) {
	   CBSI.expand();
}

The collapse function

The collapse function is only required for expand panels that are click-to-collapse. Rolloff-to-collapse is handled automatically by the CBS Interactive Tracking Component.

Usage

CBSI.collapse()

Example

function():void {
   CBSI.collapse();
}

7.

Implementing and Tracking Pushdown Ads

A pushdown ad is composed of 3 states:

  • The auto-expanded state: the expanded state which loads when the ad first loads on the page. The page content is “pushed down” to accommodate the ad. This state only lasts for 8 seconds.
  • The user-expanded state: the expanded state which loads when the user interacts with the collapsed state.
  • The collapsed state: page content has “pushed up” into the space the expanded state once occupied. The collapsed state is triggered either automatically when the auto-expanded state is complete, or by user interaction with the expanded state.

A separate Flash file is used for each state. For the expanded states, you can use the same Flash file for both, for a total of 2 Flash files. You also have the option to use a different Flash file for the user-initiated expand state and for the auto-initiated expand state, for a total of 3 files.

The CBS Interactive Tracking Component must be included in all files.

If your expanded state contains a video with sound, separate files for auto- and user-initiated expands are required to accommodate different Video Component audio settings: the auto-expanded state with “Audio on autoplay” turned off, and the user-expanded state with “Audio on autoplay” turned on.

Your creative may include subloads, exit links, events, and one FLV video; tracking data and limitations are shared between the two SWFs. Only 10 exit links, 10 events, 4 subloads, and 1 FLV will be tracked for the creative as a whole.

The pushdown function

Use the pushdown function to trigger the expanding of your ad from a button or event in the collapsed state of your Flash movie. CBS Interactive ad specs may require your creative to expand on either a rollover or click.

Usage

CBSI.pushdown();

Example

function():void {
	   CBSI.pushdown();
	}

The collapse function

Use the collapse function in the expanded state Flash file of your creative to trigger the collapsed state Flash file. CBS Interactive ad specs require your creative to contain a “close” button utilizing the collapse function. Rolloff-to-collapse is handled automatically by the CBS Interactive Tracking Component.

Usage

CBSI.collapse();

Example

function():void {
	   CBSI.collapse();
	}

8.

Testing and Publishing Your Flash Creative

To test creative with subloads or Flash Video, you can use the “Test Movie” command within the Flash IDE and see it play correctly.

To test exit links and events, use “Test Movie”, interact with the SWF, and observe the Flash Output pane in the Flash IDE. You should see confirmation that clicks on your exit links or events have been triggered in your movie and will be tracked when the unit is live. Your exit links will not load in a browser until your Flash movie has been trafficked in the CBS Interactive ad server.

Publishing your FLA files

CBS Interactive accepts Flash SWFs published for Flash Player 9 or later. Go to “Publish Settings” in the “File” menu to set the Flash Player version for your SWF.

For information on CBS Interactive restrictions on Flash Player version, frames per second, file size, and dimensions, please refer to CBS Interactive Ad Specs.

For technical help regarding Flash Tracking, please contact AdSpecQuestions@cbs.com.