Skip to main content

Get started with Sticky Banners

How to create and configure Sticky Banners in Joomag to embed display ads, CTAs, or navigation banners inside your publications using HTML snippets — including Google AdSense.

Written by Justina Markovic

Sticky Banners let you embed display ads, call-to-action and navigation banners, or any other content directly inside the Viewer's viewport using HTML snippets. The banners stay fixed in place while readers browse your publication, so your message stays visible without interrupting the reading experience.

You can configure Sticky Banners at two levels:

  • Collection level — applies to every publication in the collection.

  • Publication level — applies to a single publication.

If a publication has its own Sticky Banner settings, those take precedence. Otherwise, the collection-level settings apply.

Enable and configure Sticky Banners

  1. Open your publication (or collection) in the Magazine Wizard.

  2. From the Actions menu, select Viewer Settings.

  4. Scroll down to the Sticky Banners section.

  5. Toggle on Enable Sticky Banners.
    ​

  6. Add your HTML snippet to the relevant slot(s):

    1. Desktop (right side slot) — recommended size 160x600px. Shown when the Viewer is at least 1120x600px.

    2. Desktop (bottom slot) — recommended size 728x90px. Shown when the Viewer is at least 960x612px.

    3. Mobile (top slot) — recommended size 320x50px.

  7. Changes save automatically as you enter them.

Placing Google AdSense and other ad code

Because each slot accepts raw HTML, you can place ads from Google AdSense or any other ad network that provides an embed snippet. Simply paste the code the network gives you into the matching slot.

For example, a Google AdSense unit uses a snippet like this:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX" crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Tips for ad code:

  • Match the ad unit to the slot size. Create a 160x600 unit for the desktop right slot, a 728x90 unit for the desktop bottom slot, and a 320x50 unit for the mobile top slot.

  • Other networks work the same way. Media.net, Amazon Publisher Services, or any direct-sold display ad — if you have an HTML/JavaScript tag, it can go in a slot.

  • Static banners are also supported. A simple link wrapping an image works well for house ads or CTAs:

<a href="https://your-landing-page.com" target="_blank">
  <img src="https://your-image-url.com/banner.png" width="728" height="90" alt="Your promotion">
</a>

  • Test after saving. Open the Viewer at the relevant screen size to confirm the banner renders and clicks through correctly.

Tracking performance

Banner impressions and click-through rates are available in your publication's Analytics dashboard. If you're serving ads through AdSense or another network, you can also track performance in that platform's own reporting.

Did this answer your question?