Embedded web banners: create form & conditions

Prerequisites

To work with web banners, first, they need to be set by the Meiro team:

1. Meiro Events must be implemented. 

2. Meiro Events API connection must be set in the Administration/ Settings tab. 

3. Web banners tabs must be enabled by the administrator for your user role.

4. For embedded web banners it is required to place a DOM element with a unique ID in the HTML code of  the website where the banner will be displayed.

Name embedded web banner

(required)

The name under which the banner will be displayed in the list of banners. This name is only visible within the Personalization tab/ Embedded web banners tab. 

Warning: Depending on the reporting set for measuring embedded web banners performance, changing of the name may influence the report e.g. reporting may be set to track various versions of embedded web banners under various names. Usually, it is the latest name that is used in attributes or reporting, but each name can be tracked as well. Reporting is fully customized for each client. Contact the Meiro team to learn more.

Priority (required)

It is a number that defines the priority for a display of an embedded web banner. Priority can be set to a whole number between 0 and 10, where 0 is the lowest priority and 10 is the highest. 0 is the default priority.

The Meiro will only show one banner at a time to a user inside a single DOM element specified by ID on the website.

If there are multiple banners for which the display conditions are fulfilled, the banner with the highest priority will be displayed.

If multiple banners have their conditions fulfilled and have the same priority and element ID, the order to display an  embedded banner is random.

Possible operators: cookie name, data type (boolean, datetime, number, string), and/ or operator (is set/ is not set and operators relevant for the data type). 

Possible operators: local storage key, data type (boolean, string, number, datetime), depending on the data type set other operators are possible to set, like operator (is set/ is not set). 

Possible operators depend on the expected data type of the value. See the section below for a note about data types and operators and the section for developers for more details.

This condition compares the specified value with the contents of a local storage item set in the browser under the specified key.

Additional fields

Possible operators: equals, doesn't equal, equals any of, doesn't equal any of. Values are selected from a dropdown list. Possible values are Chrome, Edge, Firefox, Safari, Opera, other.

The user’s browser is detected from the user-agent string.

Possible operators: equals, doesn't equal, equals any of, doesn't equal any of. Values are selected from a dropdown list.

The language of the user’s browser (retrieved from the window.navigator.language).

Only the first part of the language code (the two-letter code as defined in ISO 639-1) is considered—e.g. if the condition is set to equal “en”, the condition will be fulfilled by values “en”, “en-US”, “en-GB”.

Possible operators: equals, doesn't equal, equals any of, doesn't equal any of. Values are selected from a dropdown list. Possible values are: Android, iOS, MacOS, Windows, other.

The user’s operating system is detected from the user-agent string.

Possible operators: equals, doesn't equal, equals any of, doesn't equal any of. Values are selected from a dropdown list. Possible values are: console, desktop, embedded, mobile, smart TV, tablet, wearable.

The user’s device is detected from the user-agent string.

Possible operators: name of GTM DL object, GTM DL key, data type (boolean, datetime, number, string), depending on the set datatype other operators are available: is set, is not set.

Possible operators: contains, doesn't contain, equals, doesn't equal, equals any of, doesn't equal any of.

