如何为小企业通过DFP实现带可点击Overlay和Logo的视频广告？

Great question! Let’s walk through exactly how to set up both your 320x250 overlay ad and interstitial video ad with clickable logo in Google Ad Manager (GAM, formerly DFP for Small Business). The core goal is to isolate clickability to your intended elements while disabling default video clickthroughs.

1. 320x250 Ad Inventory: Clickable Overlay (Separate Click Tag & VAST Tag) #

Step 1: Prepare Your Assets #

• VAST Video: Host your video ad and get its VAST tag URL.
• Overlay: Design your clickable overlay (can be full 320x250 or a specific region) and note your Click Tag URL.

Step 2: Build a Custom HTML5 Creative #

In GAM, navigate to Creatives > New Creative > HTML5 and use this template to embed your video and overlay. The key here is to position the overlay on top of the video and disable the video’s default click behavior:

<div style="position: relative; width: 320px; height: 250px; overflow: hidden;">
  <!-- VAST Video Embed -->
  <video 
    id="adVideo" 
    width="320" 
    height="250" 
    autoplay 
    muted 
    playsinline 
    controls="false"
    style="position: absolute; top: 0; left: 0;"
  >
    <source src="YOUR_VAST_TAG_URL" type="application/x-mpegURL">
  </video>

  <!-- Clickable Overlay -->
  <div 
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer;"
    onclick="window.open('YOUR_CLICK_TAG_URL', '_blank')"
  ></div>
</div>

<script>
  // Disable video clickthrough completely
  document.getElementById('adVideo').addEventListener('click', function(e) {
    e.stopPropagation();
    e.preventDefault();
  });
</script>

Step 3: Configure & Assign the Creative #

• Set the creative size to 320x250.
• Under Click Tracking, you can optionally add your Click Tag as a tracked click for reporting, but the overlay’s onclick will handle the actual redirect.
• Assign this creative to your 320x250 ad unit.

2. Interstitial Video Inventory: Clickable Logo (Separate Logo Tag & VAST Tag) #

Step 1: Prepare Your Assets #

• VAST Video: Get your interstitial video’s VAST tag URL.
• Logo: Design your clickable logo (with transparent background recommended) and note your Logo Tag URL.

Step 2: Build a Fullscreen HTML5 Creative #

Create a new HTML5 creative for your interstitial ad unit. This template will embed the fullscreen video and position the clickable logo overlay:

<div style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #000;">
  <!-- Fullscreen VAST Video -->
  <video 
    id="interstitialVideo" 
    width="100%" 
    height="100%" 
    autoplay 
    muted 
    playsinline 
    controls="false"
  >
    <source src="YOUR_VAST_TAG_URL" type="application/x-mpegURL">
  </video>

  <!-- Clickable Logo (adjust position as needed) -->
  <img 
    src="YOUR_LOGO_IMAGE_URL" 
    style="position: absolute; top: 20px; right: 20px; width: 80px; height: auto; cursor: pointer;"
    onclick="window.open('YOUR_LOGO_TAG_URL', '_blank')"
  >
</div>

<script>
  // Disable video clickthrough
  document.getElementById('interstitialVideo').addEventListener('click', function(e) {
    e.stopPropagation();
    e.preventDefault();
  });

  // Optional: Auto-close ad when video finishes
  document.getElementById('interstitialVideo').addEventListener('ended', function() {
    // Add your ad close logic here (e.g., trigger parent container close)
    window.top.postMessage('closeAd', '*');
  });
</script>

Step 3: Set Up the Interstitial Ad Unit #

• Create an interstitial ad unit in GAM (size: 1x1 or use responsive settings for fullscreen).
• Assign your HTML5 creative to this ad unit.
• Ensure the ad unit’s inventory type is set to Interstitial.

Key Notes for Success #

• Test Thoroughly: Always test in a staging environment to confirm only the overlay/logo is clickable, and the video doesn’t trigger unintended redirects.
• Player Compatibility: If using a third-party video player (instead of the native HTML5 video tag), check its documentation for settings to disable default clickthroughs.
• Reporting: Use GAM’s click tracking features to monitor clicks on your overlay/logo separately if needed.

内容的提问来源于stack exchange，提问作者Akshay Sethi