ePrivacy and GPDR Cookie Consent by Cookie Consent

Web banners: create form & conditions

Personalization/ Web Banners tab enables creating and setting rules to display pop up banners and display them to the users of the website.

Prerequisites to working with web banners:

  • The Meiro Events SDK is enabled on the website and the Meiro Events instance is connected to Meiro Business Explorer.
  • The feature is enabled in Meiro Business Explorer by your administrator.

Both are usually set by the Meiro team. 

 

Web banner form

Name 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/ Web banners tab. 

 

Warning: depending on the reporting set for measuring web banners performance, changing of the name may influence the report  e.g. reporting may be set to track various versions of web banners under various names. Usually it is the latest name that is used in attributes or reporting, but each individual name can be tracked as well (to discuss details contact the Meiro team).  Since reporting is customized for each client, please contact the Meiro team to check it out.

 

Frequency cap (required)

Select frequency cap per user for hour/ day/ 1 session and in total ("Total" number of display is optional to define).

 

User

Each "user" has assigned a "cookie" hence is identified as a separate "user". If a user uses different browser, then will be considered as a new user.

Session Refers to the activity of the user within the 30 minutes.

E.g. Below is an example of a setting with 10 views of a web banner in total and 1 per session per user. 

image-1624902294750.png

 

 

Remember: it is also possible to set global frequency for 1 user across all web banners

Position (required)

The position where the banner will be located on the page: top left, top right, middle, bottom left, bottom right. 

 

For the position “middle”, the page will be covered with a semi-transparent overlay and the banner will be displayed on top of the overlay. If the user clicks anywhere outside of the banner, this will close the banner.

 

For the other positions, the banner will be displayed without an overlay and can only be closed by clicking the close button in the banner. These banners will be offset from the edge of the window by a 20-pixel gap.

 

Priority (required)

It is a number that defines priority for a display of a web banner. Priority can be set to a whole number between -10 and +10, where -10 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.

 

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, the banner which has been shown to this user the least number of times in the past 24 hours will be selected.

HTML/ Image

(required)

There are two types of banners: image banners and HTML banners.

 

Image banner

Image banners consist entirely of the specified image. After clicking on the web banners the user is directed to the specified destination URL (the new page will open in the same window as the current page).

The banner has a close button in the top right corner automatically included.

 

The dimensions of the image banner are the same as the dimensions of the specified image, but they are scaled down if the window is too small:

  • On mobile phones, the image is scaled down to fit the window, leaving a 20-pixel gap from each edge.
  • On other devices, the image is scaled down so that the width is at most 50 % of the window width and the height at most 50 % of the window height.
  • Aspect ratio is always preserved.
Image URL The URL of the image that will make up the banner.
Image Upload Image type: APNG, AVIF, gif, jpg, png, svg, webp
Image size: 100 - 500 KB
Image resolution: -
Destination URL The URL that the user will be taken to after clicking on the banner.

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

 

HTML banner

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

 

HTML

The source code for the banner. 

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

Width in pixels 

The width  of the banner.

 

If it does not fit into a viewport, it will be reponsive: 100% viewport width, 40 pixels of margine.

Enable close button

When enabled, the banner is displayed including the default close button in the top right corner.

If disabled, this enables the developer to include their own close button.

The Meiro SDK provides a method that can be called by this close button to close the banner (see the section for developers for more details).

 

 

 

Minimized banner form

Create & enable or disable the minimized web banner.

Image minimized banner

Position: by default bottom right corner (choice of positions coming soon)

 

Image upload/ image URL: upload an image or insert a URL form where an image will be fetched. 

 

HTML minimized banner

HTML code: insert code for the minimized web banner. If HTML will be set like form, the form will not be active, as clicking on web banner opens a large web banner. 

 

Position: by default bottom right corner (choice of positions coming soon)

 

Width in pixels: select width for your minimized web banner.

 

Enable/ disable close button: enable if you wish the close button to be added (if it is not included in the design)

 

Close button is enabled by default. It is not possible to disable it or insert it in HTML code of minimized banner only. 

 

Close icon color: select which color for the close button (coming soon).

Warning: minimized banner will be triggered when the user clicks on the close button of a banner. The minimized banner will follow user clicks on the close button on the minimized banner (coming soon is hiding minimized banner on specified URLs). 

 

Conditions

Conditions are rules that must be fulfilled in order for the banner to be considered for display (the banner will be displayed depending on the frequency cap and priority).

If no conditions are set, the banner will always be considered for display and will only be limited by frequency cap and priority settings.

The conditions can be nested and the operators at each level of nesting set to either “and” (all conditions must be fulfilled) or “or” (at least one of the conditions must be fulfilled).

Browser language 

Possible operators: equalsdoesn't equalequals any ofdoesn't equal any of. Values are selected from a dropdown list.

 

