Quick Reference

Overview

By default, Logic Hop functions at the Pre-page Level and Page Level. This allows Logic Hop to fully integrate with the WordPress Engine in real-time.

Pre-page Level and Page Level functionality means conditions and goals are evaluated and tracked before a page is generated to enable redirects, page tracking, triggering goals and creating Conditional CSS. In-page elements, such as Conditional Widgets are evaluated and rendered suring page generation.

Cache Plugins such as WP Super Cache, W3 Total Cache and WP Rocket help speed up WordPress by caching pages. Put simply, this means pages are dynamically generated once. Subsequent page views bypass the WordPress Engine and visitors are served the static cached pages.

While caching is great for speed and performance, it bypasses Pre-page Level and Page Level processing and the default Logic Hop functionality.

Logic Hop has a Javascript Mode feature which allows the use of any cache Plugin while keeping the benefit of the page view tracking, goal tracking and page redirects.

Javascript Mode

Logic Hop Javascript Mode works by automatically converting Logic Tags, Logic Blocks and Logic Bars to content wrapped within specially formatted HTML <span> elements. After the page loads Logic Hop evaluates the data via AJAX and the appropriate content is rendered.

With Javascript Mode enabled, the following Logic Tag:

{% if condition: today-is-friday %}
  Today is Friday!
{% else %}
  It's only {{ var: Date.DayName }}? I wish today were Friday.
{% endif %}

Would be rendered as:

<div class="logichop-condition logichop-js"  data-hash="..." data-condition='...'>
  Today is Friday!
</div>
<div class="logichop-condition logichop-js"  data-hash="..." data-condition='...'>
  It's only <span class="logichop-variable logichop-js" data-var="Date.DayName"></span>? I wish today were Friday.


Without Javascript Mode is enabled, the following would be displayed when the today-is-friday condition is met:

Today is Friday!

Anti-Flicker Mode

To prevent page flicker or “jumping” on load, Anti-Flicker Mode hides the page until the container is ready, ensuring that users don’t see the initial page content prior to it being modified by Logic Hop.

To accomplish this, Logic Hop adds the CSS class .logichop-render-hide with the parameter opacity: 0 !important; to the <body> element. After the container is ready and Logic Hop has processed your personalizations the CSS class is automatically removed and the page is displayed.

The Anti-Flicker Timeout setting is the time in milliseconds until page is automatically displayed (in the unlikely event Logic Hop takes too long to load).

Example: 3000 would be 3 seconds

Anti-Flicker Mode is enabled by default when using the Cached Website Settings Quick Setting. If desired, you can disable it from the Logic Hop Settings page.

Utility Classes

If you prefer not to use Anti-Flicker Mode Logic Hop provides some optional utility classes that can be used to minimize flicker. The classes hide the elements on the page using CSS and are displayed using jQuery after the page loads.

Adding a utility class to a content area which contains Logic Tags or Logic Blocks will display the entire content area at once.

  • .logichop-slide-down
    • Sets element display property to none
    • Calls the jQuery .slideDown() method after page load
  • .logichop-fade-in
    • Sets element opacity property to 0
    • Calls the jQuery .fadeIn() method after page load

In the following example, the entire <div> will be hidden until the conditions and variables are rendered. After page load, the entire <div> slides down and is visible.

<div class="logichop-slide-down">
  {% if condition: today-is-friday %}
    Today is Friday!
  {% else %}
    It's only {{ var: Date.DayName }}? I wish today were Friday...
  {% endif %}
</div>

Enabling Javascript Mode

  1. In the Logic Hop > Settings under Quick Settings click Cached Website Settings option
  2. Enter your domain name for the Javascript Referrer
  3. Click Save Changes

Logic Hop Javascript Mode relies on AJAX. Click here for more information on how Javascript requests are handled.

Note: In order for caching to work properly, your caching system must bypass caching for the file /wp-admin/admin-ajax.php – Most caching systems have this bypass in place as a default.

Logic Hop Quick Settings

Page Render Settings / Selective Caching

With Javascript Mode enabled Logic Hop provides an option to specify Page Render Settings on a page-by-page and post-by-post basis. This allows you to disable Javascript Mode for specific pages.

