Skip to main content

How to set-up advertisements using code snippets

Jon Beer
  • Updated

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

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 11 positions that are typically used for ad placements. These are;

  1. Above navbar leaderboard
  2. Home leaderboard
  3. Footer leaderboard
  4. Channel top leaderboard
  5. Channel bottom leaderboard
  6. Content top leaderboard
  7. Content bottom leaderboard
  8. Content sidebar
  9. Dashboard MPUs
  10. Channel MPU
  11. Content MPU

 

Above navbar leaderboard

  • Single position; appears on all pages of the site, above the very top navbar
  • Disappears as the user scrolls down the page
  • 728 x 90 pixels
  • Code snippet = 'Above Navbar'

Screenshot_2020-12-10_at_11.36.46.png

 

Home leaderboard

  • Single position
  • Appears anywhere on the homepage. Set the position using the Homepage Settings page once you have created the code snippet
  • 728 x 90 pixels
  • Code snippet = 'Home'

Screenshot_2020-12-10_at_11.41.34.png

 

Footer leaderboard

  • Single position
  • Appears at the bottom of all pages of the site, above any footer page navigation
  • 728 x 90 pixels
  • Code snippet = 'Footer'

Screenshot_2020-12-10_at_11.45.00.png

 

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
  • 728 x 90 pixels
  • Code snippet = 'Channel Top Leaderboard'

Screenshot_2020-12-10_at_11.49.30.png

 

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
  • 728 x 90 pixels
  • Code snippet = 'Channel Bottom Leaderboard'

Screenshot_2020-12-10_at_11.58.18.png

 

Content top leaderboard

  • One position per item of content
  • On posts, appears below the poster image and above the buttons for commenting etc.
    Screenshot_2020-12-10_at_12.01.50.png
  • On videos & documents, appears below the author’s byline
    Screenshot_2020-12-10_at_12.02.50.png
  • 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
  • 728 x 90 pixels
  • Code snippet = 'Content Top Leaderboard'

 

Content bottom leaderboard

  • One position per item of content
  • Appears on posts, videos and documents, at the end of the body content before the navigation and author profile
    Screenshot_2020-12-10_at_12.06.33.png
  • 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
  • 728 x 90 pixels
  • Code snippet = 'Content Bottom Leaderboard'

 

Content sidebar

  • Appears on posts, videos and documents, 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
  • Code snippet = 'Content Sidebar' 

Content_Sidebar.png

 

Dashboard MPUs

  • Requires 3 x MPUs to be added to fill the page
  • Can be used for other items, e.g. for embedding Twitter feeds, RSS feeds, polls etc.
  • Zapnito will set these up for you: supply the code for Google Tag Manager, Twitter etc as needed to support@zapnito.com
  • 300 x 250 pixels
  • Code snippet = 'Dashboard MPU'

Screenshot_2020-12-10_at_12.23.28.png

 

Channel MPU

  • One position per item of content; appears at the top right of the body section of posts & videos; does not appear on document content pages
  • 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
  • 300 x 250 pixels
  • Code snippet = 'Channel MPU'

Screenshot_2020-12-10_at_12.25.31.png

 

Content MPU

  • One position per channel; appears at the top right of the first row of content
  • 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
  • 300 x 250 pixels (or size as required)
  • Code snippet = 'Content MPU'

Screenshot_2020-12-10_at_12.38.27.png

 

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.

mceclip0.png

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.

mceclip1.png

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.

Related articles

Comments

2 comments

Date Votes
  • Jodi Hughes - AVIXA

    Re: Content Ads (top/bottom leaderboard and sidebar) -- what happens to the ad on previously posted content if we delete or change the code snippet to be a different ad? Scenario: we have a sponsor who has purchased Content ads for a 3-month period of time. So, for 3 months, their ads will appear on all posts, videos and documents. Once their sponsorship term is over and we delete the code snipped, does their ad remain on the content that was posted during those 3 months?

    0
  • Alex Thompson

    Hi Jodi - if you change the ad that is being served within the code snippet, the new ad will be applied to all content on the site. If you delete the code snippet when a sponsor's 3-month term is over, the ad will be removed from all content.

    Hopefully this clears things up for you. If you have any further questions just let me know!

    0

Please sign in to leave a comment.