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

https://s.yimg.com/oo/cms/products/flurry-docs/publisher/images/Creating_flurry_site_84d6a42a3.png

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”

https://s.yimg.com/oo/cms/products/flurry-docs/publisher/images/manual_ad_creation_flurry_98dbd5b5f.png

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} (required)

Click URL for the ad.

Placed in the href attribute of the <a> element (e.g. <a href="{click_url}">...</a>)

{image} (required)

The ad image

Placed in the src attribute of a <img> element (e.g. <img src="{image}">). The ad image will be inserted as a background image for all browsers except Internet Explorer where the ad image is inserted via the src attribute

{title} (required)

The ad title Must be shown in-full. May contain a maximum of 50 Characters

{description} (optional)

The ad text

may contain a maximum of 150 characters

{sponsor} (required)

The advertiser name

Must be shown in-full. May contain a maximum of 30 characters

{sponsorLabel} (required)

The ad label

It is permitted to hardcode your own ad label of into the template but this should be in the local language.

{callToAction} (optional)

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

{gemini} (required)

Sponsored Marker Icon

should not be surround with an a element as the icon links back to Gemini Ad Policies {gemini_alt} is a white version of the icon for use with dark backgrounds

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% and height: 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

//*[@id="id-name"]

selects the element where id="id-name"

//*[@id="id-name"]/ul/li

Selects the <li> children of <ul> elements belonging to an element where id="id-name"

div[contains(@class, "class-name")]

finds all <div> tags containing class names containing the text “class-name”

If using with class names be very specific because, for example, if you use [contains(@class, "site")] there may be multiple elements with classnames like: site-header, site-wrapper, site-footer etc.

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.