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 fallback. We will also 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 fallback

In this example, we use the Unless property {{geo.city}} and add a fallback. We changed the phrase "Personalization for businesses in your city" to "businesses in {{geo.city}}" and kept "your city" as the fallback.

Unless-DCI-geocity

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 ten cities 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 do this.

List of geo.location properties:

  • "geo.city" → Example: Amsterdam
  • "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"