Expert: Using Javascript and Unless data for dynamic personalizations

What is it for?

Dynamic Content Insertion lets you add keywords and information to pages to make your ads and marketing campaigns more relevant.

Generally, you have three options:

• manually add query string parameters to the URL (learn more)
• dynamically pass query string parameters through the URL (learn more)
• use JavaScript to pass on data provided by Unless

The first two options help you pass information through the URL - ideal to enrich your pages with small nuggets of information.

However, if you want to dynamically change a bigger chunk of your content (e.g. your headline), you will need this expert guide.

Create dynamic page variations using Javascript

Personalizations are a great way to create a tailored user experience for your visitors. However, not all personalizations require a separate design. If you want to make small, consistent changes, writing a few lines of code might be easier. So in this guide we will teach you how to dynamically inject a page with different headlines.

1. Open advanced editing section

Open your page personalization, create a dynamic placeholder, and click on the Unless icon to open the advanced editing section. Here you can add custom CSS and Javascript.

Example

We added the dynamic placeholder {{greeting}} and opened the advanced editing section.

2. Add Javascript

Any text entered in the "Custom Javascript" field will execute when the page loads. Here you can get and set parameters so you can use them later in a placeholder on the page. The code looks something like this:

Txt.set('placeholder.key', 'value to show') //stores a value in a key

Txt.get('placeholder.key') //retrieves a value from a key

Example

We turned the dynamic placeholder {{greeting}} into the headline "Balr Special". For this, we added one line of Javascript Txt.set('greeting', 'Balr Special') and published. Next, we refreshed the page in live view to make sure it works.

3. Use properties and if/else statements to make your Javascript dynamic

So far, we learned how to replace our placeholder with a fixed value ({{greeting}} → 'Balr Special'). Now, we will introduce the dynamic properties of Unless to make the code dynamic.

At the end of this article, you'll find the full list of properties you can choose from. For now, let's say we want to show different greetings based on time of day. For this, we will need the property "time is....".

Let's say we want to make the following changes:

• If "night" replace {{greeting}} with Late night special by Balr:
• else if "morning" replace {{greeting}} with Early bird special by Balr:
• else if "afternoon" replace {{greeting}} with Afternoon special by Balr:
• else replace {{greeting}} with Balr Holiday Special (→ this will trigger in the evening or as a fallback)

Now, let's translate this into Javascript

// time-based greeting
if (Txt.get('time.timeOfDay') === 'night') {
  Txt.set('greeting', 'Late night special by Balr:');
} else if (Txt.get('time.timeOfDay') === 'morning') {
  Txt.set('greeting', 'Early bird special by Balr:');
} else if (Txt.get('time.timeOfDay') === 'afternoon') {
  Txt.set('greeting', 'Afternoon special by Balr:');
} else {
  Txt.set('greeting', 'Balr Holiday Special:');
}

Example

We added above Javascript snippet to the the page and published. Next, we refreshed the page in live view to make sure it works. Since it was after 7pm when we created this GIF, the previous greeting (Balr Special) was replaced with Balr Holiday Special.

List of Unless properties

Device

• "device.isMobile" → Example:

if (Txt.get('device.isMobile')) { Txt.set('dynamic.placeholder', 'Hey Mobile user!'); } else { Txt.set('dynamic.placeholder', 'Default headline!')'; }

• "device.isTablet" → Example: false
• "device.isDesktop" → Example: true
• "device.browser" → Example: Chrome
• "device.browserLanguage" → Example: en
• "device.os" → Example: OS X
• "device.viewSize" → Example: 1862px

Location

• "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" → northern or southern
• "geo.currency" → Example: "USD"

Time & Date

• "time.date" → Example: "2017-11-17T14:51:00+01:00"
• "time.hour" → Example: 14
• "time.minute" → Example: 51
• "time.day" → Example: 17
• "time.month" → Example: 11
• "time.year" → Example: 2017
• "time.dayOfWeek" → Example: Monday
• "time.timeOfDay" → night, morning, afternoon or evening
• "time.timeOfYear" → spring, summer, autumn, winter

Weather

• "weather.icon" → Example:

if (Txt.get('weather.icon') == 'snow') { Txt.set('dynamic.placeholder', 'Stay warm on this snowy day'); } else {
Txt.set('dynamic.placeholder', 'Default headline');} Options: clear-day, clear-night, rain, snow, sleet, wind, fog, cloudy, partly-cloudy-day, or partly-cloudy-night

Remember: Since the weather API is a 3rd-party API, we only fetch the current local weather if you connect your personalization to a weather audience.

Audience Setup:
conditions > weather.temperature > is greater then > -100

Behavior

• "behavior.referer" → Example: https://facebook.com
• "behavior.returningVisitor" → Example: "true"

Parameters

• "parameters.utm_source" → Example: Google
• "parameters.utm_medium" → Example: CPC
• "parameters.utm_campaign" → Example: spring-sale
• "parameters.utm_content" → Example: spring-dresses
• "parameters.utm_term" → Example: red-dress

Custom Parameters

• "parameters.xxx" → Replace xxx with any query parameter you send through via the URL.

Example

Let's say you have a fitness training website. You ask your visitors to answer one question - What is your goal? A) lose weight B) gain muscle You can store their answer in the URL and use it to for dynamic injection.

URL: fitness.com?goal=weight

Dynamic Content Insertion

if (Txt.get('goal') == 'weight') {  
Txt.set('dynamic.placeholder', 'We will help you lose weight');
} else { 
Txt.set('dynamic.placeholder', 'We will help you gain muscle');
}

You can also inject Unless properties directly into your page (e.g. add user's location to the headline).