How to Use Smart Tags in OptinMonster

Do you want to customize the text on your campaigns to be specific to the visitor? With OptinMonster’s incredibly powerful Smart Tags feature, its easy! Follow this guide to learn how to easily customize the content of your campaigns to each user.

REQUIREMENT: You’ll need at least a Pro subscription to use Smart Tags.

How to Add a Smart Tag

Smart tags allow you to add dynamic text to your campaign. For example, it can show a visitor’s name or the current day of the week automatically using specially formatted placeholder text. You can use the predefined smart tags or define your own custom smart tags.

Step 1 – Add Text Element

To use smart tags, add or edit a text element in the Builder.

Edit Text Element

Step 2 – Add Smart Tag

Click the braces to choose a predefined smart tag.

Tag Braces

Then, choose the smart tag you wish to use. It will be added to the text field editor.

Date Smart Tag

NOTE: You can also use custom smart tags by utilizing the smart tag format.
Step 3 – Configure Default Test (Optional)

The smart tag format allows you to use a pipe character to set a default value in case the tag cannot find the necessary information.

Tag with Default

Once the campaign is live, the smart tag will be replaced with the dynamic value.

Live Tag Replaced


Smart Tag Format

Here is an example of a smart tag.

{{form_first_name|Visitor}}

Every smart tag must start with two opening braces and end with two closing braces. This allows us to determine which content should be replaced inside of your campaign.

{{form_first_name|Visitor}}

The first value should be either a predefined smart tag or the name of a custom variable you have defined. In our example above, we use the smart tag form_first_name. In our example, we have referenced this by using “form_first_name” as the first string in the smart tag.

The word in green inside your smart tag should match the name of a custom variable you have defined or a predefined smart tag.

{{form_first_name|Visitor}}

Right after the word “form_first_name” in green, we see a pipe: |. The pipe character ( | ) allows us to define a default value should the value not exist.

This is especially helpful if no variable was found, or the value set for the variable ended up being empty. This is completely optional. If you leave out a pipe and default value, OptinMonster will simply replace the smart tag with an empty string.

{{form_first_name|Visitor}}

The text in blue, Visitor, is the default value that is used if the variable form_first_name cannot be found on the page or if the value of the variable form_first_name is empty.


Smart Tags

Smart tags can be used without manually creating custom variables. There are several smart tags available.

Date/Time
  • {{day}}: The current day of the week
  • {{date}}: The current date
  • {{year}}: The current year (e.g. “2019”)
  • {{month}}: The current month (e.g. “January”)
Geographical Data
  • {{city}}: The visitor’s city
  • {{state}}: The visitor’s current state if it exists
  • {{region}}: The visitor’s current region which would include states, provinces, etc.
  • {{region_code}}: The current region’s abbreviation (e.g. “CA” for “California”)
  • {{postal_code}}: The same as {{zip}}
  • {{zip}}: The visitor’s current zip code
  • {{country}}: The visitor’s current country
  • {{country_code}}: The current country’s abbreviation (e.g. “US” for “United States”)
Form Data
  • {{form_name}}: The full name submitted in the name field
  • {{form_first_name}}: The first name submitted in the name field
  • {{form_last_name}}: The last name submitted in the name field if a last name was submitted
  • {{form_email}}: The email address submitted in the form
  • {{form_phone}}: The phone number submitted in the phone field
IMPORTANT: The form data can only be used once the form is submitted and can only use data from fields that were on the form. For example, in order to use the name tag, the name field must be enabled.
Customer Journey
  • {{page_url}}: The URL of the current page
  • {{referrer_url}}: The URL of the previous page
  • {{pages_visited}}: The number of pages the user has visited
  • {{time_on_site}}: The amount of time the user has spent on the site in milliseconds
  • {{visit_timestamp}}: The current timestamp
  • {{page_title}}: The title of the current page

Custom Smart Tags

NOTE: This feature is for advanced users. Due to the custom nature of custom smart tags, at this time we do not provide support for this feature.

