Native Blueprints and Media Queries

LiveIntent’s Native Ad Blueprints brings a fluid and flexible approach to native email inventory, allowing you to define the appearance of your native ad slots to ensure a seamless reading experience. Through a one-time tag placement, the burden of hardcoding is eliminated and native ad serving becomes automated helping you to save time. 

Before setting up native inventory in your email newsletters there are a few key elements of the Native Ad Blueprints solution to understand:

  • Blueprint: sets the styling and appearance of the native ad slot(s)
  • Media query: ensures responsiveness for a native ad slot

Blueprints

To ensure native email advertisements match a publisher’s defined layout, Native Ad Blueprints utilizes a mechanism called a blueprint. The blueprint is a LiveIntent-managed, backend tool that leverages existing newsletter template HTML to define a native ad slot’s appearance. Blueprints can be built to match template styling exactly or a publisher’s existing native concept. Once created, blueprints are linked to the Native LiveTag to enable ad serving. 

To initiate a blueprint build please contact your LiveIntent account manager. They will provide you with the Blueprint Style Sheet to confirm the desired HTML specifications for your native ad slot. LiveIntent will then use these specifications to build your blueprint. 

IMPORTANT: When providing details for your blueprint via the Blueprint Style Sheet, it is important to know that LiveIntent serves native creatives (as well as display creatives) as a flattened image rather than HTML. 

Due to this, max-widths and max-heights for desktop and mobile layouts are required.  These parameters, in conjunction with the media query, allow the native ad slot to be responsive. It is important to provide these distinctions as ‘100%’ and ‘auto’ will not work for images.

Media Query

As mentioned, our native solution sends a flattened image rather than HTML when serving a native creative. Because of this, our native ads do not dynamically change sizing based on text lengths. Instead, our native ads utilize a media query in order to be responsive and render the appropriate design for desktop and mobile layouts.

IMPORTANT: In order to ensure responsiveness, make sure the media query is added to the <head> </head> section of your newsletter HTML. You can easily locate this section by searching for your newsletter’s existing media queries.

  • If you can't access or edit the header section of your newsletter HTML, please notify your LiveIntent account manager. 

Please make sure media queries are not placed in the body, as this may cause issues with mobile responsiveness for Gmail on iOS and Android devices.

Please note that you must insert your template’s mobile responsive width within the media query where requested. We recommend you align the mobile max-width with your other media queries max-width pixels.

For more information on implementing the media query, please refer to the Native LiveTag Implementation article.

Have more questions? Submit a request