Get tags live in 2 steps:
Continue reading if you are interested in more advanced features.
Required - Include the following script at the top of your page. Best place is in the <head> of your site:
<script type="text/javascript" id="AdvallyRules" src="https://cdn.adligature.com/slantmagazine.com/prod/rules.js"></script>Optional - Include our external stylesheet as well:
<link rel="stylesheet" type="text/css" id="AdvallyStyles" href="https://cdn.adligature.com/slantmagazine.com/prod/rules.css"></link>Add the tag script to your site. Ads will appear in the chosen size where the script is placed. Use any tag below, create your own, or try our Tag Generator.
Note - Ad Tags will only load on the approved domain.
/// Loads 728x90 or 320x50 based on device width
<div class="AdvallyTag" data-autosize="728x90,320x50"></div>
/// Always Loads 728x90
<div class="AdvallyTag" data-size="728x90"></div>
/// Always Loads 320x50
<div class="AdvallyTag" data-size="320x50"></div>
/// Always Loads 300x250 | 300x600
<div class="AdvallyTag" data-size="300x250,300x600"></div>
/// Always Loads 300x250
<div class="AdvallyTag" data-size="300x250"></div>
/// Loads 970x250 | 970x90 | 728x90 on wide devices, falling back to 728x90 or 300x250 based on device width
<div class="AdvallyTag" data-autosize="superleadermpu"></div>Create ad tags with the desired size and place them on your page. Details on the different possible ad sizes can be found below.
See examples of different IAB sizes. You can create tags with a fixed size, or our autosize feature. Fixed size tags will always request every size listed and the resulting ad will be one of the requested sizes. Autosize requests sizes based on the available width of the parent container.
You can append multiple sizes by separating them with a comma. More sizes can yield higher revenue.
<div class="AdvallyTag" data-size="300x250,300x600"></div>You could use the autosize attribute to have our script determine which size to choose based on the available width. The tag in the following example will show a 728x90 on larger devices, or 320x50 on smaller ones.
<div class="AdvallyTag" data-autosize="728x90,320x50"></div>By default autosize tags will use only the first size that fits the parent container. Add the option multiple to request all sizes that fit the parent container.
<div class="AdvallyTag" data-autosize="970x250,728x90,300x250" data-multiple="true"></div>Alternatively, you can use one of our convenient size labels for the most common size combinations.
<div class="AdvallyTag" data-autosize="leaderboard"></div>| Label | Sizes |
|---|---|
| superleaderboard | 970x250, 970x90, 728x90 | 728x90 | 320x50 |
| superleaderboard2 | 970x250, 970x90, 728x90 | 728x90 | 320x50, 320x100 |
| superleadermpu | 970x250, 970x90, 728x90 | 728x90 | 300x250 |
| leaderboard | 970x90, 728x90 | 728x90 | 320x50 |
| leaderboard2 | 970x90, 728x90 | 728x90 | 320x50, 320x100 |
| leadermpu | 970x90, 728x90 | 728x90 | 300x250 |
| mpu | 300x600, 300x250 |
Our tags have optional settings you may use.
A unique ID attribute on slots isn't necessary, however it may help Advally to identify and adjust specific unit behaviour. If you decide to add an ID to your tags, make sure they are unique on the page.
/// ID must be unique to a single slot on page
<div class="AdvallyTag" id="headerAd" data-size="728x90"></div>
/// INCORRECT - Two ads on the same page cannot have the same id
<div class="AdvallyTag" id="inlineAd" data-size="728x90"></div>
<div class="AdvallyTag" id="inlineAd" data-size="728x90"></div>
If the same tag will appear repeatedly on the same page, like in a listing or lazyload template, the ID can be controlled with a prefix by using nameprefix. Subsequent tags will be identified with a dash (-) followed by an index.
/// Provide a prefix for the div ID:
<div class="AdvallyTag" data-nameprefix="ForumThread" data-size="728x90"></div>
/// The above tag used on page multiple times will set the ID with an increment:
<div class="AdvallyTag" id="ForumThread-1" data-size="728x90"></div>
<div class="AdvallyTag" id="ForumThread-2" data-size="728x90"></div>
<div class="AdvallyTag" id="ForumThread-3" data-size="728x90"></div>
You may choose to disable units if the screen size is too big or too small.
For example, if you do not wish for a unit to display on devices smaller than 600px, you can use minwidth to define this as the minimum required screen width.
<div class="AdvallyTag" data-size="728x90" data-minwidth="600"></div>You can do the same with a maximum width using the maxwidth directive.
<div class="AdvallyTag" data-size="728x90" data-maxwidth="1000"></div>A combination of the two can also be used. This example will only display the tag if the screen width is between 600px and 1000px:
<div class="AdvallyTag" data-size="728x90" data-minwidth="600" data-maxwidth="1000"></div>The values for minwidth and maxwidth are inclusive. (eg: Maxwidth=600px will show when the window is 600px wide)
Our tags have additional optional settings. In most cases they are not needed.
Use the following features to adjust tag behaviour.
Advally utilizes a feature we call Smart Refresh which will periodically reload ad units that are in view. Smart Refresh automatically works on every unit on the page. You can choose to have Smart Refresh skip a unit by using the smartrefresh=false directive.
<div class="AdvallyTag" data-size="728x90" data-smartrefresh="false"></div>Advally will normally optimize the refresh interval for you, however it can be overridden for a particular slot using the refreshinterval directive.
<div class="AdvallyTag" data-size="728x90" data-refreshinterval="45"></div>Advally may enable LazyLoad to dynamically load units as they near your users viewport. The lazyload sensitivity of individual units can be adjusted using lazyloadmargin. The value is the distance away from the viewport that should trigger the ad load. The distance is measured as a percentage of viewport height.
The following example will trigger the ad load when it is 150% of the viewport height away from the viewport. On a device with an 800px tall viewport, it would load when 1200px from the viewport.
data-lazyloadmargin="150"There are two ways to dynamically add new units to the page.
Method 1 - Create individual elements and call advally.display('element ID', 'size') with a single size.
// Create DIV and add to the page
var div = document.createElement('div');
div.id = 'ad-inline-block';
document.body.appendChild(div);
// Request the new DIV loads a 300x250
advally.display('ad-inline-block', '300x250');
Method 2 - Write AdvallyTag tags to your page with javascript or DOM element replacement, then call advally.scanNew().
// Write new AdvallyTag to the page and set the size
var div = document.createElement('div');
div.classList.add("AdvallyTag");
div.dataset.autosize='leaderboard';
document.body.appendChild(div);
// Triggers any new tags to render
advally.scanNew();
You can refresh units by calling advally.refresh() with the ID for the units.
Note - Our wrapper will automatically handle refresh. We recommend against manually refreshing ad slots.
// Pass an array if Slot IDs to refresh
advally.refresh(['ad-inline-block']);These options are only required if Advally manages direct campaigns on your behalf.
You can pass custom targeting values for a specific unit by using the targeting directive. The following example will pass the key name "SiteSection" with value "Homepage" as part of the ad request. This is useful so Advally can target campaigns to specific site sections.
<div class="AdvallyTag" data-size="728x90" data-targeting="SiteSection=Homepage"></div>In cases where Advally helps you manage direct sold campaigns, we may request you pass additional information about your content so we can target specific pages. The types of tagging depends on how direct sold campaigns are structured, an Advally representative will work with you to determine what tags to use on which pages.
All tags are passed to the Advally script by appending the attribute targeting to our include script. The include script must also have the "id" set to id=AdvallyRules.
<script type="text/javascript" id="AdvallyRules" src="https://cdn.adligature.com/slantmagazine.com/prod/rules.js" data-targeting="var=key"></script>Additional targeting values can be passed by separating them with an ampersand "&".
data-targeting="var=key&var2=key2"A single key can also have multiple values by separating them with a comma ",".
data-targeting="var=VALUE1,VALUE2,VALUE3"You may wish to have units that are only used for direct campaigns or sponsorships. It's a good idea to disable bidding from 3rd parties for these units. You can do this with the autobidders=false directive. Below is an example unit that has no additional bidders or refresh, perfect for sponsorship slots.
<div class="AdvallyTag" data-size="200x200" data-smartrefresh="false" data-autobidders="false"></div>All ad Requests must be associated with a predefined slot in GAM. Advally uses a "catch all" unit by default, unless a GAM slot is defined with the slot directive:
data-slot="/NETWORKID/AdManagerUnit/Path"Here is a sample tag using your site's default slot:
<div class="AdvallyTag" data-size="728x90" data-slot="/21631296271/slantmagazine.com"></div>There are two helpful tools for testing your integration. Append the following arguments to the end of your page URL to trigger the Advally debug log output, or the Googletag ads overlay. You can use either individually or both together.
?AdvallyDebugLog=true?google_console=trueHere is an example of using both flags together:
http://www.example.com?AdvallyDebugLog=true&google_console=trueUse your browser's built in debugging console to view the Advally logs, while the Googletag overlay will appear at the bottom of your viewport.
Advally supports standard IAB sizes as well as custom sizes. You can see a live preview of the most common IAB sizes below.
Google Tags exported directly from Google Ad Manager are typically incomplete and will require additional changes to work correctly on most sites. These tags are non-responsive, so you would have to create custom size maps for them to render correctly on all devices. Google Tags are also not configured by default to lazy load or refresh, two important techniques for improving viewability and overall yield. You would have to write your own custom integration for handling in-view refresh, and lazy loading.
Finally, the Google Tag scripts are exported individually and will have to manually combined and adjusted to suit the ad plan of each specific page. Your site likely has many different templates, each with their own layout and ad requirements. The Google Tag header script must be adjusted to suit each paeg accordingly.
Our AdvallyTag wrapper is a management layer to make deployment easier and more reliable. Our header script only has to be included once and we will automatically generate all the appropriate Google Tag setup on your behalf. The “AdvallyTag” DIVs you place on the page are scanned and replaced with Google Tags with appropriate size maps for the current device. Additionally, we handle lazy load and refresh automatically. The resulting ad unit is still a Google Tag and the ad call is still made to Google Ad Manager exactly the same as before.