Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Dynamic Ad Refresh and Synching

1,701 views

Published on

Implementation presentation/manual

  • Be the first to comment

  • Be the first to like this

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

×