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 tool that leverages existing newsletter template HTML to define a native ad slot’s appearance. Blueprints can be built to match template styling or a publisher’s existing native concept. Once created, blueprints are linked to the LiveTag to enable ad serving.
To create a blueprint, please reach out to your LiveIntent account team.
IMPORTANT: 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.
- NOTE: Certain Email Service Providers do not give users access to their newsletter header (such as Sailthru lite, Iterable, Braze, Blueshift, Octopus, and Klaviyo). If you can’t edit your newsletter header, please reach out to your LiveIntent team for assistance.
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 LiveTag 3.0 Implementation article.