Set up Custom Properties for Wisepops

Lisa Fockens Updated by Lisa Fockens

Custom properties must be configured by someone with developing skills

If you're using Google Tag Manager and GTM variables, you can define custom properties from GTM variables.

Introduction

Custom properties allow you to target your visitors using properties that you set up yourself.

Let's say that we want to target visitors who:

  • are older than 25
  • are in the "travel" segment or in the "sport" segment
  • and purchased something at least three days ago

On your website, you can attach such properties to your visitors and Wisepops will be able to target these properties.

Data attached to your visitors are called Custom properties.

Rules based on custom properties are called Custom conditions.

You can also use the custom properties to personalize the content of your popups on the fly.

Defining custom properties

You can use JavaScript to attach custom properties to a visitor. A function wisepops() is available as soon as our code is executed.

wisepops("properties", customProperties, [options]);

  • "properties" : String that indicates that you want to define custom properties. Leave it as it is.
  • customProperties : This is the dictionary of properties you know about the user, like email, name, age, etc.
  • options : Optional settings object to configure the properties' behavior. Currently only support the temporary option (false by default). See Persistent and temporary properties.

Typically, when someone logs in, we will add the following code, right after the Wisepops setup code:

wisepops("properties", {
    firstName: "Boris",
    country: "FR",
    age: 30,
    segments: "cinema,food,travel",
    lastPurchaseDate: "2017-05-02T15:52:01+02:00"
});

Persistent and temporary properties

By default, the custom properties are persistent. After defining them on one page, they're still available on the future pages and sessions. If you define again some custom properties, they're merged with the old ones.

The temporary option allows defining properties only for the current page. The temporary properties are automatically cleared when the page is changed. This is useful to provide context that's relevant only for the current page. Like the price of the product being viewed.

Temporary properties take the precedence over persistent properties. If a temporary property and a persistent property share the same name, the value of the temporary property will be used. But the persistent property will be back on the next page.

To define temporary properties, add the temporary option as 3rd argument:

wisepops("properties", {
  productPrice: 19.99,
}, {
  temporary: true,
});

Defining custom conditions

To define your custom conditions, open your popup in the builder tool and click Display rules. Then, select Advanced. You can configure your conditions in the Custom properties section (or Shopify properties).

To create the property in Wisepops, click on Add rule:

Type the name of your property and click on Add property.

Then you can set up the conditions to be matched during the display scenario resolution, as shown below.

Formats of custom properties

Each property must be one of the following types:

  • String
  • Number
  • Date
  • Boolean

The custom properties dictionary is flattened into a one dimensional object. If you set the following properties:

wisepops("properties", {
  user: {
    id: 42,
    name: "Boris"
  }
});

You will then be able to write conditions on the keys user.id and user.name

About the date type and format

You can set up a property to the current date of the browser by entering the following:

wisepops("properties", {lastPurchaseDate: new Date()});

But you are also free to write dates as strings.

While various formats are handled, we suggest you follow the W3C standard:

2017-05-02T15:52:01+02:00

This is equivalent to 2017-05-02 15:52:01 CEST .

If no time zone is specified, dates will be handled as UTC.

Negative conditions do not match non-existing properties

It is important to note that the following conditions:

  • Is not equal to
  • Does not contain

will be matched only for an existing property different from the tested value. If the property is not set, the condition won't pass.

Let's take an example: product.categories does not contain shoes.

Here, we assume that you want your campaign to be displayed for the products that do not have the category shoes. And that you don't want the campaign to be displayed on pages that are not about products.

If instead, we want the campaign to be displayed either if the property is different from the tested value or if the property is not set at all, we can refine the condition like this:

Debugging and troubleshooting

We suggest you define your custom properties just after the Wisepops setup code. The definition of the custom properties must happen within 100 ms after the execution of our setup code. Otherwise, the resolution of the scenarios will occur without the update on your properties.

If the wisepops() function is not defined, please make sure that the Wisepops setup code is executed first, and is up-to-date.

It should start with (function(W,i,s,e,P,o,p) .

You can also test your configuration.

The custom property isn't present in the conditions' dropdown

You need to manually type the property name the first time you want to use it. After having clicked in the dropdown, type the property name:

How To Test Your Custom Properties

Contact