Ghost Integration

Ghost has excellent HTML support through HTML cards in the editor, making it one of the best platforms for BannerTrackr integration. The same HTML works in both the web post and email newsletter.

Prerequisites

• A BannerTrackr account with at least one placement created
• Your Pixel ID from the placement
• The sponsor's banner image

Ghost Newsletter Emails

Ghost sends posts directly to subscribers as emails. Here's how to add tracked sponsor banners.

Method 1: Smart Image (Recommended)

Use a single URL for image hosting, impressions, and clicks.

Step 1: Set Up Your Placement

1. Go to your BannerTrackr dashboard
2. Create or edit a placement
3. Upload the sponsor's banner image
4. Set the destination URL
5. Copy your Smart Image URL: https://bannertrackr.com/api/track/img/YOUR_PIXEL_ID

Step 2: Add HTML Card in Ghost

1. Open your Ghost editor
2. On a new line, type /html and press Enter (or click + and select HTML)
3. Paste this code:

<div style="text-align: center; margin: 2em 0;">
  <a href="https://bannertrackr.com/api/track/img/YOUR_PIXEL_ID">
    <img
      src="https://bannertrackr.com/api/track/img/YOUR_PIXEL_ID"
      alt="Sponsored by [Sponsor Name]"
      style="max-width: 100%; height: auto;"
    />
  </a>
</div>

4. Replace YOUR_PIXEL_ID with your actual Pixel ID

Method 2: Using Ghost's Image Card + Tracking Pixel

If you prefer Ghost's built-in image cards:

1. Add an image card with your banner
2. Add an HTML card right below with the tracking pixel:

<img
  src="https://bannertrackr.com/api/track/px/YOUR_PIXEL_ID"
  width="1"
  height="1"
  alt=""
  style="opacity: 0;"
/>

Note: Ghost's image cards don't support custom link URLs, so this method only tracks impressions, not clicks. For click tracking, use an HTML card with the full linked image.

Ghost Websites

For tracking banners on your Ghost website (not just in email newsletters).

Theme Integration

Add tracking to your Ghost theme for persistent ad placements.

In Theme Files (.hbs)

Edit your theme's Handlebars files (e.g., post.hbs, index.hbs):

<div class="sponsor-banner">
  <a href="https://bannertrackr.com/api/track/img/YOUR_PIXEL_ID">
    <img
      src="https://bannertrackr.com/api/track/img/YOUR_PIXEL_ID"
      alt="Sponsored"
      loading="lazy"
    />
  </a>
</div>

Using Code Injection

For quick additions without editing theme files:

1. Go to Settings → Code Injection
2. Add to Site Footer:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const postContent = document.querySelector('.post-content');
    if (postContent && postContent.children.length > 2) {
      const sponsorBanner = document.createElement('div');
      sponsorBanner.innerHTML = `
        <div style="text-align: center; margin: 2em 0; padding: 1em; background: #f9f9f9;">
          <small style="color: #888;">SPONSORED</small><br><br>
          <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>
      `;
      postContent.insertBefore(sponsorBanner, postContent.children[2]);
    }
  });
</script>

This inserts a sponsor banner after the second paragraph of each post.

Ghost Members Integration

Show different ads to free vs paid members:

Using Handlebars Conditionals

{{#if @member.paid}}
  {{!-- No ads for paid members --}}
{{else}}
  <div class="sponsor-banner">
    <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>
{{/if}}

Using HTML Card Visibility

In the Ghost editor, HTML cards have visibility settings:

1. Add your HTML card with sponsor content
2. Click the 👁️ icon in the card toolbar
3. Choose who sees this content: Public, Free members, or Paid members

Email-Specific Content

Ghost has special card types for email-only content:

Email Content Card

Add content that only appears in the email (not on the web version):

1. Type /email in the editor
2. Add your sponsor message

Email Call-to-Action Card

Add buttons that only appear in emails:

1. Type /email-cta in the editor
2. Customize the button

These can complement your BannerTrackr HTML cards.

Styling Examples

Newsletter Style (Table Layout)

For better email client compatibility:

<table width="100%" cellpadding="0" cellspacing="0" style="margin: 30px 0;">
  <tr>
    <td style="text-align: center;">
      <p style="font-size: 11px; color: #888; margin-bottom: 10px;">SPONSORED</p>
      <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: 600px; width: 100%;"
        />
      </a>
    </td>
  </tr>
</table>

Card Style (Website)

For a polished website look:

<div style="border: 1px solid #eee; border-radius: 8px; padding: 20px; margin: 20px 0; text-align: center;">
  <span style="font-size: 10px; color: #aaa; text-transform: uppercase;">Sponsored</span>
  <a href="https://bannertrackr.com/api/track/img/YOUR_PIXEL_ID" style="display: block; margin-top: 15px;">
    <img
      src="https://bannertrackr.com/api/track/img/YOUR_PIXEL_ID"
      alt="Sponsor"
      style="max-width: 100%; border-radius: 4px;"
    />
  </a>
</div>

Important Notes

Newsletter vs Web Tracking

Ghost sends the same content to:

• Email subscribers (newsletter)
• Your website (published post)

BannerTrackr tracks both. You'll see impressions from both sources in your stats. If you want to track them separately, create two placements.

Email Rendering Best Practices

Ghost uses its own email renderer. For best compatibility:

• Use inline CSS (not external stylesheets)
• Stick to basic HTML elements
• Avoid JavaScript in email content (it won't run)
• Use table layouts for complex structures

Recommended Banner Sizes

Troubleshooting

Banner not appearing in emails?

1. Make sure you're using an HTML card, not a markdown code block
2. Check the HTML is valid (no unclosed tags)
3. Send a test email to yourself
4. Verify the placement isn't paused

Low newsletter impression counts?

• Some subscribers have images disabled by default
• Apple Mail Privacy Protection may pre-fetch images
• Check if the placement is paused or over its limit

Tracking works on web but not email?

Try simplifying the HTML:

1. Remove complex CSS
2. Use basic inline styles
3. Test with a minimal image tag first

Next Steps

• UTM Tracking — Add tracking parameters to sponsor links
• Advertiser Portal — Give sponsors their own stats dashboard
• Reports — Generate professional PDF reports