The hostname of the page, as retrieved from the window.location.hostname i.e. the part of the URL address excluding the protocol prefix (“https://”) and excluding the path (the “/” after the top-level domain and any following text).

Possible operators: contains, doesn't contain, equals, doesn't equal, equals any of, doesn't equal any of.

The pathname of the page, as retrieved from the window.location.pathname i.e. the part of the URL address including the “/” after the top-level domain and any following text, but excluding the query, the part of the URL starting with “?”, if there is any.

Possible operators: is set, is not set, contains, doesn't contain, equals, doesn't equal, equals any of, doesn't equal any of.

The page title (retrieved from document.title).

The entire URL address of the page the user is on (retrieved from the window.location.href).

Possible operators: response is OK, is set, is not set when the data type is not selected. If the data type is selected, specify operation and possibly value(s) field,  path in a response to the value which has to be compared.  

Possible operators depend on the expected data type of the value. See the section below for a note about data types and operators and the section for developers for more details.

This condition requests to the provided URL and parses the response as JSON. You can specify the path in the response body that leads to the value that you want to compare.

Additional fields:

There is an additional operator for this condition, "response is OK". For this operator, the condition will simply pass if the response HTTP status code is >=200 and <400.

Note for developers: The content of the response body is stored by the SDK and can be accessed from inside the HTML banner for use in the banner code. See the section for developers for details.

Example for “response is OK”: On the page, you have a cookie with the name “last_order_id” and value “123”, and a local storage item with the key “user_email” and value “user@example.com”. Type in the URL “https://my-api.com/orders/{{cookie:last_order_id}}?email={{ls:user_email}}”. The Meiro Events SDK requests to https://my-api.com/orders/123?email=user%40example.com. If the response returns OK, this condition will pass.

Warning: If you add segments in the embedded web banner for the first time, please reach out to the Meiro team to set up servers for it and to ensure the server sizing is upgraded.  

Learn more: about use cases with this conditions: abandonned basket, form with promo code.

Learn more: about how to display web banner to segmented audience.

Possible operators: greater than, less than, in between, equals, doesn't equal. 

Select conditions for page views when the embedded web banner will be triggered. All page views are counted within one session.

Possible operators: until, since, since-until.

This condition compares the time of the page view with an absolute point in time, the evaluation doesn’t take into account the user’s timezone. At any given moment, it will evaluate the same for all users around the world.

Remember: In Meiro Business Explorer, input the date time value in your  timezone.

Example: You have a campaign that ends on a particular day at noon of US eastern time (ET). You want to stop showing a banner when the campaign ends. You are currently using Meiro Business Explorer from Prague (CET). You select the operator “until” and input the date time in your timezone at 6 PM (which equals noon in ET). On the given day, at noon ET (6 PM your time), users all around the world will stop seeing the banner at the same time, regardless of their timezone.

Possible operators: equals, doesn't equal, equals any of, doesn't equal any of. Values are selected from a dropdown list (Monday–Sunday).

This condition takes the user’s timezone into account, i.e. which day of the week it is for the user.

Possible operators: equals, doesn't equal, until, since, since-until. Possible values are integers 0–23.

This condition takes the user’s timezone into account, i.e. which hour of the day it is for the user e.g. if set to “equals 16”, this condition will pass if it’s between 16:00:00 and 16:59:59 for the user.

Traffic source: UTM campaign

Traffic source: UTM content

Traffic source: UTM medium

Traffic source: UTM source

Traffic source: UTM term

Possible operators: is set, is not set, contains, doesn't contain, equals, doesn't equal, equals any of, doesn't equal any of.

The value of the “utm_campaign”/ "utm_content"/“utm_medium”/ “utm_source”/"utm_term" part of the query in the URL address.

Possible operators: is set, is not set, contains, doesn't contain, equals, doesn't equal, equals any of, doesn't equal any of.

The value of the “referrer” part of the query in the URL address.

The condition will pass if the timestamp denotes a moment in time that is 1 hour old or less at the moment of the page view (which means it can also be any time in the future)

The condition will pass if the timestamp denotes a moment in time that is 1 hour old or more at the moment of the page view

The condition will pass if the timestamp denotes a moment in time that is 1 hour in the future or more at the moment of the page view

The condition will pass if the timestamp denotes a moment in time that is 1 hour in the future or less at the moment of the page view (which means it can also be any time in the past)

The condition will pass if the timestamp denotes a moment in time that is no more than 1 hour old, but also no more than 1 hour in the future, at the moment of the page view

HTML Template Gallery

Gallery with HTML templates allows users to create web banners with already prescribed HTML code. Here you can remind the customers of their purchase intention, offer a time-limited discount, give a promo code, etc.

Learn more: about use cases and how to use HTML template gallery

Image banners consist entirely of the specified image. 

The dimensions of the image banner are the same as the dimensions of the specified image. If the width is higher than the width of the specified Element ID, then the image will take 100% of the element specified by ID. It is possible to override those setting with CSS on the website.

Destination URL: The URL that the user will be taken to after clicking on the banner (the new page will open in the same window as the current page).. If no destination URL is specified, nothing happens on click.

Image upload:

Upload the image for the banner.

Image type: APNG, AVIF, gif, jpg, png, svg, webp
Image size: 100 - 500 KB
Image resolution: -

Image URL: 

Specify the image for the banner.

Warning: Make sure that the image URL is publicly accessible.

Learn more about image banner use cases.

For HTML banners, the content of the banner needs to be specified manually (see the section for developers for technical details about how the banners are included in the page).

HTML:

The source code for the banner. 

The maximum length of the HTML code is 100 000 characters.

Learn more about HTML banner use cases.

Element ID (required)

ID of HTML element on a website where banner will be placed.

To learn more about how to set element ID on the website, please refer to developers documentation.

If there is already a content within Element ID- it will be exchanged by the embedded web banner. 

Remember: element ID should be unique on the website, as if more element Ids defined on the same page, SDK uses document.getElementById method for finding element by ID, it will find the first one in HTML document and place the banner there.

Warning: Meiro do not validate if element ID exist on the website, this must be tested and checked by the client on the websie. 

Banner width in pixels  (optional)

If not set banner width will be 100% of the element specified by ID.