> ## Documentation Index
> Fetch the complete documentation index at: https://docs.topsort.com/llms.txt
> Use this file to discover all available pages before exploring further.

# New ad formats

> We are excited to announce the launch of new ad formats on Topsort. These formats are designed to help brands and agencies create more engaging and effective advertising campaigns across the Topsort Ad Network.

export const ChangelogActions = () => {
  return <>
      <style>{`
        .changelog-actions {
          display: flex;
          justify-content: center;
          gap: 12px;
          margin-top: 2rem;
          padding-top: 1.5rem;
          border-top: 1px solid #e5e7eb;
        }
        
        [data-theme="dark"] .changelog-actions {
          border-top-color: #374151;
        }
        
        .changelog-btn {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 8px 16px;
          border-radius: 9999px;
          border: 1px solid #d1d5db;
          background: transparent;
          color: #6b7280;
          font-size: 14px;
          cursor: pointer;
          transition: all 0.2s ease;
        }
        
        .changelog-btn:hover {
          border-color: #9ca3af;
          background: #f9fafb;
        }
        
        [data-theme="dark"] .changelog-btn {
          border-color: #4b5563;
          color: #9ca3af;
        }
        
        [data-theme="dark"] .changelog-btn:hover {
          border-color: #6b7280;
          background: #1f2937;
        }
      `}</style>
      <div className="changelog-actions">
        <button className="changelog-btn" onClick={() => {
    const btn = event.target.closest("button");
    btn.innerHTML = "❤️ Like";
    btn.style.borderColor = "#ec4899";
  }}>
          🤍 Like
        </button>
        <button className="changelog-btn" onClick={() => {
    const btn = event.target.closest("button");
    navigator.clipboard.writeText(window.location.href);
    const originalContent = btn.innerHTML;
    btn.innerHTML = "✓ Copied";
    btn.style.borderColor = "#22c55e";
    btn.style.color = "#22c55e";
    setTimeout(() => {
      btn.innerHTML = originalContent;
      btn.style.borderColor = "";
      btn.style.color = "";
    }, 2000);
  }}>
          ↗ Share
        </button>
      </div>
    </>;
};

<div style={{ display: "flex", gap: "8px", flexWrap: "wrap", marginBottom: "16px" }}>
  <Badge color="gray" size="sm" icon="calendar">October 3, 2024</Badge>
  <Badge color="blue" size="sm" icon="rectangle-ad">Ad Platform</Badge>
  <Badge color="green" size="sm" icon="sparkles">New Feature</Badge>
</div>

# Video ads

We've introduced a new ad format: Video Ads, designed to enhance the brand and product experience for advertisers. This new format aims to boost visibility and customer engagement by allowing products to be demonstrated in action.

## Key benefits

* Demonstrates products in action
* Enhances user engagement
* Conveys brand messages effectively
* Boosts visibility and brand awareness
* Ensures feature parity

## How it works

Campaign creation mirrors banner ads: upload video, set triggers, configure campaign details.

<Frame>
  <img src="https://mintcdn.com/topsort/kKtg9wT2hJn2uG4V/images/changelog/video-ads-step-1.webp?fit=max&auto=format&n=kKtg9wT2hJn2uG4V&q=85&s=e2f8bca278d5ef9e2538760e70830a7e" alt="step 1" width="1654" height="994" data-path="images/changelog/video-ads-step-1.webp" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/topsort/kKtg9wT2hJn2uG4V/images/changelog/video-ads-step-2.webp?fit=max&auto=format&n=kKtg9wT2hJn2uG4V&q=85&s=1b37defb3ad38b0271eb7706f157a4ec" alt="step 2" width="1651" height="994" data-path="images/changelog/video-ads-step-2.webp" />
</Frame>

* Videos must be 6 to 20 seconds long, MP4 or MOV format, with a max size of 200MB.
* Marketplaces send slot ID and optional details during auction requests, and receive the video URL in the response.

### Integration Options:

* Cloudflare Stream Player (simple iframe embed).
* Using your own HLS/DASH player for greater compatibility.

### Reporting:

Using banners.js, Topsort tracks video impressions and clicks within the marketplace. An impression is counted when a video is watched for at least 5 seconds. According to IAB standards, a viewable impression occurs when 50% of the ad's pixels are visible for at least 2 seconds. Marketplaces can also control how to report impressions and clicks.

# Support external links

We've enabled External Links for banner campaigns, allowing marketplace admins to use external URLs for banner assets.

## Key benefits

* Flexibility to use externally hosted assets without duplicating them.
* Seamless integration with Asset Management Systems.
* Direct use of CDN-hosted assets.

## How it works

Admins can add multiple external asset URLs during the banner campaign creation process.

<Frame>
  <img src="https://mintcdn.com/topsort/M3N4mDiL0uw6VdTk/images/changelog/external-url.webp?fit=max&auto=format&n=M3N4mDiL0uw6VdTk&q=85&s=6a1951fd18dbb4bbbadded64fe6eeff5" alt="external url" width="1390" height="988" data-path="images/changelog/external-url.webp" />
</Frame>

Supported formats include: jpg, jpeg, png, webp, avif, apng, gif, html, mp4, and quicktime.

# Html and gif banners

We've expanded the types of files that can be used in banner campaigns to include HTML and GIF, offering greater creative personalization.

## Key Benefits

* Flexibility to support more file types, such as HTML and GIF.
* Increased opportunities for personalized ads and higher conversion rates.

## How It Works

Admins can upload multiple supported file types during the banner campaign creation process.

These updates offer more dynamic, customizable options for campaigns, allowing advertisers and admins to better engage their audience and maximize the impact of their ads.

<ChangelogActions />