Rules determine where on your website a pop-up should be displayed.

To set your pop-up’s rules, you will define both triggers and conditions.

The most common rule is to trigger a pop-up when a specific URL is loaded.

Before setting up your conditions and triggers, think about how your pop-up should behave:

Triggers are what activate your pop-up.

Once all the conditions are met, the trigger will determine when to display the pop-up

The default trigger is page load. This means that if all conditions are met, the pop-up will show instantly when the webpage loads. To add a delay to your page load, you will add a trigger, select page load, and set a delay.

This will display the pop-up when the user moves their mouse cursor up to the URL bar, which indicates that they will leave the webpage.

It's possible to set a delay on your exit intent trigger, though this is not recommended, as you usually want to display the pop-up as quickly as possible in order to catch the user's attention before they leave the page.

This will display the pop-up when the user begins to scroll on the page. So if they open the page but don't scroll, the pop-up will not show, even if the conditions are met.

Data Layer is a feature of Google Tag Manager. You can read more about Data Layer here. You can also find more information about Data Layer events here.

If you use Data Layer events, you can use these events as pop-up triggers. In your trigger settings, you will give the event and variable names, and then define the condition for the trigger (based on the variable's value).

An example of a dataLayer trigger could be adding a winter related item to your basket:

You can select more than one trigger for your campaign. In that case, all triggers have to be satisfied before the pop-up will show. So by combining scroll with exit intent, you can trigger an exit intent pop-up that will only show to users who have scrolled the page before leaving.

Note: it is not necessary to add "page load" as a second trigger because page load is the default trigger.

There are ten different methods you can use as conditions, some are more advanced than others. The pop-up will only be displayed or hidden if all conditions are met!

You’ll use the URL address to set up a rule for which web page the pop-up will be displayed on. Creating a Show rule will determine which website your pop-up will be displayed on. The URL should always be the full address, as an example: “https://www.playable.com”.

If you would like to have the pop-up displayed on all sub-pages on your website you can include an asterisk “*” after the address: “https://www.playable.com*”. This will work as a wildcard and display the pop-up on all sub-pages.

Using the URL address you can also create a Hide condition, for pages you would not like to have the pop-up displayed on. The asterisk can be used the same way as in the show rule to exclude the pop-up from sub-pages.

Show or hide a pop-up based on your own URL parameters. An example of this could be if you link to your website from a newsletter with a URL like this: http://www.playable.com/?newsletter=true

The action is set to Hide, the parameter name is newsletter, the condition is set to equal and the value 'true', meaning that if the URL has newsletter in it the pop-up is hidden.

Enter a custom regular expression to match against the URL. For example, to show a pop-up for all product categories other than “games”:

For more information on regex see our article here.

If you add a UTM campaign source and UTM campaign name to match against, you can show or hide a pop-up based on these.

As an example, when a user visits from a URL which includes the following two parameters, utm_source and utm_campaign the action can be set to either Show or Hide the popup.

For more information on UTM parameters, see our article here.

Show or hide the pop-up depending on a specific hashtag. A hashtag comes at the end of the URL, add the text after #. For example:

https://www.playable.com/#show-popup

Show or hide a pop-up depending on the name of a cookie set in the browser. For example, if you have a cookie on your website with the name 'show_popup' with the value '1' then you could write the condition as follows:

Show or hide the pop-up based on variables existing in the DataLayer object. Many websites publish in the DataLayer if a user is logged in. For example, a website might have a variable with the name 'loggedin' equal to '1'. Under the condition, you would write:

Show or hide a pop-up depending on a JavaScript evaluated on your website.

Function name: DisplayPopup

Code example:

When the condition is evaluated, it will execute the method and if the value returns true it will show the pop-up.

You can limit how often a user will see the same pop-up. This is based on the user's browser cookies. Start by selecting a limit and then set an interval for how often the limit should reset.

We hope that this article has provided you with some clarity when it comes to pop-up rules, triggers and conditions. If you need further assistance, please reach out to our chat support!