The language of the user’s browser (retrieved from 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”.

Browser

Possible operators: equalsdoesn't equalequals any ofdoesn't equal any of. Values are selected from a dropdown list. Possible values are: ChromeEdgeFirefoxSafariOperaother.

 

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

Cookie

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

 

Possible operators depend on the expected datatype of the cookie 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 cookie set in the browser under the specified cookie name.
Additional fields:
Cookie name The name of the cookie whose value you want to compare
Note for developers: the cookie must be accessible to JavaScript code, i.e. it must not be set as “http-only”.

 

Datetime

Possible operators: untilsincesince-until.

 

This condition compares the time of the pageview 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 datetime value in your own 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 datetime in your timezone 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.

Day of the week

Possible operators: equalsdoesn't equalequals any ofdoesn'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.

Device

Possible operators: equalsdoesn't equalequals any ofdoesn't equal any of. Values are selected from a dropdown list. Possible values are: consoledesktopembeddedmobilesmart TVtabletwearable.

 

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

Google Tag Manager

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 depend on the expected datatype 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 an entry in the GTM data layer. 
Additional fields:
Name of GTM DL object The name of the data layer object as it is instantiated in the website; e.g. if your data layer object is accessed under window.dataLayer, input “dataLayer”.
GTM DL key The key of the data entry whose value you want to compare.
Hostname

Possible operators: containsdoesn't containequalsdoesn't equalequals any ofdoesn't equal any of.

 

The hostname of the page, as retrieved from 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).

Hours of the day

Possible operators: equalsdoesn't equaluntilsincesince-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.

HTTP

Possible operators: response is OK, is set, is not set when data type is not selected. If 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 datatype 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 makes a request 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:

URL template

The URL to send the request to. You can use values from cookies and local storage by using placeholders in the URL template: {{cookie:my_cookie_name}} for cookie values, {{ls:my_ls_key}} for local storage. E.g. the placeholder {{cookie:transaction_id}} in the URL will be replaced by the content of a cookie named transaction_id, while the placeholder {{ls:transaction_id}} will be replaced by the content of local storage stored under the key transaction_id.

 

Note: If the specified cookie or local storage item doesn't exist, the condition will fail.

 

Note for developers: The values from cookies/local storage are encoded by the SDK using the JavaScript function encodeURIComponent() before being inserted into the URL. Do not store encoded values—they would get encoded twice!

 

Path in response body The path to the value that you want to compare, in standard JavaScript notation, i.e. the . delimiter for accessing the property of an object and [] for accessing an index of an array (array indexes start at 0). For example, in the response { a: { b: ["x", { c: 42 }] } }, the path a.b[1].c retrieves the value 42.

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 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 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 will make a request 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 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.  

Local storage

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

 

Possible operators depend on the expected datatype 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:

Local storage key The local storage key whose value you want to compare.
Operating system

Possible operators: equalsdoesn't equalequals any ofdoesn't equal any of. Values are selected from a dropdown list. Possible values are: AndroidiOSMacOSWindowsother.

 

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

 

Page title

Possible operators: is setis not setcontainsdoesn't containequalsdoesn't equalequals any ofdoesn't equal any of.

 

The page title (retrieved from document.title).

 

Pathname

Possible operators: containsdoesn't containequalsdoesn't equalequals any ofdoesn't equal any of.

 

The pathname of the page, as retrieved from 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.

Referrer

Possible operators: is setis not setcontainsdoesn't containequalsdoesn't equalequals any ofdoesn't equal any of.

 

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

 

 

URL

 

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

 

UTM campaign, UTM medium, UTM source

Possible operators: is setis not setcontainsdoesn't containequalsdoesn't equalequals any ofdoesn'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.

 

Remember: strings are converted to lowercase. When evaluating conditions which compare strings of text, all strings are compared as case insensitive.

 

Cookie, local storage, and Google Tag Manager condition data types and operators

For conditions that are based on cookie/local storage/GTM values, it is possible to select the expected data type of the value retrieved:

  • If no data type is selected, you can choose the operators “is set” and “is not set”, which will test whether there is a value stored under that name at all.
  • If you select a data type, you will then be able to select from operators available for that data type.
  • If the value is not set, all comparisons will be evaluated as false.
  • If you want to be able to distinguish a scenario where the value is set but "doesn’t equal" your provided value, is it recommended you set up two conditions: one for “is set”, and one for the comparison you want to make.

Relative datetime data type

Whereas the "datatime" data type compares the stored timestamp value to an absolute point in time, the "relative datetime" type compares the value to some moment in time relative to when the customer is viewing the page.

Just like for the "datetime" type, the operators available are "since", "until", and "since–until". The moment in time that is compared to the stored timestamp can be either before or after the moment when the user is viewing the page. 

For example, if you set the condition to:

since 1 hour before

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

until 1 hour before

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

since 1 hour after

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

until 1 hour after

the condition will pass if the timestamp denotes a moment in time which 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)

since 1 hour before / until 1 hour after

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

 

Learn more: see section for developers for more details.