safeframe
Version:
SafeFrame provides a consistent JS API to include 3rd party content
129 lines (104 loc) • 4.38 kB
HTML
<html>
<head>
<title>Filmstrip: Rising Stars with SafeFrame</title>
<link type="text/css" rel="stylesheet" href="samp.css" />
</head>
<body>
<div id="center">
<div id="topBar" >
<div id="contentLogo" class="mockContent"></div>
<div id="contentNav" class="mockContent">
<script type="text/javascript" src="risingstarnav.js" ></script>
</div>
</div>
<div id="adUnitWrapper" class="asWrapper" >
</div>
<div id="contentTop" class="mockContent">
<h1>Filmstrip Rising Star Ad</h1>
</div>
<div id="contentRight" class="mockContent">
<div id="filmstripAd"></div>
</div>
<div id="contentLeft" class="mockContent">
<div>
<em>The Filmstrip is a 300x3000 canvas, viewable through a 300x600 window and fully controlled by viewer</em>
<p>
The IAB Filmstrip enables enhanced creative story‐telling capabilities within a single ad creative. Advertisers submit just one 300x3000 Filmstrip with five different segments. The Filmstrip is then served through the IAB UAP 300x600. Simple engagement features – scroll, click, hover, and touch – allow the user to explore all 5 segments of the 300x3000 creative.
</p><p>
One application involves aligning the five segments of the Filmstrip to the five stages of the purchase funnel (awareness, interest, desire, intent, and loyalty). The IAB Filmstrip is designed to launch from any 300x600 ad location on any publisher across devices (PC, iPad and, eventually, mobile). Publishers share a common logic/algorithm that selects the appropriate phase of the purchase funnel depending on ad location (Homepage content might map with ‘awareness’; Lifestyle content might map with ‘desire’). The common logic would also enable the sequencing of the ad as the user browses through a portal.
</p>
<ul>
<li>
<a href="http://www.iab.net/risingstars" target="_blank">... More on IAB Rising Star ad units</a>
</li>
</div>
</div>
<div id="contentBottom" class="mockContent">
<div id="logger"></div>
</div>
</div>
<script type='text/x-safeframe' class='sf_data'>
{
"id": "pushdownAd",
// relative source is relative to the r.html bootstrap file "../../examples/IAB_RisingStars/AdFiles/pushdownAdBootstrap.js",
// ALWAYS USE ABSOLUTE SOURCES
// "src": "http://safeframes.emination.com/risingStars/adfiles/pushdownAdBootstrap.js",
"src": "http://safeframes.emination.com/risingStars/adfiles/filmstripAdBootstrap.js",
"conf":
{
"w": 300,
"h": 600,
"dest": "filmstripAd",
"supports" : {
"exp-push" : "0",
"read-cookie" : "1",
"write-cookie" : "1"
}
}
}
</script>
<!--
INCLUDES OF THE SAFEFRAMES FRAMEWORK
These script files should be hosted on your CDN from a different
top level domain from the host site.
-->
<!-- local version
<script type="text/javascript" src="../../src/js/lib/base.js"></script>
<script type="text/javascript" src="../../src/js/host/host.js"></script>
<script type="text/javascript" src="../../src/js/lib/boot.js"></script>
-->
<script type="text/javascript"
src="https://s3-us-west-2.amazonaws.com/safeframe/refimpl/1-0-3/js/lib/base.js"></script>
<script type="text/javascript"
src="https://s3-us-west-2.amazonaws.com/safeframe/refimpl/1-0-3/js/host/host.js"></script>
<script type="text/javascript"
src="https://s3-us-west-2.amazonaws.com/safeframe/refimpl/1-0-3/js/lib/boot.js"></script>
<script type="text/javascript">
function posMessageCallback(id, msgName, data){
if(msgName == "error"){
var log = document.getElementById("logger");
var msg = ["error in ad ", id];
if(data && data.errors){
msg.push(data.errors);
}
msg.push("<br/>");
log.innerHTML += msg.join("");
}
}
/**
* Initialize a new SafeFrames publisher configuration
*/
(function() {
var conf = new $sf.host.Config({
// Should be absolute path to render file hosted on CDN "../../src/html/r.html",
//renderFile: "http://s3-us-west-2.amazonaws.com/safeframe/refimpl/1-0-3/html/r.html",
renderFile: "http://s3-us-west-2.amazonaws.com/safeframe/refimpl/1-0-3/html/r.html",
onPosMsg: posMessageCallback,
positions: {}
});
})();
</script>
<script type='text/javascript' src='http://safeframes.net/google_analytics_sfnet.js' ></script>
</body>
</html>