The options for Page Render Settings are:

  • Logic Tags rendered after page load with Javascript
    • If the page is cached, Logic Tag output will never be cached
    • Default setting
  • Logic Tags rendered before page load with PHP
    • If the page is cached, Logic Tag output will be cached

Selecting the Logic Tags rendered before page load with PHP option will force the page or post to render all Logic Tags with PHP before the page loads. If caching is enabled, the rendered Logic Tags will be cached and displayed to subsequent page visitors until the cache is cleared.

The Logic Tags rendered before page load with PHP option is useful when using cache plugins that allow you to disable caching for specific pages. This will allow you to use a mix of pre-load content (after page load with Javascript) and post-load content (before page load with PHP) as for individual pages and posts as needed on your site.

Learn more about disabling caching for specific pages.

Classic Editor Page Render Settings

Classic Editor Page Render Settings

Note: Page Render Settings are visible on pages and posts only when Javascript Mode is enabled.

Gutenberg Editor Page Render Settings

Gutenberg Editor Page Render Settings

Note: Page Render Settings are visible on pages and posts only when Javascript Mode is enabled.

Caching and Page & Post Events

Page & Post events can be used with cache plugins when Javascript Mode is enabled. All events (Tracking, Goal on Load, Goal on Condition & Redirect on Condition) will be evaluated and processed by Javascript after the page is loaded.

Note: Page redirects will display the initial page prior to reloading. Reloads will be triggered by Javacsript.

Caching and Conditional CSS

Conditional CSS can be used with cache plugins. Conditional CSS rules are generated when the page is loaded and are not cached.

Caching and Widgets

Conditional Widgets can be used with cache plugins when Javascript Mode is enabled.

Caching and Javascript

Conditional Javascript can be used with cache plugins with or without Javascript Mode being enabled.

Disabling Caching for Specific Pages

Cache plugins typically provide settings to disable caching for specific pages. Disabling caching of a specific page will allow full Logic Hop functionality on that page without enabling Javascript Mode.

WP Super Cache

  • Go to WP Super Cache Advanced Settings
  • Click Advanced
  • Locate the box Accepted Filenames & Rejected URIs
  • Check which page(s) to exclude or enter the URL of the page(s) you wish to exclude.
    • Example: /about/

W3 Total Cache

  • Go to W3 Total Cache Performance > Page Cache
  • Click Advanced
  • Locate the box Never cache the following pages
  • Enter the URL of the page(s) you wish to exclude.
    • Example: /about/

WP Rocket

  • Go to WP Rocket Advanced Options
  • Locate the box Never cache the following pages
  • Enter the URL of the page(s) you wish to exclude.
    • Example: /about/

Wordfence

  • Go to Wordfence Performance Setup
  • Locate You can add items like URLs, cookies and browsers (user-agents) to exclude from caching
  • Add logichop as a Cookie Name Contains.
  • Enter the URL Matches for the page(s) you wish to exclude.
    • Example: /about/

WPEngine with Logic Hop

WPEngine runs PHP with PHP Sessions disabled. By default Logic Hop makes use of PHP Sessions to temporarily store bits of user data.

In order to use Logic Hop on WPEngine it is necessary to use Javascript Mode.

On the Logic Hop Settings under Quick Settings click the Cached Website Settings button.

Alternatively, you can apply the settings manually:

Enable Javascript Mode:

  • Visit the Logic Hop Settings
  • Check Enable Javascript Mode
  • Make sure the Javascript Referrer matches your domain
  • Check Enable Javascript Variable Display
  • Click Save Changes to save your settings

Cache Bypass

If you do not wish to use Javascript Mode, or if you prefer to disable caching for specific pages, you can put in a request with WPEngine support to bypass caching for your domain or for specific pages.

Delete Expired Transients

WPEngine has an automatic process which delete expired transients every 24 hours. To delete expired transients more frequently:

  • Visit the Logic Hop Settings
  • Select your desired interval under Delete Transients
  • Click Save Changes to save your settings

Please note the Logic Hop Delete Transients setting only deletes expired WordPress Transients set by Logic Hop.

Pantheon with Logic Hop

Pantheon runs PHP with PHP Sessions disabled. By default Logic Hop makes use of PHP Sessions to temporarily store bits of user data.

In order to use Logic Hop on Pantheon it is necessary to use Javascript Mode and enable WordPress Transients to temporarily store user data.

