Consider the following scenario: a visitor accesses your Latest Posts page, where he sees the following posts:


  • Post 1
  • Post 2
  • ...
  • Post 10


As she scrolls down through your list of latest posts, older posts are automatically retrieved from your WordPress server (probably using an AJAX call) and are appended at the end of the list:

  • ...
  • Post 10
  • AJAX Post 11
  • AJAX Post 12. Title: How To Increase Your Conversion Rate
  • AJAX Post 13
  • ...
  • AJAX Post 20


Let's assume that Post 12 is being A/B tested. In particular, there's the following Headline Test:

  • Original Headline: How To Increase Your Conversion Rate
  • Alternative Headline: How To Increase Your Revenues with A/B Testing

If your website uses this dynamic content loading, you may have noticed that Nelio A/B Testing is not working. That is, all your visitors see the original Headline, even though there are some visitors who should see the alternative Headline. The problem is that, during an AJAX request, Nelio A/B Testing does not know which alternative has to be shown to a visitor.



AJAX Requests in WordPress


In this section we'll briefly review how AJAX requests work in WordPress. If you want to know more about them and how they should be implemented, read AJAX in Plugins at the Codex.


A typical AJAX request has two parts:

  1. The JavaScript trigger, that performs the request to your WordPress server when a certain action occurs in your visitors' browser. These actions include scrolling down or clicking on a "Load More" button, for instance.
  2. The WordPress callback, which, depending on the specific parameters of the request from 1, will return the result.

For instance, the JavaScript trigger is a function that may look like this:


<script type="text/javascript">
function loadMorePosts() {
  var data = {};
  data.action = 'load_posts';
  data.current_page = 1;
  jQuery.ajax({
    url: 'http.//example.com/wp-admin/admin-ajax.php',
    type: 'POST',
    data: data,
    success: function(result) {
      // Do something with the result
    }

  });
}
</script>



The loadMorePosts function performs an AJAX request using jQuery and receives the result generated by the WordPress callback. Note that the request is directed to the admin-ajax.php interface.


On the other hand, the callback will look like as follows:


<?php

add_action( 'wp_ajax_nopriv_load_posts', 'load_posts_callback' );

function load_posts_callback() {

  // Retrieve the posts properly and initialize the $result

  echo $result;

  die();

}



In order to fix the A/B Testing issue, you'll have to edit both parts: the JavaScript and the callback. Moreover, you'll have to take into account the result type of an AJAX request:

  1. String (which may or may not include HTML tags) that will be directly inserted into the page.
  2. JSON object.

Let's see how to fix the issue in both cases.

Note. The AJAX request has to be a POST request. If it's not, it won't work.


How To Load Alternative Content on an HTML-based AJAX Request

First, you'll have to make sure that the object data includes all the information about the alternatives your visitor is supposed to see. This can be easily done by adding the following piece of code (in bold):


<script type="text/javascript">

function loadMorePosts() {

  var data = {};

  try {

    data = NelioAB.checker.generateAjaxParams();

  }

  catch (e) {}

  data.action = 'load_posts';

  data.current_page = 1;

  jQuery.ajax({
    url: 'http.//example.com/wp-admin/admin-ajax.php',

    type: 'POST',

    data: data,
    
success: function(result) {
      // Do something with the result
    }

  });

}

</script>



Then, you'll have to edit the callback as follows:


function load_posts_callback() {

  // Retrieve the posts properly and initialize the $result

  // (HTML String)

  echo $result;

  do_action( 'nelioab_footer' );

  die();

}


The do_action directive will print, right after the actual result, a set of script block, which are necessary for tracking your visitor.



How To Load Alternative Content on a JSON-based AJAX Request


This solution is similar to the previous one, but it requires some additional work. First, you'll have to edit the JavaScript request as follows:


<script type="text/javascript">

function loadMorePosts() {

  var data = {};

  try {

    data = NelioAB.checker.generateAjaxParams();

  }

  catch (e) {}

  data.action = 'load_posts';

  data.current_page = 1;

  jQuery.ajax({
    url: 'http.//example.com/wp-admin/admin-ajax.php',

    type: 'POST',

    data: data,
    
success: function(result) {

      try {

        var nab = result.nelioab;

        result = result.result;

        NelioAB.helpers.processAjaxResult(nab);

      }

      catch (e) {}
      // Do something with the result
    }

  });

}

</script>



This time, not only we include information about which alternatives your visitor is supposed to see, but we also pre-process the result object which, as we shall see in the following, has been modified by our plugin during the callback:


function load_posts_callback() {

  // Retrieve the posts properly and initialize the $result

  // (JSON object)

  header( 'Content-Type: application/json' );

  $resultapply_filters( 'nelioab_ajax_result', $result );

  echo $result;

  die();

}


As you can see, we modify the $result JSON object applying one of Nelio A/B Testing's filters. Note the filter is applied right before the result is printed.