Logic Hop Javascript

Quick Reference

• Overview
• Logic Hop Javascript Referrer & AJAX
• Access Variables with Javascript
• Evaluate Conditions with Javascript
• Set/Unset Goals with Javascript
• Javascript Conditions
• Javascript Variables
• Page Rendered Callback
• Page Timeout Callback
• Javascript Helper Classes
• jQuery Display Effects

Overview

Logic Hop provides a number of Javascript functions which allow you to easily integrate Logic Hop data, conditions and goals into themes, plugins and with third party services.

Logic Hop’s Javascript Mode automatically renders Logic Tags and Conditional Widgets after page load to properly render personalized content on websites that employ caching.

Learn more about Logic Hop & caching.

Logic Hop Javascript Settings

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.

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

Access Variables with Javascript

Logic Hop data can be accessed via Javascript for use in themes and plugins.

Enable Javascript Variables

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

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

Disable Specific Variables

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.

Note: Variables are only disabled from access via Javascript. Variables remain accessible within Logic Hop and via PHP.

View the full list of variables.

Get a Variable – logichop_var()

Pass a variable name into the __logichop_var( variable name )__ function. If the variable is set, the value will be returned. If the variable is not set a null value is returned.

The following code will return the Views data object.

var views = logichop_var( 'Views' );
console.log( views );

Note: Variables accessed via logichop_var() are available in real-time only when Javascript Mode is disabled. When Javascript Mode is enabled use the logichop_var_promise() function.

View the full list of variables.

Get a Variable – logichop_var_promise()

When Javascript Mode is enabled variables should be accessed using the logichop_var_promise() function to ensure the most recently updated value is returned.

Pass a variable name into the logichop_var_promise( variable name ) function. A data object is returned with the status and value of the variable in the following format:

{
  success: true
  data_var: "Views"
  value: 4
}

The following code will return the Views data object:

ES5

logichop_var_promise( 'Views' ).then(
  function ( data ) {
    console.log( data );
    var value = data.value;
  }
);

ESNEXT

logichop_var_promise( 'Views' ).then(
  ( data ) => {
    console.log( data );
    const { value } = data;
  }
);

Note: A promise polyfill is required to use Javascript promises in IE11.

Out Variables – logichop_session_display()

Stored variables can be viewed when the Logic Hop setting Session Output is set to Enable Session Display.

With Session Display enabled, enter the following code into the Javascript Console to view all stored variables:

logichop_session_display().then( ( data ) => console.log( data ) );

Note: Session Output should only be used during testing and development – Make sure to disable this option for production websites.

Evaluate Conditions with Javascript

Conditions can be evaluated with Javascript for use in themes and plugins. Pass a condition slug or ID into the __logichop_condition( slug, true callback, false callback )__ function. If the condition is met the true callback is executed. If the condition is not met the false callback is executed.

The following example the true callback is executed if the condition today-is-friday is met. The false callback is executed if the condition is not met.

logichop_condition( 'today-is-friday', my_true_callback, my_false_callback );

function my_true_callback () {
  console.log( 'today-is-friday returned TRUE' );
}

function my_false_callback () {
  console.log( 'today-is-friday returned FALSE' );
}

Set/Unset Goals with Javascript

Goals can be set and unset with Javascript for use in themes and plugins. Pass a goal slug or ID into the __logichop_goal() or logichop_goal_delete()__ function.

The following example sets the newsletter-signup goal for the current user:

logichop_goal( 'newsletter-signup' );

The following example deletes the newsletter-signup goal for the current user:

logichop_goal_delete( 'newsletter-signup' );

Conditional Goals

Goals can be set and unset with Javascript when a specific condition is met or not met.

logichop_goal( GOAL SLUG, CONDITION SLUG, CONDITION NOT MET );

The following code will set the newsletter-signup goal for the current user when the condition is-newsletter-thank-you-page is met:

logichop_goal( 'newsletter-signup', 'is-newsletter-thank-you-page' );

The following code will delete the unqualified-lead goal for the current user when the condition lead-score-less-than-10 is not met:

logichop_goal( 'unqualified-lead, 'lead-score-less-than-10', true );

Javascript Conditions

Logic Hop Javascript Conditions can be used to dynamically show and hide content after the page has loaded. Logic Tags are automatically formatted for post-load rendering when Javascript Mode is enabled, however you opt to add the formatted code manually if desired.

Javascript Conditions consist of HTML elements which can enclose almost any type of content. The HTML elements can be hidden prior to displaying by adding the class logichop-condition.

The following code will fade in to display Happy Friday! when the condition today-is-friday is met:

<div class="logichop-js logichop-condition" data-cid="today-is-friday" data-event="fadeIn">
  Happy Friday!
</div>

NOTE: Javascript Mode must be enabled in the Logic Hop Settings to display conditions via Javascript.

Javascript Condition Code

• 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-cid
  • WordPress slug or ID of the Logic Hop Condition
• data-not
  • If true the content is displayed when the condition is not met
• 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 Display Effect trigged for 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

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

Javascript Variables

Javascript can be used to display data via AJAX after page load. Logic Tags are automatically formatted for post-load rendering when Javascript Mode is enabled, however you opt to add the formatted code manually if desired.

Javascript Variables consist of HTML elements and the variable value is inserted into the element after the page loads. The HTML elements are visible by default.

HTML Element Attributes

• div
  • Opening HTML element
  • Can be any valid HTML element
    • Example: span, p, ul, h1, h2, input, img
• class
  • Must include logichop-js to be evaluated
    • Additional classes can be added as needed
• data-var
  • Logic Hop variable name
  • Required
• data-type
  • replace
    • Element content replaced by variable using jQuery .html( var )
    • Default – When omitting data-type replace will be used
  • html
    • Element content replaced by variable using jQuery .html( var )
  • text
    • Element content replaced by variable using jQuery .text( var )
  • prepend
    • Variable prepended to element using jQuery .append( var )
  • append
    • Variable appended to element using jQuery .append( var )
• data-event
  • The jQuery Display Effect trigged for the HTML element when the value loads
  • Omit or set to “none” for no event
• data-case
  • Changes variable case
    • lower
      • Lowercase
    • upper
      • Uppercase
    • first
      • First word uppercase
      • words
      • First letter of every word uppercase
• data-spaces
  • Replace spaces with character
    • Example: data-spaces=”-“
• /div
  • Closing HTML element
  • Can be any valid HTML element
    • Example: /span, /p, /ul, /h1, /h2

Anchor Links, Images, & Inputs

For anchor links, images and form inputs Logic Hop will automatically update the HREF, SRC, or Value. The data-type attribute should be omitted for these elements.

Anchor Links

The value of the variable specified by data-var will replace the string #VAR# in the HREF attribute of the anchor.

The following code will properly render the UTM Code utm_content in the anchor link, replacing #VAR# with the value of utm_content:

<a href="https://stage.logichop.com/tutorial/#VAR#" data-var="utm_content">Click here to learn more</a>

Images

The value of the variable specified by data-var will replace the string #VAR# in the SRC attribute of the image.

The following code will properly render the UTM Code utm_content in the image source, replacing #VAR# with the value of utm_content in lowercase:

<img class="logichop-js" src="/wp-content/uploads/2019/10/industry_#VAR#.jpg" data-var="utm_content" data-case="lower">

Form Inputs

The value of the variable specified by data-var will replace the value of the input.

The following code will properly render the UTM Code utm_content as the input value:

<input class="logichop-js" type="text" name="content" value="" data-var="utm_content">

Examples

The following code will display the user’s city within a <span> tag after the page loads:

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

The following code will display the user’s city within a <h1> tag after the page loads:

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

The following code will display the user’s city within a text input tag after the page loads:

<input type="text" class="logichop-js" data-var="Location.City" data-type="input" value="">

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

Page Rendered Callback

Logic Hop provides the logichop_page_rendered(); function which is called after all Logic Hop Javascript events are completed.

The following function can be included in your Javascript and used to trigger custom events:

function logichop_page_rendered () {
  alert('Logic Hop page rendered callback');
}

Page Timeout Callback

Logic Hop provides the logichop_page_timeout(); function which is called if Logic Hop fails to load before the Anti-Flicker Timeout is reached. By default, this is set to 3 seconds. Learn more about the Anti-Flicker Timeout setting.

The following function can be included in your Javascript and used to trigger custom events in the unlikely event Logic Hop fails to load:

function logichop_page_timeout () {
  alert('Logic Hop page timeout callback');
}

Data Loaded Variable

With Javascript Mode enabled Logic Hop exposes the logichop.data.loaded boolean variable as another means to determine if Logic Hop data has been loaded. The value is false prior to data load and true once the data has been loaded.

Javascript Helper Classes

Logic Hop provides additional classes that can be used to minimize flicker when displaying conditions and loading data via Javascript. The classes hide the elements on the page using CSS and are displayed using jQuery after the page loads.

View the full details in the caching documentation.

jQuery Display Effects

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:

• Show
• Hide
• Toggle
• Fade In
• Fade Out
• Fade Toggle
• Slide Down
• Slide Up
• Slide Toggle