Walkthrough: Dynamically add a visitor's location to your page

Learn how to dynamically state a visitor's location or how to add text based on the availability of a visitor's location.

This article is an addition to our main article about the use of Unless properties. In the main article, we explain how to change entire page sections based on Unless properties. Alternatively, you can inject these properties (e.g. a user's location) directly into the page, as described in this article.

How to personalize using {{geo.location}}

In general, you can inject any Unless property into your page but in this article we will focus on the most common use case - adding a person's location to your website.

First, we will show you how to use one Unless property in combination with a static fallback. Next, we will use two Unless properties, so that the fallback also becomes dynamic (this helps if the visitor's exact location is unknown). Finally, we will teach you how to add text based on the availability of dynamic information (e.g. add "make an appointment in" if {{geo.city}} is known).

How to add a user's location with a static fallback

For this, we need to use the Unless property {{geo.city}} and add a fallback.

Example

Below, we changed the phrase "now available in your city" to "available in {{geo.city}} and kept "your city" as the fallback.

balr1

How to add a user's location with a dynamic fallback

For this, we need to use the Unless property {{geo.city}} and add {{geo.countryName}} as a fallback.

Example

Below, we changed the phrase "available in your city" to "available in {{geo.city}} and used "available in {{geo.countryName}}" as the fallback. Don't forget to switch the radio button to "Unless property" to make the dynamic fallback work.

balr2

How to add text based on the availability of a user's location

If you want to add text only if the value of a dynamic parameter (e.g. {{geo.city}}) is known, you need to write one line of custom Javascript:

    if (Txt.get('geo.city')) {
      Txt.set('placeholder', 'Hi there in ' + Txt.get('geo.city'));
    }

Example

maty1

Code

  if (Txt.get('geo.city')) {```
Txt.set('session', '- book a yoga session in ' + Txt.get('geo.city'));```
  }

Result

maty2

Now, if {{geo.city}} is available, the additional text "book a yoga session in {{geo.city}}" will appear.

Most common use cases

In general, you can use any Unless property as a dynamic parameter. The most common are:

  • {{geo.city}} → Example: Hi there in {{geo.city}}!
  • {{geo.countryName}} → Example: Now available in {{geo.countryName}}!
  • {{device.os}} → Example: Our App is available for {{device.os}}!
  • {{parameters.utm_content}} → Example: Buy {{parameters.utm_content}}!
  • {{parameters.xxx}} → Example: Personalize based on parameters send via the URL (scroll to the end of this article for an example).

If you feel using Unless properties for simple statements is too limiting, you can also learn how to show different phrases based on Unless properties.

To give you an example, let's say you have stores in ten different locations. For these you want to use the phrase "Come to our store in Amsterdam/Paris/New York,...". For any other location, you want to switch to "Available online". By writing some JavaScript, you can easily do this by creating dynamic page variations.

List of geo.location properties:

  • "geo.city" → Example *if (Txt.get('geo.city') == 'Amsterdam') { Txt.set('dynamic.placeholder', 'Special offers for Amsterdam');} else { Txt.set('dynamic.placeholder', 'Default headline');}
  • "geo.ip" → Example: "10.10.10.10"
  • "geo.countryCode" → Example: NL
  • "geo.countryName" → Example: Netherlands
  • "geo.regionCode" → Example: NH
  • "geo.regionName" → Example: North Holland
  • "geo.zipCode" → Example: "1000"
  • "geo.timeZone" → Example: Europe/Amsterdam
  • "geo.latitude" → Example: 52.35
  • "geo.longitude" → Example: 4.9167
  • "geo.hemisphere" → Example: "southern"
  • "geo.currency" → Example: "USD"