Creating Websites and Ad Units¶
Website Creation¶
All ad units should be grouped under a website for reporting and ad serving purposes.
To create a website, from the Monetization tab:
Click on “Websites and Ad Units” in the left menu
Click on “+ Website”
Enter a name for the Website
Click on “+ Site URL”.
Enter the URL into the text field which appears. If entering only 1 url you may need to press enter on your keyboard to complete the entry (you will know this was successful because a grey background will appear around the entered url.)
Multiple urls can be added by copying and pasting a comma-separated list into the text field; for example: http://www.publisher.com, http://www.publisher.ca, http://www.publisher.co.uk
Subdomains and subpages do not need to be added separately, but include an example of a page for every ad layout needed (e.g. Home page, Article). This can be used as part of the Ad Unit creation process.
Click “Submit” and close the “+ Website” pop up using the “X” symbol
Modifying the Website¶
To edit any of the information contained in the website record:
Click the pencil symbol next to the website name and the “Edit Site” panel will open.
Modify the website name if required
To remove individual site URLs click on the ‘x’ symbol next to the site URL (in the grey area).
To remove all of the URLs click on the larger ‘x’ symbol (in the white area)
To add a site URL, scroll to the bottom of the URL list and click ‘+ Add url’. Enter your URL into the text-field which appears. Hit the enter key to enter the new URL - you will know this was successful when it is surrounded by a grey background.
When you have finished editing the site, click the blue ‘Submit’ button.
If you have made any URL modifications, you also need to save one of the ad units belonging to the site (no changes are needed to the ad unit). This ensures the site changes are propagated correctly.
Note: it may take up-to 1 hour for the changes to take effect
Creating an Ad Unit¶
To create a new ad unit, from the Monetization tab:
Select “Websites and Ad Units” in the left menu
Click on “+ Ad Unit” and the “Create Ad Unit” page will open
From the Create Ad Unit page:
Enter a name in the “Ad Unit Name” text field. This cannot be changed later, so choose carefully.
Select the website the Ad Unit will be used on from the drop down menu.
A field called “Website URL” will appear and you should select the relevant URL from the drop down menu.
Under Placements the “Stream” item will be selected by default so no changes are required.
Scroll down to the “Ad Details” section and “Advanced Options”
From here you can either proceed by Manually Creating an Ad Template using your own code (or using one of our Templates), or you can proceed to use our Ad Builder tool to automatically create an ad template.
If using Ad Builder you should save the Ad Unit at this point by pressing the blue “Submit” button and move on to the Ad Builder Overview
Manually creating an Ad Template¶
The ad template is simply a HTML snippet which contains placeholders where the ad assets will be inserted.
The following placeholders are available for use:
Ad Assest |
Description |
---|---|
|
Click URL for the ad. Placed in the |
|
The ad image Placed in the |
|
The ad title Must be shown in-full. May contain a maximum of 50 Characters |
|
The ad text may contain a maximum of 150 characters |
|
The advertiser name Must be shown in-full. May contain a maximum of 30 characters |
|
The ad label It is permitted to hardcode your own ad label of into the template but this should be in the local language. |
|
Call To Action text (e.g. see more, download now) If used, the text must be shown in-full. May contain a maximum of 12 characters |
|
Sponsored Marker Icon should not be surround with an |
For more details on designing an ad layout please see the Native Advertising Guidelines |
To save your own ad unit template containing the required placeholders:
Scroll to Advanced Options and click on the title to display the options.
paste the HTML into the template text field
enter values (in pixels) for Image Width and Image Height to set the ad image dimensions. For responsive designs you can leave these values as 0; Flurry will apply
width: 100%
andheight: auto
as the values when 0 is entered.click “submit” to save the changes.
Note: Allow approximately 1 hour for the changes to become effective.
Positioning Ads in Content Streams (XPath)¶
Native ad serving primarily relies on XPath and the “Show first ad at position” value to define the placement of the ads.
Value |
Description |
---|---|
Show first ad at position |
The starting position for ads in the content stream. |
Every this number of articles |
The number of items between each ad placement. For example if you want an ad every 3 stream items, set this value to 3. |
Max Ads Requested |
The total number of ads to be shown. |
Using Ad Builder to set XPath¶
Ad Builder will automatically select the XPath of the content stream you selected during the ad unit creation. Try to select the first item in the stream, and amend the “Show first ad at position” value to set where in the stream the first ad should be shown.
For more details on Ad Builder please see our Ad Builder Page
Updating XPath¶
If you need to set your own XPath or update the XPath set by Ad Builder you can amend the details via the Ad Unit Settings found at: Monetization > Websites & Ad Units > Website Name > Ad Unit Name
XPath Examples and Resources¶
Most modern browser-based developer tools will allow you to copy the XPath from your browser’s developer tools via a right-click on the selected source element.
If you are familiar with XPath you can also construct your own XPath with some basic expressions. For example:
Example XPath Expression |
Description |
---|---|
|
selects the element where |
|
Selects the |
|
finds all If using with class names be very specific because, for example, if you use
|
There are many articles and guides to XPath syntax and operators available online; including:
Positioning Ads not in Stream Placements¶
If the ad will be placed outside of a stream (e.g. mid-Article) or you cannot locate a reliable XPath to use for the ad placement you can insert the ad using the “Replace” ads or <div> tag method. This enables ads to be inserted where this <div> tag is placed:
<div class="native-ad-{adUnitCode}"></div>
Replace Ads using Ad Builder¶
You can set “Replace” ads using AdBuilder as outlined in this video:
Manually setting Replace Ads¶
To enable “Replace” ads directly from the Edit Ad Unit page, set the parameters listed in the ad unit template to these values:
Show first ad at position: 99
Every this number of articles: 99
And show this number of ads: 1 [should equal the number of ads you want to show]
XPath: replace (or an invalid Xpath like: /html/body/a/a/a/a/a )
Click “Submit”
The Changes will take approximately 1 hour to become active.
Div Tag for insertion of Replace Ads¶
When using “Replace” ads, you also need to place a <div>
tag on the page for the ad to show.
When set using Ad Builder the <div>
tag is provided during set up.
For users manually setting “Replace” ads, you need to obtain the adUnitCode to be used in the <div>
tag. You can find this in:
Monetization > Websites & adunits > Site Name > Ad Tag Name > View Ad Tag
The adUnitCode you need is the long string of letters and numbers separated by hyphens.
In the example ad tags below, the ad unit code is: 9189eb82-100d-4d26-b869-cee9e12e3b86
So the <div>
tag needed to be added to the page, would be:
<div class="native-ad-9189eb82-100d-4d26-b869-cee9e12e3b86"></div>
Flurry Ad Tag:
<script type="text/javascript">
window.native = window.native || [];
window.native.push("833b5519-edb7-47c0-88be-1152bcae7870");
window.apiKey = "P55VS9SY2WQXH7TTF5ZW";
(function(d) {
var script = d.createElement("script");
script.async = true;
script.src = "https://s.yimg.com/dy/ads/native.js";
d.body.appendChild(script);
})(document);
</script>
Showing multiple ads using replace method¶
Showing multiple ads with the “Replace” ads method is simple. Firstly check the value of “show this number of ads” matches the number of ads you want to display.
Next, simply place the same <div>
tag exactly where you want the ads to display.
So for example, If you want 3 ads shown, you would place <div class="native-ad-{adUnitCode}"></div>
3 times on the page.
Mobile Moments¶
Mobile Moment ads are a large mobile-only ad format (image or video). Note: Mobile Moments is not enabled by default and needs to be manually configured for your ad unit, so please speak to your account manager for more information.
If your section has been configured for mobile moment ads, you should set the ad unit to use the replace method of insertion and use the template below for your mobile moment placements:
<div>
<a href="{click_url}" style="display: block;">
<img src="{portraitImage}" data-native-format="moments" data-native-imgtype="default" />
</a>
</div>
With this template, you can handle static and video mobile moment ads easily.
You can then load the ad unit using the standard ad tag and by insert the required placeholder <div>
tag for the “replace” insertion method, or use one of our self-injecting custom tags.
For further information on the mobile moment ad format, please refer to the ad specifications or speak to you account manager.
Mobile Moments Interscroller Template¶
To display Mobile Moments ads as an interscroller format, you should set the ad unit to use the replace method of insertion and use one of the following templates (note that tweaks may be needed depending on the margins and paddings used on your site):
Compact version¶
<div class="native-interscroller" data-native-format="interscroller" style="display: flex; height: 100vh; position: relative;">
<style>.native-interscroller .ad-feedback-icon { top: 30px !important; }</style>
<div style="background: #000; color: #fff; display: flex; font-size: 11px; left: 0; padding: 4px; position: absolute; right: 0; top: 0; z-index: 10; transform: translateZ(0);">
<span>Ad</span>
<span style="flex: 1; text-align: center; text-transform: uppercase;">Scroll to continue with content</span>
</div>
<div class="native-interscroller-content" style="clip: rect(0, auto, auto, 0); left: 0; overflow: hidden auto; position: fixed; top: 0; transform: translateZ(0px); width: 100%;">
<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="background-image: url({portraitImage}); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: contain; background-color: #000; height: 100vh; max-width: 100%;" />
<a href="{click_url}" target="_blank" style="display: block; height: 100%; left:0; position: absolute; top: 0; width: 100%;"></a>
</div>
</div>
Expanded version¶
<div class="native-interscroller" data-native-format="interscroller">
<style>
.native-interscroller {
display: flex;
height: 100vh;
position: relative;
}
.native-interscroller .ad-feedback-icon {
top: 30px !important;
}
.native-interscroller-header {
background: #000;
color: #fff;
display: flex;
font-size: 11px;
left: 0;
padding: 4px;
position: absolute;
right: 0;
top: 0;
z-index: 10;
transform: translateZ(0);
}
.native-interscroller-header-text {
flex: 1;
text-align: center;
text-transform: uppercase;
}
.native-interscroller-content {
clip: rect(0, auto, auto, 0);
left: 0;
overflow: hidden auto;
position: fixed;
top: 0;
transform: translateZ(0px);
width: 100%;
}
.native-interscroller-content img {
background-image: url({portraitImage});
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
background-size: contain;
background-color: #000;
height: 100vh;
max-width: 100%;
}
.native-interscroller-content a {
display: block;
height: 100%;
left:0;
position: absolute;
top: 0;
width: 100%;
}
</style>
<div class="native-interscroller-header">
<span>Ad</span>
<span class="native-interscroller-header-text">Scroll to continue with content</span>
</div>
<div class="native-interscroller-content">
<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
<a href="{click_url}" target="_blank"></a>
</div>
</div>
You can then load the ad unit using the standard ad tag and the required placeholder <div>
tag for the “replace” insertion method, or use one of our self-injecting custom tags.