Custom smart tags are defined by you and contain any particular type of data you want.

Smart tags support 3 different methods of defining custom smart tags (in order of priority): query arguments, cookies and JavaScript variables (advanced).

Query Arguments

The simplest way to get started with custom smart tags is to use query arguments to define your custom smart tags. If you want to target a custom tag called “name” you can add a query argument to your URL, like this:

http://yourwebsite.com/?name=Thomas

In the URL above, we have defined a query argument name with the value of Thomas. OptinMonster will inspect your URL and if it finds a match, it will replace your smart tag with the value of your query argument.

NOTE: Due to being reserved, certain terms, such as “name”, can return a 404 error when used with WordPress. So, if you have a WordPress site, then you will not be able to use certain words to pass lead data. This is because WordPress has reserved these words for their core functionality.

Here is a complete list of Reserved WordPress Terms.

It is best to add a prefix to the reserved terms to avoid getting an unexpected 404 error in WordPress. Like this:

http://yourwebsite.com/?fname=Thomas
Cookies

Smart tags also supports the use of cookies as well. A cookie is a small piece of data sent from a website and stored in the user’s web browser while the user is browsing. Using our example above, much like how query arguments work, OptinMonster will search for a cookie called name and replace the merge tag with the value of that cookie.

In the image below, you can see there is a cookie called name with a value of Thomas Griffin. With the example above, our merge tag would be replaced with Thomas Griffin in your campaign.

Name Cookie

JavaScript Variables

For our advanced users, you can also take advantage of our complete JavaScript API for working with custom smart tags.

Once the OptinMonster JavaScript API loads on the page and is ready to start processing, it will immediately check the page for a particular function: OptinMonsterCustomVariables. If that function is available, OptinMonster will call it and pass along the app instance as a function parameter, giving you access to the smart tags methods.

Below are two examples of ways in which you can define the function callback for the API.

Function Callback

Variable Function Callback

At the most basic level, the app method setCustomVariable takes two parameters: a key and a value. At this time, both the key and value must be strings.

You can add as many different custom smart tags as you would like. In the examples above, we have added the custom tag name and given it the value of Thomas.

The examples above can be added anywhere on your page, but we recommend placing it just before the closing </body> tag of your theme.

In the next section, we will look at an examples of how you can use the custom smart tags in your campaign.

Using Smart Tags with the JavaScript API

Let’s consider a real world example for smart tags. Supposed that you are creating a campaign to get people to sign up for your upcoming webinar. Customers and visitors alike are welcome to join, but you want to give your customers a bit more of a personal touch. In this case, you want to reference your customers by their first name in your campaign, and you want to reference visitors with the word “there”.

Here’s what the campaign might look like in the OptinMonster Builder:

Add merge tag

As you can see, we’ve added the merge tag {{name|there}} into the tagline of the campaign. Now that the campaign is ready for action, I’ve gone ahead and defined the custom variable name on my site to by using this code:

Now, when the campaign loads on the page, the text will show the name.

Text with Name

Since the custom tag name was defined with the value of Thomas, the tag {{name|there}} has been replaced with our custom tag value.

If the custom variable definition is removed completely from the page, the text will show the default value instead.

Default Text

Since no custom tag was found on the page, the default value was used instead.

You can also remove the default value altogether.

Merge Tag No Default

If you also remove the custom smart tag definition from the page, OptinMonster will not find a custom tag called name anywhere.

In this case, OptinMonster will simply replace the merge tag with an empty space. Once the campaign loads on the page, it will look like this:

Campaign with No Text

The smart tag has been replaced with an empty space.

API Methods

Smart tags come with a few public methods that you can access inside of your function callback.

setCustomVariable(key, value)

getCustomVariable(key)

getCustomVariables()

hasCustomVariable(key)

hasCustomVariables()

deleteCustomVariable(key)

Looking for more ways to extend the functionality of OptinMonster? Be sure to check to out our JavaScript events API!