Quick Start – Part 3: Embed Video

Overview

Playwire Banner Advertising unlocks revenue potential for your sites and helps you maximize your earning potential with our cutting-edge header bidding integration. We make the process of adding banner advertising to your site seamless and efficient. Follow the steps below to get started:

1

Current Implementation:

You will need to remove the old ad tag implementation on your site to prevent any conflicts with the Playwire Banner Advertising code. There may be multiple places the old code may still be present on: the homepage template, run-of-site templates and both desktop and mobile templates.
  • Contact your Playwire Account Manager if you have any questions about your current implementation
  • Identify which ad placements are currently on your site
  • Typically the placements might be: 728×90 Leaderboard above the fold and below the fold, 320×250 Medium Rectangle above the fold and below the fold
2

Remove Old Code:

  • In the <head> of your document, you will need to remove any old scripts from Google DFP or your previous ad server implementation:
    	<!DOCTYPE html>
    	<html>
    
    	<head>
    		<script type='text/javascript'>
    			var googletag = googletag || {};
    			googletag.cmd = googletag.cmd || [];
    			(function() {
    			var gads = document.createElement('script');
    			gads.async = true;
    			gads.type = 'text/javascript';
    			var useSSL = 'https:' == document.location.protocol;
    			gads.src = (useSSL ? 'https:' : 'http:') + 
    			'//www.googletagservices.com/tag/js/gpt.js';
    			var node = document.getElementsByTagName('script')[0];
    			node.parentNode.insertBefore(gads, node);
    			})();
    		</script>
    			 
    		<script type='text/javascript'>
    			googletag.cmd.push(function() {
    			googletag.defineSlot('/1056613/protools_above_comments_full_banner_468x60', [468, 60], 'div-gpt-ad-1427669183026-0').addService(googletag.pubads());
    			googletag.defineSlot('/1056613/protools_sidebar_top_square_250x250', [250, 250], 'div-gpt-ad-1427669183026-2').addService(googletag.pubads());
    			googletag.pubads().enableSingleRequest();
    			googletag.enableServices();
    			});
    		</script>
    	</head>
    
    	<body>
    	</body>
    	</html>
    	
  • You will need to also remove code snippets that display the the placements within the body of your document
  • They usually contain a <div> with an id of your placement tag and a <script> containing googletag function calls:
  • Old googletag.display Ad Tags:
    	<!-- Example Google DFP 468x60 Placement -->
    	<div id='div-gpt-ad-1427669183026-0' style='width:468px; height:60px;'>
    		<script type='text/javascript'>
    			googletag.cmd.push(function() { googletag.display('div-gpt-ad-1427669183026-0'); });
    		</script>
    	</div>
    	
  • Once you are absolutely sure there is no old code on your site, you are ready to move to the next step
3

Implementing the New Ad Tags:

You will receive an onboarding kit, specific to your account and website. Within the kit, you will find a code snippet containing 2 scripts to include in the <head> of the document and ad tags to be placed in the <body> of the document.
Important

Both the <head> scripts and the <body> ad tag placements MUST be in the source code of the web page – NOT injected into the DOM after page load

  • Within your on-boarding kit, find the section labeled Head Scripts, copy the code to your clipboard
  • Place the copied code right after the opening <head> tag of your HTML document. Make sure to use your custom code, DO NOT use the code below:
    	<!DOCTYPE html>
    	<html>
    
    	<head>
    	<!-- Place scripts as close to opening <head> tag as possible -->
    	<script type="text/javascript">
    	  var tyche = { mode: 'tyche', config: '//config.playwire.com/1006036/v2/websites/52704/banner.json' };
    	</script>
     
    	<script id="tyche" src="//cdn.intergi.com/hera/tyche.js" type="text/javascript"></script>
    
    	</head>
    
    	<body>
    
    	<!-- 728 x 90 ATF Desktop -->
    	<div data-pw-desk="leaderboard_atf"></div>
    	<!-- 320 x 50 ATF Mobile -->
    	<div data-pw-mobi="leaderboard_atf"></div>
    
    	<!-- 728 x 90 BTF Desktop -->
    	<div data-pw-desk="leaderboard_btf"></div>
    	<!-- 320 x 50 BTF Mobile Adhesion Unit -->
    	<div data-fixed="true" data-pw-mobi="leaderboard_btf"></div>	
    
    	<!-- 300 x 250 ATF Desktop -->
    	<div data-pw-desk="med_rect_atf"></div>
    	<!-- 300 x 250 ATF Mobile -->
    	<div data-pw-mobi="med_rect_atf"></div>
    
    	<!-- 300 x 250 BTF2 Desktop -->
    	<div data-pw-desk="med_rect_btf"></div>
    	<!-- 300 x 250 BTF2 Mobile -->
    	<div data-pw-mobi="med_rect_btf"></div>
    
    	</body>
    	</html>
    	
  • To differentiate between desktop and mobile placements, the embed will denote whether its for desktop: “data-pw-desk” or mobile: “data-pw-mobi”
  • For example, the desktop 300×250 above the fold placement would look like this <div data-pw-desk=’med_rect_atf’></div>
  • Paste both the desktop and mobile* ad tags in their correct place
  • By default, we automatically detect desktop and mobile* devices and serve the appropriate placement based on the device – but we also offer a way to override the automatic detection using a setting in the head script isMobile: ‘auto | true | false’
  • For example, if your site is NOT mobile optimized, you can force all placements to load desktop only by adding the isMobile: ‘false’ setting to your head script
    
    	<script type="text/javascript">
    	  var tyche = { 
    	  				mode: 'tyche', 
    	  				config: '//config.playwire.com/1006036/v2/websites/52704/banner.json',
    	  				isMobile: 'false' 
    	  			};
    	</script>
    	
    *Mobile Placements
    You can place both desktop and mobile placements on your page. Our script will automatically detect which device the user is on. However, if your site utilizes a separate mobile template view for your site, for example if your m.site.com will only serve a mobile optimized experience, you can use separate desktop and mobile ad tags for each experience.
