Logic Hop & Caching

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.
</div>

When the today-is-friday condition is met the <div> containing Today is Friday! would be displayed.

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

Today is Friday!

Utility Classes

Data evaluation is handled very quickly and is typically a seamless experience for the user. As the evaluation occurs after the page loads there can be a brief flicker when content is rendered.

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 check the Enable Javascript Mode option
  2. Enter your domain name for the Javascript Referrer
  3. Check the Enable Javascript Variable Display option
  4. 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.

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

Due to WPEngine object caching and lack of PHP Session support, WPEngine users must install the free plugin WP Session Manager for Logic Hop to function properly.

Once WP Session Manager is activated WPEngine users should Enable Javascript Mode in their Logic Hop Settings.

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

Cloudflare

Cloudflare caching works with Logic Hop Javascript page tracking, goal track, conditions and data variables.

Your Cloudflare Page Rules should set and ordered as follows:

  • http://domain.com/wp-*
    • Browser Cache TTL: 4 hours
    • Cache Level: Bypass
    • Disable Apps
    • Disable Performance
  • http://domain.com/*
    • Browser Cache TTL: 4 hours
    • Cache Level: Cache Everything
    • Edge Cache TTL: 8 hours

If using ConvertKit add:

  • http://www.domain.com/convertkit=true
    • Cache Level: Bypass

If using Drip:

  • http://www.domain.com/drip_email=
    • Cache Level: Bypass

Note: Substitute your domain name for domain.com