Dynamic Ad Refresh and
Synching (Real Simple and Golf)
July 15, 2009
IT Watercooler Meeting
v2: June 22, 2010
Business Requirements
• Refresh ads without refreshing the whole
page
• Each refresh = new ad impressions
• Optional: ad s...
Problem
• Ads call document.write () to be attached
to the page
• document.write () after page load = blank
page
• Trying ...
Solution
• Use iframes and pass ad parameters:
iframe.src = ‘iframead.html?
TiiAdConfig=3475.rsm&…’;
• Each iframe points ...
Synchronization
• Pass the same random “ord” parameter
value to each iframe ad
• Pass a different “tileCounter” number
• A...
Queuing Ad Calls
• Each initial iframe ad call gets placed into a
queue
• One iframe ad call is designated as the “master”...
Required JavaScript Libraries
• jQuery or TIMEINC library
• TiiAd libraries (tii_ads.js) – global ad
libraries for Time In...
Samples
• Real Simple
http://cp.timeinc.net:8080/tii/frontend/realsimple/
• Golf
http://www.golf.com/golf/tours_news/leade...
Test It!
• In the browser address bar, enter:
– Synchronized
javascript:iframeAdFactory.refresh ()
– Unsynchronized
javasc...
Converting Standard Ads to Iframe
• Standard
<script type="text/javascript">
var adConfig = new TiiAdConfig("3475.golf");
...
Converting Standard Ads to Iframe
• Iframe
<script type="text/javascript">
iframeAdFactory.queryString =
'TiiAdConfig=3475...
Converting Standard Ads to Iframe
• Iframe
iframeAdFactory.getAd = function (id, width,
height, sizes, isMaster, getAsInne...
Converting Standard Ads to Iframe
• Standard Ad Call
adFactory.getAd(728, 90).write();
• Iframe Ad Call
iframeAdFactory.ge...
Converting Standard Ads to Iframe
• Standard “Master” Ad Call
adFactory.getAd(1, 1).write();
• Iframe “Master” Ad Call
ifr...
Converting Standard Ads to Iframe
• Standard Multi-Ad Call
adFactory.getMultiAd(new Array("300x250",
"300x600")).write();
...
Converting Standard Ads to Iframe
• Standard Consumer Marketing ad call
adFactory.getCmAd(300, 100, "global",
"tout").writ...
Converting Standard Ads to Iframe
• Attach the iframe ad as innerHTML to div (where
div element is created dynamically, su...
Appendix. URLs and Templates
• Parent Page URLs (in order)
– jQuery
• Website’s domain-specific url for now
– tii_ads.js
•...
Appendix. URLs and Templates
• Standard Iframe Page URLs (in order)
– tii_ads.js
• TIPS:
http://img4.yourdomain.com/static...
Appendix. URLs and Templates
• Quigo Iframe Page URLs (in order)
– Quigo
• http://js.adsonar.com/js/tw_adsonar.js
– iframe...
Appendix. URLs and Templates
• Templates
– Standard iframe ad
• https://frontend-
open.collabnet.timeinc.net/source/browse...
Questions?
Willi Gamboa
Senior Web Developer
Front End Development Team
Time Inc
Upcoming SlideShare
Loading in …5
×

Dynamic Ad Refresh and Synching

1,663 views
1,559 views

Published on

Implementation presentation/manual

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,663
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dynamic Ad Refresh and Synching

  1. 1. Dynamic Ad Refresh and Synching (Real Simple and Golf) July 15, 2009 IT Watercooler Meeting v2: June 22, 2010
  2. 2. Business Requirements • Refresh ads without refreshing the whole page • Each refresh = new ad impressions • Optional: ad synchronization
  3. 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. 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. 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. 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. 7. Required JavaScript Libraries • jQuery or TIMEINC library • TiiAd libraries (tii_ads.js) – global ad libraries for Time Inc websites • iframeAdFactory • iframeAd
  8. 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. 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. 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>
  11. 11. Converting Standard Ads to Iframe • Iframe <script type="text/javascript"> iframeAdFactory.queryString = 'TiiAdConfig=3475.golf&adConfigPairs=' + encodeURIComponent('setCmSitename=cm.golf&setRevSciTrackin g=true')+ '&TiiAdFactory=' + encodeURIComponent('tours_news/leaderboards') + '&adFactoryPairs=' + encodeURIComponent('setChannel=tours- news&setSubchannel=leaderboard&setChannelPage=') + '&paramPairs=' + encodeURIComponent('ptype=content&! category=expandables'); iframeAdFactory.url = '[url path]/iframe.html'; iframeAdFactory.quigoUrl = '[url path]/iframe_quigo.html'; </script>
  12. 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. 13. Converting Standard Ads to Iframe • Standard Ad Call adFactory.getAd(728, 90).write(); • Iframe Ad Call iframeAdFactory.getAd('i_728x90', 728, 90);
  14. 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. 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. 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. 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. 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. 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. 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. 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
  22. 22. Questions? Willi Gamboa Senior Web Developer Front End Development Team Time Inc

×