Learn how to dynamically inject information into a page using Unless data and Javascript.
Dynamic Content Insertion lets you add keywords and information to pages to make your ads and marketing campaigns more relevant.
The first two options help you pass information through the URL - ideal to enrich your pages with small nuggets of information that come from your ESP or Google Ads. However, if you want to make small, consistent changes to a chunk of your content (e.g. your headline), you will need this expert guide.
For this guide, we'll use the homepage of Balr as an example and dynamically inject it with different headlines.
Open your page personalization, create a dynamic placeholder, and click on the Custom Javascript icon in the right-side menu to fold out the advanced editing section.
Example: We added the dynamic placeholder {{greeting}} and opened the advanced editing section (fyi:your menu might look a bit different).
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.
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:
// 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 RED 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 RED Special.
if (Txt.get('device.isMobile')) { Txt.set('dynamic.placeholder', 'Hey Mobile user!'); } else { Txt.set('dynamic.placeholder', 'Default headline!')'; }
if (Txt.get('geo.city') == 'Amsterdam') {
Txt.set('dynamic.placeholder', 'Special offers for Amsterdam');
} else {
Txt.set('dynamic.placeholder', 'Default headline');
}
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
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
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).