Using Logic Hop with Javascript

Logic Hop provides a number of ways to trigger Goals and implement Conditional logic. By default, Logic Hop functions via PHP at the pre-Page and Page Level.

For post-load events, Logic Hop includes a robust set of Javascript functions.

Javascript Conditions Explained

Logic Hop Javascript Conditions can be used to dynamically show and hide content after the page has loaded.

Javascript Conditions consist of HTML elements which can enclose almost any type of content. The HTML elements can be hidden or displayed when the page initially loads.

Conditions are evaluated via AJAX after the page loads and, if a condition is met, the following events can be trigged to modify the HTML element:

  • jQuery Effects
    • Show
    • Hide
    • Toggle
    • Fade In
    • Fade Out
    • Fade Toggle
    • Slide Down
    • Slide Up
    • Slide Toggle
  • Add CSS Classes
  • Remove CSS Classes

Anatomy of a Javascript Condition

Javascript Tool

  • Condition
    • The Condition to evaluate
  • Initial State
    • Display state of the HTML element – Hidden or Visible
  • Event
    • The jQuery Effect to trigged on the HTML element if the Condition is met
  • When
    • Trigger if the Condition is Met, or if the Condition is NOT Met
  • Add CSS Classes on Condition
    • Adds CSS classes to the HTML element when the condition is successfully evaluated
    • One, or more CSS classes separated by spaces
      • Example: warning, highlight, active
  • Removes CSS Classes on Condition
    • Removes CSS classes from the HTML element when the condition is successfully evaluated
    • One, or more CSS classes separated by spaces
      • Example: warning, highlight, active

Javascript Condition Code

<div class="logichop-js" data-cid="2" style="display: none;" data-event="fadeIn" data-not="true" data-css-add="one" data-css-remove="two">
... Content Here ...
</div>

  • div
    • Opening HTML element
    • Can be any valid HTML element
      • Example: span, p, ul, h1, h2
  • class
    • Must include “logichop-js” to be evaluated
    • Additional classes can be added as needed
  • data-cide
    • WordPress ID of the Logic Hop Condition
  • style
    • Set as “display: none;” to hide element on initial page load
    • Omit or leave blank to show element on initial page load
  • data-event
    • The jQuery Effect to trigged on the HTML element if the Condition is met
    • Omit or set to “none” for no event
  • data-css-add
    • Adds CSS classes to the HTML element when the condition is successfully evaluated
    • One, or more CSS classes separated by spaces
      • Example: warning, highlight, active
    • Omit or set as “” to add no CSS classes
  • data-css-remove
    • Removes CSS classes from the HTML element when the condition is successfully evaluated
    • One, or more CSS classes separated by spaces
      • Example: warning, highlight, active
    • Omit or set as “” to remove no CSS classes
  • /div
    • Closing HTML element
    • Can be any valid HTML element
      • Example: /span, /p, /ul, /h1, /h2

Adding Javascript Conditions to Pages & Posts

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

Step 1

Click the Logic Hop button.

Logic Hop Button

Step 2

Click the Javascript tab.

Step 3

Select the Condition.

Step 4

Click the Insert Javascript Condition button.

Javascript Tool

Step 5

Adjust the Javascript Condition <div></div> around your content as necessary.

Adjusting Javascript Code

Congratulations! Your Javascript Condition is now ready for use.

Note: Your Javascript Condition can be applied to any type of HTML element. In the WordPress Editor, change the <div></div> tag as needed.

Enable Javascript Variables

When using cache plugins, Logic Hop Shortcodes can NOT be used. The rendered output would be cached and stay the same for all users. As an alternate solution, Logic Hop provides Javascript functionality to display variables via AJAX after the page loads.

Javascript variable display is disabled by default. To enable, check the Enable Javascript Variable Display in the Logic Hop Settings.

Enable Javascript Variable Display

IMPORTANT NOTE: When Javascript Variable Display is enabled, all variables for the current user can be accessed during the active session via Javascript from the browser. In most instances this does not pose an issue, however with third party services this could expose data you wish to keep private, such as ConvertKit or Drip custom fields.

To disable individual variables, enter comma-separated variable names in the Disable Variables text area.

In the above example, the variables UID, ConvertKit.email_address and Drip.email would be disabled. All other variables would be available.

Click here for a list of variable names.

Displaying Variables with Javascript

Similar to Logic Hop Data Shortcodes, Javascript can be used to display data via AJAX after the page loads. This can be useful for websites using cache plugins.

Javascript Variable Display

Using the Logic Hop Data Tool, select the variable name under Variable Display Javascript, select the events that triggers once the data is loaded and click Insert Variable Javascript.

The first event option specifies how the variable will be inserted into the element. If a variable will be displayed multiple times on the same page, choose the replace option. If the variable will be inserted into an <input> element, choose the value option.

The second event option specifies how the element will be displayed once loaded.

The code is inserted into you page or post in the following format:

<span class="logichop-js" data-var="Location.City" data-type="html" data-event="show"></span>

The code listed above will display the user’s city within a <span> tag after the page loads. On page load, the <span> tag is set to display: none;. After the page loads, and if valid data is returned, the element is displayed using the selected event.

<h1 class="logichop-js" data-var="Location.City" data-event="show">Hello </h1>

Any valid HTML tag can be used, simply replace <span> with your desired tag. Data is appended to the element. The code listed above would display: Hello Ashburn.

NOTE: Javascript Variable Display must be enabled in the Logic Hop Settings to display data via Javascript.

Triggering Goals with Javascript

Create Goal

While the use case may vary, triggering a Goal with Javascript is quite simple. Each Logic Hop Goal has a unique ID which can be passed into the logichop_goal() function.

The Goal ID and function name can be found under the Javascript section on each individual Edit Goal page. The function is enclosed in a <script></script> and can be added as-is to most WordPress content areas.

The function can also be called directly from within Javascript callbacks or any other Javascript code. The example Goal in the above screenshot could be called as:

logichop_goal(2);

Once you’ve created a Goal, you can test it by calling the Javascript function from your browser’s web console. To see the results, check your Goal views from your Logic Hop Insights.

Note: Your Goal ID will be a different number.

Logic Hop Javascript Referrer & AJAX

Logic Hop’s Javascript functionality relies on AJAX. By default, the functionality is restricted to Javascript events called from your website – Calls from external websites are disabled.

The restriction is based on your domain name. The domain can be changed by visiting the Logic Hop settings and updating the Javascript Referrer field.

Important Note: Leaving the Javascript Referrer field blank will allow AJAX requests from all domains. It is recommended that you avoid allowing external requests unless necessary.