4

Live Header Bidding Demo:

Code Example

<!DOCTYPE html>
<html>
<head>

<!-- Place scripts as close to opening <head> tag as possible -->
<script type="text/javascript">
var tyche = { mode: 'tyche', config: '//config.playwire.com/1006036/v2/websites/52704/banner.json' };
</script>

<script id="tyche" src="//cdn.intergi.com/hera/tyche.js" type="text/javascript"></script>

</head>

<body>

<!-- 728 x 90 ATF Desktop -->
<div data-pw-desk='leaderboard_atf'></div>
<!-- 320 x 50 ATF Mobile -->
<div data-pw-mobi='leaderboard_atf'></div>

<section class="content">

	<h2>ARTICLE CONTENT</h2>

	<p>Bacon ipsum dolor amet jerky filet mignon short loin tenderloin. Bresaola pork loin frankfurter beef ribs boudin doner chuck meatball flank tri-tip landjaeger. Spare ribs ham hamburger tongue prosciutto ball tip cow jowl meatloaf tail salami. Capicola bacon porchetta doner, flank pork belly jowl corned beef kielbasa shoulder.</p>

	<p>Drumstick short loin flank chuck biltong ground round. Doner kielbasa pig turducken hamburger, ham hock drumstick cow pancetta frankfurter pork. Meatball salami ham hock meatloaf spare ribs andouille drumstick tongue jowl capicola bacon fatback strip steak chuck. Beef ribs shankle ham hock turducken. Sirloin strip steak tongue, biltong filet mignon picanha tail pig corned beef landjaeger. Andouille prosciutto chicken porchetta ham. Shank pork loin chicken, pancetta ribeye frankfurter pork chop shoulder capicola landjaeger meatloaf chuck t-bone.</p>

	<p>Picanha ham ham hock, jerky burgdoggen swine alcatra t-bone fatback cow ground round ball tip tri-tip pork. Pig doner turducken, capicola short loin turkey tenderloin pastrami. Chicken t-bone ball tip swine, spare ribs rump bacon pancetta. Chicken pork chop pastrami, pork belly hamburger pork picanha jowl sirloin frankfurter fatback turkey.</p>

	<!-- 728 x 90 BTF Desktop -->
	<div data-pw-desk="leaderboard_btf"></div>
	<!-- 320 x 50 BTF Mobile Adhesion Unit -->
	<div data-fixed="true" data-pw-mobi="leaderboard_btf"></div>

</section>

<section class="sidebar">

	<!-- 300 x 250 ATF Desktop -->
	<div data-pw-desk="med_rect_atf"></div>
	<!-- 300 x 250 ATF Mobile -->
	<div data-pw-mobi="med_rect_atf"></div>

	<img src="http://placehold.it/350x150?text=Sidebar+Image">

	<!-- 300 x 250 BTF Desktop -->
	<div data-pw-desk="med_rect_btf"></div>
	<!-- 300 x 250 BTF Mobile -->
	<div data-pw-mobi="med_rect_btf"></div>

	<img src="http://placehold.it/350x150?text=Sidebar+Image">

	<!-- 300 x 250 BTF2 Desktop -->
	<div data-pw-desk="med_rect_btf"></div>
	<!-- 300 x 250 BTF2 Mobile -->
	<div data-pw-mobi="med_rect_btf"></div>

</section>

</body>
</html>

Live Demo -or- view standalone example
  • Was this Support Article Helpful ?
  • yes   no