Container Conflicts

Tip

Quick Fix: Add a simple JavaScript listener to your page that hides conflicting ad containers when HighVibes ads load. Takes 5 minutes to implement and prevents layout issues.

Anchor Ad Container Conflicts

The Problem

HighVibes Media ads are designed to render outside of standard ad containers to provide optimal user experience. However, this can create visual conflicts with Google’s anchor ad containers or other sticky ad containers.

What you’ll see:

• HighVibes ads work fine, but empty ad containers stay visible underneath
• Overlapping elements that break your page layout

Common with:

• Google Ad Manager anchor ads
• Prebid.js setups
• Any sticky/fixed ad containers

PostMessage Solution

The recommended solution is to implement a PostMessage listener that responds to HighVibes Media ad events and manages conflicting containers from your page’s context.

Simple 3-step process:

1. HighVibes ad loads on your page
2. Ad sends a message: “Hey, I’m here!”
3. Your page responds by hiding conflicting containers

Caution

Viewability Warning: Only hide containers AFTER receiving the HVM_CREATIVE_LOAD message. Hiding containers too early (before the ad loads) will prevent viewability tracking, significantly reducing your ad performance metrics and revenue potential. We use visibility: hidden with overflow: visible to preserve ad performance tracking.

This prevents visual conflicts automatically.

PostMessage API:

Your page will receive these messages from HighVibes ads:

Message Type	When it happens	Your action
HVM_CREATIVE_LOAD	Ad loads successfully	Hide conflicting containers
HVM_CREATIVE_CLOSE	User closes the ad	Restore your containers

Optional: You can also send HVM_PUBLISHER_CLOSE to close the ad from your own buttons.

1. Add the PostMessage listener to your main page

   Add this code to your main page JavaScript (not inside ad containers or iframes):

   Note

   Example Code Only: This shows the PostMessage communication pattern. You must adapt this code to work with your specific website setup. Every publisher has different ways of implementing sticky banners and containers.

   // Listen for HighVibes ad events
   window.addEventListener('message', event => {
      const { type, data } = event.data || {};
   
      // Optional: Verify message is from HighVibes
      if (data?.src && data.src !== 'HighVibes') {
          return;
      }
   
      if (type === 'HVM_CREATIVE_LOAD') {
          console.log('HighVibes ad loaded - hiding conflicts');
   
          // IMPORTANT: Only hide containers AFTER receiving this message
          // This ensures viewability tracking works correctly
   
          // EXAMPLE: Replace '.anchor-ad' with your actual container selector
          // This could be '#sticky-banner', '.gam-anchor', etc.
          const anchorAd = document.querySelector('.anchor-ad');
          if (anchorAd) {
              // Store original styles for restoration
              anchorAd.dataset.originalVisibility = anchorAd.style.visibility || '';
              anchorAd.dataset.originalHeight = anchorAd.style.height || '';
              anchorAd.dataset.originalOverflow = anchorAd.style.overflow || '';
   
              // Hide visually while keeping element "visible" for tracking
              anchorAd.style.visibility = 'hidden';
              anchorAd.style.height = '1px';
              anchorAd.style.overflow = 'visible';
          }
   
      } else if (type === 'HVM_CREATIVE_CLOSE') {
          console.log('HighVibes ad closed - restoring containers');
   
          // EXAMPLE: Use the same selector as above
          const anchorAd = document.querySelector('.anchor-ad');
          if (anchorAd) {
              anchorAd.style.visibility = anchorAd.dataset.originalVisibility || '';
              anchorAd.style.height = anchorAd.dataset.originalHeight || '';
              anchorAd.style.overflow = anchorAd.dataset.originalOverflow || '';
          }
      }
   });

2. Test it works

   After implementing the code:

   • Load a page with HighVibes ads
   • Verify timing: Conflicting containers should remain visible until you see “HighVibes ad loaded” in browser console
   • Confirm containers disappear only AFTER the console message
   • Test that containers return when ads are closed

   Critical: If containers disappear before the console message, viewability tracking will be broken.

   Quick test: Run this in your browser console to simulate the message:

   // Test your implementation
   window.postMessage({
      type: 'HVM_CREATIVE_LOAD',
      data: { src: 'HighVibes' }
   }, '*');
   
   // Check if your containers are hidden

Optional: Publisher-Initiated Close Advanced

If you want your own close buttons to also close the HighVibes ad:

// Send close message to HighVibes ad
function closeHighVibesAd() {
  window.top.postMessage({
      type: 'HVM_PUBLISHER_CLOSE',
      data: { src: 'Publisher' }
  }, '*');

  // Also hide your own containers
  document.querySelector('.your-banner')?.remove();
}

// Attach to your close button
document.querySelector('#your-close-btn')?.addEventListener('click', closeHighVibesAd);