Implementing Tests on Your Website¶

This section covers the different ways to implement A/B tests on your WordPress website using BoastPress AB Testing.

Using the Shortcode Method¶

The primary way to implement tests is through shortcodes. Shortcodes allow you to place test content anywhere that supports WordPress shortcodes.

Basic Shortcode Usage¶

The basic syntax for the AB Testing shortcode is:

[ab_test test="123"]

Where 123 is the ID of your test. You can find this ID in the test list or on the test edit page.

Shortcode Placement Options¶

You can place the shortcode in various locations:

In Posts and Pages¶

1. Edit the post or page where you want to display the test
2. Position your cursor where the test content should appear
3. Insert the shortcode: [ab_test test="123"]
4. Update the post or page

In WordPress Templates¶

To add a test to a WordPress template file:

<?php echo do_shortcode('[ab_test test="123"]'); ?>

Place this code in your theme's template files where you want the test content to appear.

In Widgets¶

You can add shortcodes to text widgets:

1. Go to Appearance > Widgets
2. Add a Text or Custom HTML widget to your desired widget area
3. Insert the shortcode: [ab_test test="123"]
4. Save the widget

In Page Builders¶

Most page builders support shortcodes:

1. Add a Text or HTML element in your page builder
2. Insert the shortcode: [ab_test test="123"]
3. Save your changes

AJAX vs. Non-AJAX Implementation¶

BoastPress AB Testing offers two methods for delivering test content:

Non-AJAX Mode¶

In non-AJAX mode, test content is generated when the page is loaded:

• Pros: Faster initial page load, no JavaScript dependency
• Cons: Not compatible with caching plugins or CDNs

This is the default mode and works well for sites without caching.

AJAX Mode¶

In AJAX mode, test content is loaded after the page has rendered:

• Pros: Compatible with caching plugins and CDNs
• Cons: Slight delay in content appearance, requires JavaScript

To enable AJAX mode:

1. When creating or editing a test, check the "Use AJAX" option
2. Or enable it globally in A/B Tests > Settings

When to Use AJAX Mode¶

Use AJAX mode when:

• Your site uses caching plugins (WP Super Cache, W3 Total Cache, etc.)
• Your site uses a CDN (Cloudflare, MaxCDN, etc.)
• You need consistent test delivery across cached pages

Performance Considerations¶

AJAX mode adds an additional HTTP request for each test on the page. For high-traffic sites, consider:

• Limiting the number of tests per page
• Using session-based testing to reduce server load
• Implementing proper browser caching for AJAX responses

Cache Compatibility¶

How AJAX Mode Works with Caching¶

When using AJAX mode:

1. The page is loaded from cache with placeholder elements for test content
2. JavaScript makes an AJAX request to get the appropriate test variation
3. The placeholder is replaced with the actual test content

This ensures that each user gets the correct test variation, even when pages are cached.

Configuring Caching Plugins¶

For optimal performance with caching plugins:

WP Super Cache¶

1. Go to Settings > WP Super Cache
2. Under "Advanced", ensure "Don't cache pages for known users" is checked
3. Click "Update Status"

W3 Total Cache¶

1. Go to Performance > Page Cache
2. Under "General", ensure "Don't cache pages for logged in users" is checked
3. Click "Save Settings"

Other Caching Plugins¶

Most caching plugins have similar options. Look for settings related to: - User-specific caching - Dynamic content handling - AJAX/JavaScript compatibility

Advanced Implementation Techniques¶

Dynamic Test Selection¶

You can dynamically select which test to display based on page context:

<?php
// Determine which test to show based on page
$test_id = is_front_page() ? 123 : 456;
echo do_shortcode("[ab_test test=\"$test_id\"]");
?>

Conditional Test Display¶

You can conditionally display tests based on user roles or other factors:

<?php
// Only show test to logged-in users
if (is_user_logged_in()) {
    echo do_shortcode('[ab_test test="123"]');
} else {
    echo 'Default content for non-logged in users';
}
?>

Multiple Tests on One Page¶

You can include multiple tests on a single page:

<div class="header">
    [ab_test test="123"]
</div>

<div class="content">
    [ab_test test="456"]
</div>

<div class="footer">
    [ab_test test="789"]
</div>

Each test operates independently, with its own tracking and variations.

Troubleshooting Implementation Issues¶

Test Not Displaying¶

If your test isn't displaying:

1. Verify the test is active in the admin dashboard
2. Check that the test ID in the shortcode is correct
3. Ensure the test has at least one version
4. Confirm that one version is set as the default

AJAX Loading Issues¶

If test content isn't loading in AJAX mode:

1. Check browser console for JavaScript errors
2. Verify that your theme properly enqueues jQuery
3. Ensure your server allows AJAX requests
4. Check for JavaScript conflicts with other plugins

Content Flicker in AJAX Mode¶

If you notice content flickering when using AJAX mode:

1. Go to A/B Tests > Settings
2. Adjust the "AJAX Loading Delay" setting
3. Consider adding custom CSS to control the transition

In the next section, we'll explore advanced configuration options for your A/B tests.