Torboto/yolla-example

## yolla-example
Script Tag

Yolla Media will provide a script tag that needs to be placed within the <head> of the page. This should be placed as close to the opening <head> tag as possible.

Your tag:

<script type="text/javascript" src="https://portal.cdn.yollamedia.com/storage/tag/example.js"></script> [NOTE: This was sent to you previously for each site]


Code Blocks for Banner Ads

Code blocks are <div> elements added to the body of the page where ads should be displayed. Keep in mind when adding these code blocks that the parent element should have a flexible size or is big enough to allow all the ad sizes selected for the code block.

Example code block (a mobile ad in this case):

<div

    class="ympb_target"

    data-type="mobile-leaderboard-template"

    data-subtype="320x50,320x100"

></div>


Attributes:

class

1.                   ympb_target – this is the class used for standard code blocks

a.              Example:
<div id=”post_container”>
   <p>Lorem ipsum…</p>
   <p>Lorem ipsum…</p>
   <p>Lorem ipsum…</p>
   …
   …
   …
   <p>Lorem ipsum…</p>
   <div class=”ympb_target” data-type=”desktop-mobile-leaderboard-template”></div>
</div>


data-type

(Required) This indicates the ad unit type that will be used.

1.       desktop-leaderboard-template

2.       mobile-leaderboard-template

3.       desktop-medrec-template

4.       mobile-medrec-template

5.       desktop-sticky-template

6.       desktop-adhesion

7.       mobile-adhesion

Notes:

·       The first part of the name indicates the device platform where the code block will render an ad. The Yolla tag will automatically detect the device and only render the appropriate code blocks.

·       Second part of the name:

o   leaderboard – recommended for 728x90 (320x50 on mobile) or wider ads

o   medrec – recommended for 300x250 or taller ads

o   sticky – ads with this type will scroll up until it hits the top of the viewport at which point it becomes a fixed element and remains in view

o   adhesion – this ad will be fixed at the bottom center of the page on top of all other page elements. Technically you can place this code block anywhere within the <body>

data-subtype

(Optional) This indicates the size(s) supported by the code block. If entering multiple sizes, separate each one by a comma.

Example:

<div

    class="ympb_target"

    data-type="desktop-leaderboard-template"

    data-subtype="728x90,970x90"

></div>


If omitted, default values will be used. The following are the default sizes:

1.       desktop-leaderboard-template code blocks: 728x90

2.       mobile-leaderboard-template code blocks: 320x50, 320x100, 300x50, 300x100, 292x30, 220x90, 300x31, 292x30, 234x60

a.     This code block also supports one preset keyword “large”. When data-subtype=”large” is used, the following sizes will be included:
320x50, 320x100, 300x50, 300x100, 292x30, 240x133, 220x90, 300x31, 292x30, 234x60, 300x250,250x250,180x150

3.       desktop-medrec-template and mobile-medrec-template code blocks: 300x250

5.       desktop-adhesion: 728x90

6.       mobile-adhesion: 320x50
	Script Tag

	Yolla Media will provide a script tag that needs to be placed within the <head> of the page. This should be placed as close to the opening <head> tag as possible.

	Your tag:

	<script type="text/javascript" src="https://portal.cdn.yollamedia.com/storage/tag/example.js"></script> [NOTE: This was sent to you previously for each site]



	Code Blocks for Banner Ads

	Code blocks are <div> elements added to the body of the page where ads should be displayed. Keep in mind when adding these code blocks that the parent element should have a flexible size or is big enough to allow all the ad sizes selected for the code block.

	Example code block (a mobile ad in this case):

	<div

	class="ympb_target"

	data-type="mobile-leaderboard-template"

	data-subtype="320x50,320x100"

	></div>



	Attributes:

	class

	1. ympb_target – this is the class used for standard code blocks

	a. Example:
	<div id=”post_container”>
	<p>Lorem ipsum…</p>
	<p>Lorem ipsum…</p>
	<p>Lorem ipsum…</p>
	…
	…
	…
	<p>Lorem ipsum…</p>
	<div class=”ympb_target” data-type=”desktop-mobile-leaderboard-template”></div>
	</div>



	data-type

	(Required) This indicates the ad unit type that will be used.

	1. desktop-leaderboard-template

	2. mobile-leaderboard-template

	3. desktop-medrec-template

	4. mobile-medrec-template

	5. desktop-sticky-template

	6. desktop-adhesion

	7. mobile-adhesion

	Notes:

	· The first part of the name indicates the device platform where the code block will render an ad. The Yolla tag will automatically detect the device and only render the appropriate code blocks.

	· Second part of the name:

	o leaderboard – recommended for 728x90 (320x50 on mobile) or wider ads

	o medrec – recommended for 300x250 or taller ads

	o sticky – ads with this type will scroll up until it hits the top of the viewport at which point it becomes a fixed element and remains in view

	o adhesion – this ad will be fixed at the bottom center of the page on top of all other page elements. Technically you can place this code block anywhere within the <body>

	data-subtype

	(Optional) This indicates the size(s) supported by the code block. If entering multiple sizes, separate each one by a comma.

	Example:

	<div

	class="ympb_target"

	data-type="desktop-leaderboard-template"

	data-subtype="728x90,970x90"

	></div>



	If omitted, default values will be used. The following are the default sizes:

	1. desktop-leaderboard-template code blocks: 728x90

	2. mobile-leaderboard-template code blocks: 320x50, 320x100, 300x50, 300x100, 292x30, 220x90, 300x31, 292x30, 234x60

	a. This code block also supports one preset keyword “large”. When data-subtype=”large” is used, the following sizes will be included:
	320x50, 320x100, 300x50, 300x100, 292x30, 240x133, 220x90, 300x31, 292x30, 234x60, 300x250,250x250,180x150

	3. desktop-medrec-template and mobile-medrec-template code blocks: 300x250

	5. desktop-adhesion: 728x90

	6. mobile-adhesion: 320x50