Using Logic Hop Logic Tags

Logic Tags allow you to easily add powerful conditional logic for content personalization with the click of a button.

Logic Tags Explained

Logic Tags are specially formatted snippets of code inserted into your WordPress posts or pages and replaced with dynamic content when the page is rendered.

When caching is active and Logic Hop Javascript Mode and Javascript Variables are enabled Logic Tags are automatically converted to HTML and rendered after the page is loaded via AJAX.

Logic Tags come in four varieties:

Conditional Logic Tags

Conditional Logic Tags display content when a Logic Hop Condition is true.

Conditional Logic Tags consist of two or more “blocks” of code which are place before and after the content you want to display. Almost any type of content or HTML can be placed between the blocks of code.

Logic Tags use the WordPress Slug of the Condition to specify the condition that will be evaluated. The easiest way to add Logic Tags to your content is to use the Logic Hop tool palette which will automatically format and insert the appropriate Logic Tags.

A basic Conditional Logic Tag appears as:

{% if condition: today-is-friday %}
Happy Friday!
{% endif %}

The Logic Tag depicted above would display the text “Happy Friday!” when the Condition “Today is Friday” is true.

Conditional Logic Tags also support ELSE statements such as:

{% if condition: today-is-friday %}
Happy Friday!
{% else %}
Sorry it's not Friday.
{% endif %}

The Logic Tag depicted above would display the text “Happy Friday!” when the Condition “Today is Friday” is true and “Sorry it’s not Friday” when the condition is false.

Conditional Logic Tags can also use ELSE IF statements such as:

{% if condition: today-is-friday %}
Happy Friday!
{% elseif condition: today-is-monday %}
Boo Monday!
{% else %}
At least it's not Monday. I wish it were Friday.
{% endif %}

The Logic Tag depicted above would display the text “Happy Friday!” when the Condition “Today is Friday” is true, “Boo Monday” when the Condition “Today is Monday” is true and “At least it’s not Monday. I wish it were Friday.” when both conditions were false.

By adding an exclamation point in front of the Condition Slug, Logic Tags check for when the Condition is not met. Such as:

{% if condition: !today-is-friday %}
Happy Friday!
{% endif %}

The Logic Tag depicted above would display the text “Happy Friday!” when the Condition “Today is Friday” is false.

Logic Tags are not just for text. Any type of HTML content can be included within a Conditional Logic Tag such as images, videos and forms.

Conditional Logic Tags cannot be nested inside another Conditional Logic Tag. The following code will not work:

{% if condition: today-is-friday %}
Happy Friday!
{% if condition: utm-code-technology %}
It's technology time!
{% endif %}
{% endif %}

Conditional Logic Tags can include Data Logic Tags as well as WordPress Shortcodes.

Multiple Conditional Logic Tags can be added to a page or post.

Goal Logic Tags

Goal Logic-Tags trigger a Logic Hop Goal when the page or post is loaded.

The Goal Logic Tags is a single block of code and appears as:

{{ goal: newsletter-signup }}

The Logic Tag depicted above would trigger the “Newsletter Signup” Goal for a user each time the page or post was loaded.

Multiple Goal Logic Tags can be added to a page or post.

Conditional Goal Logic Tags

Conditional Goal Logic Tags trigger a Logic Hop Goal when the page or post is loaded AND a specific Logic Hop Condition is true.

The Conditional Goal Logic Tag is a single block of code and appears as:

{{ goal: newsletter-signup | condition: today-is-friday }}

The Logic Tag depicted above would trigger the “Newsletter Signup” Goal for a user each time the page or post was loaded AND the Condition “Today is Friday” is true.

Multiple Conditional Goal Logic Tags can be added to a page or post.

Data Logic Tags

Data Logic Tags allow Logic Hop data to be displayed to the user within a page.

Data Logic Tags are a single block of code and appears as:

{{ var: Location.City }}

The Logic Tag depicted above would display the name of the City from which the current user was visiting.

How's the weather in {{ var: Location.City }}

The Logic Tag depicted above would display: How’s the weather in Ashburn?

Multiple Data Logic Tags can be added to a page or post. Data Logic Tags can also be nested within Conditional Logic Tags.

Data Logic Tags support additional attributes separated by the “pipe” character. The following Logic Tag would capitalize the first letter of the query string variable “firstname”:

{{ var: Query:firstname | case: first }}

Multiple attributes can be combined such as:

Howdy {{ var: Query:firstname | case: upper | default: Partner | append: ! }}

The Logic Tag about would:

  • Display the query string “firstname” in all capital letters with an ! after the name
    • ?firstname=wendy would display “Howdy WENDY!”
  • If no query string was present, “Howdy Partner!” would be displayed

Data Logic Tags Attributes:

  • var
    • Variable name – Example: Location.City
  • case
    • Change the case of the data output
    • Options:
      • lower
      • upper
      • first
      • every
  • default
    • Default value if no data exists
  • prepend
    • Adds text in front of the data
    • Use   for preceding spaces
  • append
    • Adds text after the data

Adding Logic Tags to Pages & Posts

The Logic Hop Tool Palette is the fastest and easiest way to add Logic Tags to your pages and posts.

Step 1

Click the Logic Hop button.

Step 2

Select the Condition, Goal or Data tab.

Step 3

Select your desired Logic Tag type.

Step 4

Click the corresponding Insert Logic Tag button.

Step 5

Adjust the Logic Tag within your content if necessary.

Congratulations! Your Logic Tag is now ready for use.