Container Conflicts

Solutions for layout conflicts and container management when integrating HighVibes Media ads with existing ad setups.

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.

When this occurs:

• Your HighVibes ad displays correctly but empty Google containers appears behind
• Anchor ads or sticky containers remain visible when they should be hidden
• Z-index conflicts create overlapping elements
• Visual layout appears broken

Common scenarios:

• Google Ad Manager with anchor ad units
• Prebid.js winners rendering in Google containers
• Sticky/fixed positioning conflicts

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.

How it works:

1. HighVibes ad loads - When our ad successfully renders on your page
2. Message is fired - The ad automatically sends a HVM_CREATIVE_LOADED PostMessage
3. Your listener responds - Your page receives the message and can hide conflicting containers
4. Clean layout - Anchor ads and other containers are hidden, preventing visual conflicts

HighVibes Media PostMessage API:

Message Type	Purpose	Data Payload
HVM_CREATIVE_LOADED	Ad successfully loaded	{}

1. Add the PostMessage listener to your page

   Add this code to your main page JavaScript, outside of any ad containers:

   Note

   Important: This is a conceptual example. Publishers must customize the container selectors and logic to match their specific page structure and requirements.

   // Listen for HighVibes Media ad messages
   window.addEventListener('message', event => {
     const { type, data } = event.data || {};
   
     // Only handle HighVibes messages
     if (type !== 'HVM_CREATIVE_LOADED') {
         return;
     }
   
     console.log('HighVibes ad loaded successfully');
     // Publisher can implement custom logic here
     // Example:
   
     // Close conflicting containers (customize for your site)
     document.querySelectorAll('[data-anchor-status="displayed"]')
         .forEach(el => el.style.display = 'none');
   
     // Hide other sticky/anchor containers as needed
     document.querySelectorAll('.google-anchor-ad, .sticky-ad-container')
         .forEach(el => el.style.display = 'none');
   });

2. Test the implementation

   • Load a page with HighVibes ads
   • Verify anchor containers close when HighVibes ads appear
   • Check browser console for PostMessage events
   • Test container restoration when ads are closed

   Use this test code to verify your PostMessage listener is working:

   // Test your listener with a simulated HighVibes message
   window.postMessage({
      type: 'HVM_CREATIVE_LOADED',
      data: {}
   }, '*');
   
   // Check console for your listener response
   // Verify containers are hidden as expected

Implementation Notes

Best practices:

• Test thoroughly across different devices and page layouts
• Monitor performance - DOM manipulation should be minimal
• Graceful fallbacks - Handle cases where containers don’t exist
• Preserve user experience - Only hide containers when necessary

Development tips:

• Use browser developer tools to inspect container structures
• Test with different ad configurations and placements
• Verify container restoration works correctly
• Check for any JavaScript errors in console