On the Logic Hop Settings under Quick Settings click the Host Without PHP Sessions button.

Alternatively, you can apply the settings manually:

Enable Javascript Mode:

  • Visit the Logic Hop Settings
  • Check Enable Javascript Mode
  • Make sure the Javascript Referrer matches your domain
  • Check Enable Javascript Variable Display
  • Click Save Changes to save your settings

Enable WordPress Transients:

  • Visit the Logic Hop Settings
  • Check Enable WordPress Transients
  • Click Save Changes to save your settings

To enable transients Logic Hop overrides the default PHP Session functionality. This does make a call to the PHP start_session() function, however PHP Sessions are not used and the PHPSESSID cookie is ignored.

Learn more about Logic Hop Transients.

Delete Expired Transients

To automatically delete expired transients:

  • Visit the Logic Hop Settings
  • Select your desired interval under Delete Transients
  • Click Save Changes to save your settings

Please note the Logic Hop Delete Transients setting only deletes expired WordPress Transients set by Logic Hop.

Cache Bypass

If you do not wish to use Javascript Mode, or if you prefer to disable caching for specific pages, you can bypass caching for your entire domain or for specific pages by following the steps outlined on Pantheon’s Bypassing Cache with HTTP Headers page.

Enable PHP Sessions

Optionally, PHP Sessions can be enabled using the free plugin WordPress Native PHP Sessions. If using, make sure WordPress Transients are disabled in Logic Hop.

Pantheon & Cookies

Pantheon utilizes a Varnish Cache as well as an Object Cache to reduce server calls and increase page load speeds. As part of their caching strategy cookies set using the Set-Header method are blocked. As of version 3.2.3 Logic Hop uses Javascript to set cookies which allows Logic Hop cookies to work with the Pantheon environment.

Learn more about how Pantheon handles cookies.

Pantheon & Caching

When Pantheon Caching is activated Pantheon users should Enable Javascript Mode in their Logic Hop Settings. Pantheon has a variety of options available for caching, including the ability to disable caching for specific pages. Learn more about Pantheon Caching.

Pantheon Stripped Query Strings

Pantheon strips and caches certain query string values, including UTM values. The values of these variables are replaced with PANTHEON_STRIPPED. These values are available to Logic Hop when Javascript Mode is enabled. Learn more about Pantheon Stripped query strings.

Cache Settings for Specific Hosts & Services

Hosting companies and services that provide caching typically provide settings to bypass certain pages, query strings and cookies. Known settings are listed below.

At minimum, Cookies and PHP Sessions must be available and the file /wp-admin/admin-ajax.php must not be subject to caching (this is the default for most services).

If your hosting provider does not support PHP Sessions you will need to install the free plugin WP Session Manager.

If integrating with ConvertKit or Drip, specific query string values must also be bypassed:

  • ConvertKit:
    • convertkit=true
  • Drip:
    • drip=true

LiteSpeed Cache

LiteSpeed Cache works with Logic Hop Javascript Mode.

To configure LiteSpeed to work with Logic Hop:

  • Enable Javascript Mode for Logic Hop
  • On the LiteSpeed Cache plugin Settings Page
    • Click on the Tuning tab
    • In the JS Excludestext area add:
      • ajax-methods.min.js
    • Purge your LiteSpeed Cache

Cloudflare

Cloudflare caching works with Logic Hop Javascript Mode.

Your Cloudflare Page Rules should set and ordered as follows:

If using ConvertKit add:

If using Drip:

Note: Substitute your domain name for domain.com

Cloudflare IP Addresses

In some instances Cloudflare will replace visitors’ IP Address leading to inaccurate geolocation. Place the following code in your functions.php file when using Cloudflare and Logic Hop geolocation:

/**
 * Override IP address to handle Cloudflare IP address
 * when using Logic Hop geolocation
 */
function logichop_override_cloudflare_ip ( $client_IP ) {
  if ( isset( $_SERVER ) && isset( $_SERVER['HTTP_CF_CONNECTING_IP'] ) ) {
     return $_SERVER['HTTP_CF_CONNECTING_IP'];
  }
  return $client_IP;
}
add_filter( 'logichop_get_client_ip', 'logichop_override_cloudflare_ip' );