bannertrackrdocs

Website Integration

Track banner ads on any website with BannerTrackr

Website Integration

This guide covers adding BannerTrackr to any website, whether it's a blog, directory, or web application.

Prerequisites

  • A BannerTrackr account with at least one placement created
  • Your Pixel ID from the placement
  • Access to your website's HTML or CMS

Basic Implementation

HTML Websites

Add this code where you want to display the banner:

<div class="ad-placement">
  <a href="https://bannertrackr.com/api/track/click/YOUR_PIXEL_ID">
    <img
      src="your-banner-image.png"
      alt="Sponsor Name"
      width="728"
      height="90"
    />
  </a>
  <!-- Tracking pixel -->
  <img
    src="https://bannertrackr.com/api/track/px/YOUR_PIXEL_ID"
    width="1"
    height="1"
    alt=""
    style="position: absolute; visibility: hidden;"
  />
</div>

Using Smart Image

If you've uploaded your banner to BannerTrackr, use the Smart Image URL:

<a href="https://bannertrackr.com/api/track/img/YOUR_PIXEL_ID">
  <img
    src="https://bannertrackr.com/api/track/img/YOUR_PIXEL_ID"
    alt="Sponsor Name"
    loading="lazy"
  />
</a>

Framework Examples

React / Next.js

function SponsorBanner({ pixelId }) {
  const trackingUrl = `https://bannertrackr.com/api/track/img/${pixelId}`;

  return (
    <div className="sponsor-banner">
      <a href={trackingUrl} target="_blank" rel="noopener noreferrer">
        <img
          src={trackingUrl}
          alt="Sponsored"
          loading="lazy"
        />
      </a>
    </div>
  );
}

// Usage
<SponsorBanner pixelId="YOUR_PIXEL_ID" />

Vue.js

<template>
  <div class="sponsor-banner">
    <a :href="trackingUrl" target="_blank" rel="noopener noreferrer">
      <img :src="trackingUrl" alt="Sponsored" loading="lazy" />
    </a>
  </div>
</template>

<script>
export default {
  props: ['pixelId'],
  computed: {
    trackingUrl() {
      return `https://bannertrackr.com/api/track/img/${this.pixelId}`;
    }
  }
}
</script>

WordPress

Add to your theme's functions.php:

function bannertrackr_shortcode($atts) {
    $atts = shortcode_atts(array(
        'pixel_id' => '',
        'alt' => 'Sponsored'
    ), $atts);

    $url = 'https://bannertrackr.com/api/track/img/' . esc_attr($atts['pixel_id']);

    return sprintf(
        '<div class="sponsor-banner"><a href="%1$s"><img src="%1$s" alt="%2$s" loading="lazy"></a></div>',
        $url,
        esc_attr($atts['alt'])
    );
}
add_shortcode('bannertrackr', 'bannertrackr_shortcode');

Then use in posts/pages:

[bannertrackr pixel_id="YOUR_PIXEL_ID" alt="Sponsor Name"]

Common Placements

Header Banner (Leaderboard)

<header class="site-header">
  <nav><!-- Your navigation --></nav>

  <div class="header-ad" style="text-align: center; padding: 10px 0;">
    <a href="https://bannertrackr.com/api/track/img/YOUR_PIXEL_ID">
      <img
        src="https://bannertrackr.com/api/track/img/YOUR_PIXEL_ID"
        alt="Sponsor"
        style="max-width: 728px; width: 100%;"
      />
    </a>
  </div>
</header>
<aside class="sidebar">
  <div class="sidebar-ad">
    <small>Sponsored</small>
    <a href="https://bannertrackr.com/api/track/img/YOUR_PIXEL_ID">
      <img
        src="https://bannertrackr.com/api/track/img/YOUR_PIXEL_ID"
        alt="Sponsor"
        style="max-width: 300px;"
      />
    </a>
  </div>
</aside>

In-Content Banner

<article>
  <p>Your article content...</p>

  <div class="in-article-ad" style="margin: 2em 0; text-align: center;">
    <a href="https://bannertrackr.com/api/track/img/YOUR_PIXEL_ID">
      <img
        src="https://bannertrackr.com/api/track/img/YOUR_PIXEL_ID"
        alt="Sponsor"
        style="max-width: 100%;"
      />
    </a>
  </div>

  <p>More article content...</p>
