Support Articles

How to set-up advertisements using code snippets

The code snippets feature is designed primarily to position display advertising on your Zapnito site. Here's how it works.
Zapnito Dec 10, 2020

This article contains the following sections:

Introduction and caveats

Code snippets allow your site administrators to place advertising embed codes on various areas of your Zapnito site. Usually this will mean some Javascript code provided by a platform such as Google Ad Manager (formerly known as DoubleClick). The code is placed into a code snippet position, and then rendered into the <HEAD> and/or <BODY> elements within the page HTML (code snippets can also be used to embed Twitter feeds and and other embeddable content such as surveys).

Please note that you will need to have a reasonable amount of background knowledge about embedded ads and content to use code snippets.

What's more, while we are happy to investigate if your code snippets appear not to be working as expected, please note that the vast majority of problems to do with embedded content are caused by the tool that has generated the embed code or the way it has been embedded into a code snippet, and they will therefore need to be resolved on your end.

 

Code snippet positions

There are currently 9 positions that are typically used for ad placements. These are;

  1. Layout
  2. Footer
  3. Channel top leaderboard
  4. Channel bottom leaderboard
  5. Content top leaderboard
  6. Content bottom leaderboard
  7. Content sidebar
  8. Channel MPU
  9. Content MPU

 

Layout

  • Single position; appears on all pages of the site, below the very top navbar
  • Disappears as the user scrolls down the page
  • 1272 x 110 pixels

 

Footer

  • Single position
  • Appears at the bottom of all pages of the site, above any footer page navigation
  • 1272 x 110 pixels

 

Channel top leaderboard

  • One position per channel; appears at the top of the channel page
  • A channel ID slug needs adding to the code snippet to specify in which channel(s) the ad appears (see 'dynamic variables' below. If no slug is added, the ad will appear in all channels
  • 1272 x 110 pixels

 

Channel bottom leaderboard

  • One position per channel; appears at the bottom of the channel page
  • A channel ID slug needs adding to the code snippet to specify in which channel(s) the ad appears. If no slug is added, the ad will appear in all channels
  • 1272 x 110 pixels

 

Content top leaderboard

  • One position per item of content
  • Appears below the content actions buttons
  • A content ID slug needs adding to the code snippet to specify in which item(s) of content the ad appears. If no slug is added, the ad will appear on all content
  • 1272 x 110 pixels

Content bottom leaderboard

  • One position per item of content
  • Appears at the end of the body content before the author bio
  • A content ID slug needs adding to the code snippet to specify in which item(s) of content the ad appears. If no slug is added, the ad will appear on all content
  • 1272 x 110 pixels

Content sidebar

  • Appears on the right-hand side of the piece of content, below 'Recommended Content'.
  • 300 x 250 pixels - Medium Rectangle
  • 300 x 600 pixels - Half Page/Wide Skyscraper
  • 160 x 600 pixels - Skyscraper

 

Channel MPU

  • One position per channel; appears at the top right of the first row of content
  • A channel ID slug needs adding to the code snippet to specify in which channel(s) the ad appears. If no slug is added, the ad will appear in all channels
  • 646 x 320 pixels

 

Content MPU

  • One position per item of content; appears at the top right of the body section
  • A content ID slug needs adding to the code snippet to specify in which item(s) of content the ad appears. If no slug is added, the ad will appear on all content
  • 320 x 320 pixels (or size as required)

 

Using the code snippet editor

If you are an admin for your site, you can access the code snippet editor under the cog icon in the top right-hand corner of the page and select 'Settings'. Scroll down to the Admin header where you will find the 'Code Snippets' settings tile.

Click the 'New Code Snippet' button to open the editor or click on the name of an existing snippet to make changes.

The code snippet editor allows you to paste the embed code into the page <HEAD> as well as any HTML or CSS that you require, which will be applied to the page <BODY>. You can then select the desired position for the code snippet from the dropdown list provided.

From this page, you can also select a cookie consent category for the snippet, which in this case should be 'Advertising'.

Dynamic variables

The code snippet editor also allows you to make use of two dynamic place holders. The placeholders must be surrounded by double curly braces as the examples below.

{{slug}} -- The slug is used to provide a unique reference to content (typically used to ensure ads appear in specific channels).

{{ad_unit_path}} -- The ad unit path is used to provide a unique reference to any page on the site and is made of the resource path within the URL.

 

Any queries? Contact us at support@zapnito.com or add a comment below.