fbpx

Personalization With Saturn-Replace

You are here:
< All Topics
Table of Contents
This document shows you how to use the saturn-replace markup attributed to personalize any webpage text for specific visitors.

What is this for?

Realtime website personalization ultimately gets better engagement and conversions.

With this feature, you can “ultra-personalize” webpage content for individual visitors.

When added to Funnel based personalization…powerful stuff.

While with HTML Snips you can change entire HTML sections, Saturn-Replace is for simpler text replacement, such as names, titles, keywords, and the like.

The Markup

<span saturn-replace="name" saturn-before="" saturn-after="">replaced</span>

name: is the variable "name" we replace. Only executed if this variable has a value available.
saturn-before & saturn-after: are optional strings that we add before and after the replaced name.
replaced: Default content. Whatever content (text or other HTML markup) within the <span>

 

If there is no variable of “name” the default content stays. If there is, it is replaced.

Where does the name come from?

Two places:

  1. If the visitor has filled out a form previously the values are stored locally in “name: value” pairs.
  2. If there is a URL parameter with that name…This one will override any local storage if given

 

Content Example

Add or replace names, titles, keywords, and the like anywhere on your web page.

This includes, from within your content editor or with Satun Funnels assets.

These can be in CTAs, Popups, HTML Snips or Landing Pages…and place where you can put markup.

CTA Example

Here is a blatant example from within a Saturn Funnels CTA…in three places.

Original CTA, without saturn-replace tag content
With a saturn-replace=”name” added to the title, body, and button.

 

Here is what is personalized:

  1. Title…with the visitor’s name
  2. The body…changing the copy “you” to the visitor’s title “Founder”
  3. The action “Learn more button”

Example How-To

Add a HTML element, often a <span> with the saturn-replace=”{replace name}”. Then the content of the <sapn> will be dynamically replaced.

For example, the above CTA.

1. Title: <span saturn-replace="name" saturn-after=", "></span> 

If there is a name, then the empty <span> is filled with name+", " to become:
<span saturn-replace="name" saturn-after=", ">Greg, </span>

Note there as there is no content in the original span we just add the desired content.

2. Body: <span saturn-replace=”title”>for</span>

If there is a “title” value available the “for is replaced.
In this case it becomes:

<span saturn-replace=”name”>Founder</span>

3. Button: <span saturn-replace=”name” saturn-after=”…”></span>

If there is a name, then the empty <span> is filled with name+”…” to become:
<span saturn-replace=”name” saturn-after=”…”>Greg…</span>

Saving URL Parameters

To save the URL parameters for later visits add “ssave=true” as a parameter.

Then the URL parameters will be added to the browser’s localStorage.

Both the localStorage values and the URL parameters will be used for personalization.

Note: Forms filled out also store the values locally.

Thus, if a visitor returns the personalization variable will stored in the browser and any personalization will then be shown.