</article>
<footer>
  <div class="footer-ad" style="text-align: center; padding: 20px;">
    <a href="https://bannertrackr.com/api/track/img/YOUR_PIXEL_ID">
      <img
        src="https://bannertrackr.com/api/track/img/YOUR_PIXEL_ID"
        alt="Sponsor"
        style="max-width: 728px; width: 100%;"
      />
    </a>
  </div>
</footer>

Standard Banner Sizes

NameSizeBest For
Leaderboard728 x 90Header, above content
Medium Rectangle300 x 250Sidebar, in-content
Wide Skyscraper160 x 600Sidebar
Large Rectangle336 x 280In-content
Billboard970 x 250Header
Mobile Banner320 x 50Mobile sites

Responsive Banners

Make banners responsive with CSS:

<style>
  .responsive-ad {
    width: 100%;
    max-width: 728px;
    margin: 0 auto;
  }
  .responsive-ad img {
    width: 100%;
    height: auto;
  }
</style>

<div class="responsive-ad">
  <a href="https://bannertrackr.com/api/track/img/YOUR_PIXEL_ID">
    <img src="https://bannertrackr.com/api/track/img/YOUR_PIXEL_ID" alt="Sponsor" />
  </a>
</div>

Hide on Mobile

@media (max-width: 768px) {
  .desktop-only-ad {
    display: none;
  }
}

Different Sizes by Screen

<picture class="responsive-ad">
  <source
    media="(min-width: 768px)"
    srcset="https://bannertrackr.com/api/track/img/DESKTOP_PIXEL_ID"
  >
  <a href="https://bannertrackr.com/api/track/img/MOBILE_PIXEL_ID">
    <img
      src="https://bannertrackr.com/api/track/img/MOBILE_PIXEL_ID"
      alt="Sponsor"
    />
  </a>
</picture>

Lazy Loading

For better page performance, use lazy loading:

<a href="https://bannertrackr.com/api/track/img/YOUR_PIXEL_ID">
  <img
    src="https://bannertrackr.com/api/track/img/YOUR_PIXEL_ID"
    alt="Sponsor"
    loading="lazy"
  />
</a>

Note: Lazy-loaded images only trigger impressions when they enter the viewport, giving you more accurate "actually seen" counts.

Multiple Placements

If you have multiple ad spots on a page, create a separate placement for each:

<!-- Header placement -->
<div class="header-ad">
  <a href="https://bannertrackr.com/api/track/img/HEADER_PIXEL_ID">
    <img src="https://bannertrackr.com/api/track/img/HEADER_PIXEL_ID" alt="Header Sponsor" />
  </a>
</div>

<!-- Sidebar placement -->
<div class="sidebar-ad">
  <a href="https://bannertrackr.com/api/track/img/SIDEBAR_PIXEL_ID">
    <img src="https://bannertrackr.com/api/track/img/SIDEBAR_PIXEL_ID" alt="Sidebar Sponsor" />
  </a>
</div>

Troubleshooting

Ad blockers

Some ad blockers may block tracking pixels. BannerTrackr works with most blockers, but:

  • Use descriptive class names (avoid "ad", "banner", "sponsor")
  • Consider inline styles instead of classes

CORS issues

BannerTrackr supports CORS. If you see errors:

  1. Check the URL is exactly correct
  2. Ensure HTTPS is used

Slow loading

  • Use lazy loading (loading="lazy")
  • Optimize banner image sizes before upload
  • BannerTrackr uses a CDN for fast delivery

Next Steps

Ghost Integration

Step-by-step guide to tracking banner ads in Ghost newsletters and websites

UTM Tracking

Automatically add UTM parameters to track conversions in Google Analytics

On this page

Website IntegrationPrerequisitesBasic ImplementationHTML WebsitesUsing Smart ImageFramework ExamplesReact / Next.jsVue.jsWordPressCommon PlacementsHeader Banner (Leaderboard)Sidebar BannerIn-Content BannerFooter BannerStandard Banner SizesResponsive BannersHide on MobileDifferent Sizes by ScreenLazy LoadingMultiple PlacementsTroubleshootingAd blockersCORS issuesSlow loadingNext Steps