This document discusses refreshing ads on a page without refreshing the entire page. It proposes using iframes to load different ads, with each iframe pointing to the same "ad loader" page but loading a different ad. Ads can be refreshed by making a new call to the iframe's source. It also describes synchronizing ad loads by passing the same parameters to each iframe. The solution queues initial iframe ad calls and loads them sequentially, with a designated "master" ad loading first before the others. Sample implementations and test instructions are provided for Real Simple and Golf websites.
1. Dynamic Ad Refresh and
Synching (Real Simple and Golf)
July 15, 2009
IT Watercooler Meeting
v2: June 22, 2010
2. Business Requirements
• Refresh ads without refreshing the whole
page
• Each refresh = new ad impressions
• Optional: ad synchronization
3. Problem
• Ads call document.write () to be attached
to the page
• document.write () after page load = blank
page
• Trying to refresh ads on page = blank
page
4. Solution
• Use iframes and pass ad parameters:
iframe.src = ‘iframead.html?
TiiAdConfig=3475.rsm&…’;
• Each iframe points to the same “ad loader”
page but loads a different ad
• To refresh an ad, make a new call:
iframe.src = ‘iframead.html?...’;
5. Synchronization
• Pass the same random “ord” parameter
value to each iframe ad
• Pass a different “tileCounter” number
• A “master” iframe ad needs to load first
• It needs to finish loading before the next
iframe ad loads
6. Queuing Ad Calls
• Each initial iframe ad call gets placed into a
queue
• One iframe ad call is designated as the “master”
(need not be the first one on the page, but there
always has to be a “master”)
• Upon completed page load: the “master” call is
made first
• Upon completed load of the “master” ad iframe,
the rest of the iframe ad calls are made
7. Required JavaScript Libraries
• jQuery or TIMEINC library
• TiiAd libraries (tii_ads.js) – global ad
libraries for Time Inc websites
• iframeAdFactory
• iframeAd
8. Samples
• Real Simple
http://cp.timeinc.net:8080/tii/frontend/realsimple/
• Golf
http://www.golf.com/golf/tours_news/leaderboard
• Soon to be on ThisOldHouse.com
• Can be ported to any website that uses
the TiiAd libraries (tii_ads.js)
• Real Simple
http://cp.timeinc.net:8080/tii/frontend/realsimple/l
• Golf
http://www.golf.com/golf/tours_news/leaderboard
• Soon to be on ThisOldHouse.com
• Can be ported to any website that uses the
TiiAd libraries (tii_ads.js)
• Real Simple
http://cp.timeinc.net:8080/tii/frontend/realsim
ple/lotus/test/ad_refresh.html
• Golf
http://www.golf.com/golf/tours_news/leaderb
oard/0,28360,,00.html
• Soon to be on ThisOldHouse.com
• Can be ported to any website that uses the
TiiAd libraries (tii_ads.js)
9. Test It!
• In the browser address bar, enter:
– Synchronized
javascript:iframeAdFactory.refresh ()
– Unsynchronized
javascript:iframeAdFactory.refresh (true)
– Note: iframeAdFactory.refresh () is the function that
the JavaScript or SWF code needs to call to make a
synchronized refresh
10. Converting Standard Ads to Iframe
• Standard
<script type="text/javascript">
var adConfig = new TiiAdConfig("3475.golf");
adConfig.setCmSitename("cm.golf");
adConfig.setRevSciTracking(true);
var adFactory = new TiiAdFactory(adConfig,
"tours_news/leaderboards");
adFactory.setChannel("tours-news");
adFactory.setSubchannel("leaderboard");
adFactory.setChannelPage();
adFactory.setParam ('ptype', 'content');
adFactory.setParam ('!category', 'expandables');
</script>
12. Converting Standard Ads to Iframe
• Iframe
iframeAdFactory.getAd = function (id, width,
height, sizes, isMaster, getAsInnerHTML,
hookContainer)
iframeAdFactory.getQuigoAd = function
(pid, placementId, zw, zh, ps,
getAsInnerHTML)
13. Converting Standard Ads to Iframe
• Standard Ad Call
adFactory.getAd(728, 90).write();
• Iframe Ad Call
iframeAdFactory.getAd('i_728x90', 728, 90);
14. Converting Standard Ads to Iframe
• Standard “Master” Ad Call
adFactory.getAd(1, 1).write();
• Iframe “Master” Ad Call
iframeAdFactory.getAd('i_1x1', 1, 1, false,
true);
15. Converting Standard Ads to Iframe
• Standard Multi-Ad Call
adFactory.getMultiAd(new Array("300x250",
"300x600")).write();
• Iframe Multi-Ad Call (dynamically resizes)
iframeAdFactory.getAd('i_300x250', 300, 250, new
Array ('300x250', '300x600'));
16. Converting Standard Ads to Iframe
• Standard Consumer Marketing ad call
adFactory.getCmAd(300, 100, "global",
"tout").write();
• Iframe ad version – currently not
supported (no apparent need as yet)
17. Converting Standard Ads to Iframe
• Attach the iframe ad as innerHTML to div (where
div element is created dynamically, such as in
Golf.com leaderboard)
iframeAdFactory.getAd('i_640x50', 640, 50, false,
false, true, div);
• Quigo ad call (same for both standard and
iframe)
tiiQuigoWriteAd(777767, 1369746, 300, 225, -1);
18. Appendix. URLs and Templates
• Parent Page URLs (in order)
– jQuery
• Website’s domain-specific url for now
– tii_ads.js
• TIPS: http://img4.yourdomain.com/static/j/ext/tii_ads.js
• V6 and V5: http://img.timeinc.net/shared/static/js/tii_ads.js
– iframeAdFactory
• http://img2.timeinc.net/shared/static/js/timeinc/iframe_ad_factory.js
19. Appendix. URLs and Templates
• Standard Iframe Page URLs (in order)
– tii_ads.js
• TIPS:
http://img4.yourdomain.com/static/j/ext/tii_ads.js
• V6 and V5: http://
img.timeinc.net/shared/static/js/tii_ads.js
– iframeAd
• http://img2.timeinc.net/shared/static/js/timeinc/iframe_ad
20. Appendix. URLs and Templates
• Quigo Iframe Page URLs (in order)
– Quigo
• http://js.adsonar.com/js/tw_adsonar.js
– iframeAd
• http://img2.timeinc.net/shared/static/js/timeinc/iframe_ad
21. Appendix. URLs and Templates
• Templates
– Standard iframe ad
• https://frontend-
open.collabnet.timeinc.net/source/browse/frontend-
open/branches/test/ad_synching/iframe.html?view=log
– Quigo iframe ad
• https://frontend-
open.collabnet.timeinc.net/source/browse/frontend-
open/branches/test/ad_synching/iframe_quigo.html?view=log
