ConvertKit (Kit) Integration

ConvertKit (recently rebranded to "Kit") supports adding HTML to emails, making it possible to integrate BannerTrackr tracking.

Prerequisites

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

Understanding Kit's Template Types

Kit has three types of email templates with different HTML capabilities:

For BannerTrackr integration, you can work with any type.

Method 1: Smart Image (Recommended)

Use a single URL for image hosting, impression tracking, and click tracking.

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 (sponsor's landing page)
5. Copy your Smart Image URL: https://bannertrackr.com/api/track/img/YOUR_PIXEL_ID

Step 2: Add to Kit Email

Using the Visual Editor

1. Open your email in Kit
2. Click where you want to add the banner
3. Add an Image block
4. For the image source, use your Smart Image URL
5. Add a link to the image using the same Smart Image URL

Alternatively, if your Kit plan supports HTML:

1. Click + to add a content block
2. Select HTML (or use the HTML button in the toolbar)
3. Paste this code:

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

4. Replace YOUR_PIXEL_ID with your actual Pixel ID

Method 2: Broadcast Emails

For one-time broadcast emails with sponsors:

Full Sponsor Block with Table Layout

Email clients render tables more consistently. Use this for better compatibility:

<table width="100%" cellpadding="0" cellspacing="0" style="margin: 20px 0;">
  <tr>
    <td align="center">
      <p style="font-size: 11px; color: #888; margin: 0 0 8px 0;">SPONSORED</p>
      <a href="https://bannertrackr.com/api/track/img/YOUR_PIXEL_ID" target="_blank">
        <img
          src="https://bannertrackr.com/api/track/img/YOUR_PIXEL_ID"
          alt="Sponsor Name"
          width="600"
          style="max-width: 100%; height: auto; display: block;"
        />
      </a>
    </td>
  </tr>
</table>

Method 3: Automated Sequences

For sponsored content in automated email sequences:

Step 1: Create the Placement

Set up a placement in BannerTrackr for your sequence sponsor.

Step 2: Add to Sequence Email

1. Edit the email in your sequence
2. Add your HTML or image block
3. Use the Smart Image code

Using Kit's Personalization

You can combine BannerTrackr with Kit's Liquid personalization tags:

<p style="font-size: 12px; color: #666;">
  Hey {{ subscriber.first_name | default: "there" }}, check out our sponsor:
</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: 100%;" />
</a>

Template Snippets

Minimal 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" style="max-width: 100%;" />
</a>

With Sponsor Label

<div style="text-align: center; padding: 15px 0;">
  <span style="font-size: 10px; color: #999; text-transform: uppercase;">Sponsored</span>
  <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>

With Background

<div style="background: #f5f5f5; padding: 20px; text-align: center; margin: 20px 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: 100%;" />
  </a>
</div>

Kit Landing Pages

You can also track banners on Kit landing pages:

1. Edit your landing page
2. Add a Custom HTML block
3. Paste the Smart Image code:

<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%; height: auto;"
  />
</a>

Important Notes

CSS Preview Behavior

Kit's email editor doesn't load custom CSS the same way as when the email is sent. You'll only see full CSS styling in the email preview or when the email is actually sent, not in the editor itself.

Required Template Variables

If you're creating a custom HTML template, Kit requires certain variables:

• {{ message_content }} — Where email content goes
• {{ unsubscribe_link }} or {{ unsubscribe_url }} — Required unsubscribe link
• {{ address }} — Your physical address

For regular emails with HTML blocks, you don't need to worry about these.

Troubleshooting

HTML not rendering?

1. Make sure you're in HTML mode when pasting code
2. Check for unclosed tags
3. Preview the email before sending

Banner too large on mobile?

Add responsive styles:

<img
  src="https://bannertrackr.com/api/track/img/YOUR_PIXEL_ID"
  alt="Sponsor"
  style="max-width: 100%; width: 600px; height: auto;"
/>

The max-width: 100% ensures the image scales down on smaller screens.

Images blocked in preview?

Some email clients block images by default. This is normal — your actual subscribers who enable images will be tracked.

Next Steps

• UTM Tracking — Add campaign tracking to your sponsor links
• Advertiser Portal — Share real-time stats with sponsors
• Alerts — Get notified when campaigns hit milestones