JavaScript Integration Demo

Overview: This method is very flexible and supports all InStream slots. However, it requires strong JavaScript skills.

Technology: This example uses the open source FlowPlayer to play a Pre-roll video ad and then a video. It is used in this demonstration because it is open source (free), popular, and full featured. FlowPlayer provides methods to communicate with JavaScript. Other FLV players may support similar integrations.

JavaScript used in this page communicates with the FlowPlayer and waits for the video ad to begin. Once the JavaScript sees that the FlowPlayer is beginning to play the video ad, it tracks the playback and sends the tracking information back to the SpotXchange ad servers.

Here is the JavaScript used in this example:

<script type="text/javascript"> // Setup the spotx parameters spotx_channel_id = "69798"; spotx_content_format = "FlashVideo"; spotx_content_width = "400"; spotx_content_height = "355"; spotx_content_id = "content_for_demos"; spotx_content_duration = "135"; // in seconds spotx_content_url = "http://cdn.spotxchange.com/website/content_for_demos.flv"; spotx_content_title = "Puppy time!"; spotx_content_desc = "Watch my cute puppy play around. cool music."; spotx_content_tags = "cute puppy,fun,music"; spotx_ad_max_duration = "35"; spotx_ad_type = "preroll"; spotx_ad_click_target = "_blank"; spotx_return_type = "js_object"; spotx_banner_size = "300x250"; spotx_banner_container_id = "banner"; </script> <!-- The flowplayer_tracking.js script is only intended as an example. Please download it and modify it if you would like to use it --> <script type="text/javascript"src="<a href="/js/flowplayer_tracking.js"mce_href="http://www.spotxchange.com/js/flowplayer_tracking.js">js/flowplayer_tracking.js</a>"></script> <script type="text/javascript"src="http://search.spotxchange.com/js/spotx.js"></script>

If you use the FlowPlayer, you can copy this JavaScript and use it on your own content viewing page. It uses our JavaScript Integration option and syndicates a video ad from SpotXchange. Then it creates a playlist for FlowPlayer and waits until it sees the ad begin loading.

Description: In the example below, a pre-roll video ad plays, followed by a piece of video content. A matching 300x250 Companion Banner is placed adjacent to the video player. Clicking either the video ad or the companion banner opens a new tab in your browser and directs you to the advertiser's landing page. Refreshing your browser plays the next available ad, until all available ads have been shown. When all available ads have been shown, ads will not be available to you until after 20 minutes have expired (or until you clear your cookies), at which point the sequence will begin anew starting with the first available ad.

Troubleshooting: If you don't see any ads, even after you have cleared your cookies, your browser may not be sending a valid US IP address. If you are not in the US or if you are behind a firewall, please contact your SpotXchange account representative for assistance in viewing this example.

Alternative Integration Options: SpotXchange offers a number of flexible ways to query our network for video ads. If this particular method does not meet your needs, please review the integration options page for alternative methods.