Jeffrey Zinn

Brandon Dove

nateconley

teamforleo

<p>Using the built-in custom fields in WordPress, you can insert Google Analytics Content Experiments code into any custom post type that supports custom fields.</p>
<p>Create a new custom field labeled “google_content_experiment_code” with the value being the code that you get from Google Analytics and click Save. This will insert the content experiment code into the head of your html document for the page or post specified.</p>


Simple Google Content Experiments

I tried 4 other similar plugins before this one. Each time, the Google experiments code wouldn't insert or inserted toward the bottom of the header, below the Google analytics code, which Google doesn't like. This one allowed the code to be inserted as a custom field and lo and behold it worked! Thank you so much.

Works great and is easy to setup

This plugin allows you to insert Google Analytics Content Experiments code into your site.

bmorenate

<p>A plugin for A/B split-testing HTML/CSS/DOM elements with javascript.  WordPress, JQuery, and Google Analytics are required to run experiments.</p>
<p>Important: This plugin is probably best suited for developers with advanced JavaScript and theme development skills.  It’s not overly complex, but if you’re not experienced with manipulating the DOM with JS, you probably won’t find this plugin useful.</p>
<ul>
<li>Test changes to your site with Javascript</li>
<li>Run up to 5 tests simultaneously (per visitor session)</li>
<li>Unlimited versions per test</li>
<li>Test info is saved in cookies so returning visitors see the same version of your site</li>
<li>Experiment data is sent to your google analytics account as custom variables</li>
<li>No AJAX. Test info and javascript code are served from static <code>ab.js</code> file</li>
<li>Experiment info/data is saved in the wordpress table <code>wp_options</code></li>
</ul>
<p>Supports both versions of Google Analytics, old “_gaq” and new Universal “ga()”</p>
<p>If you have <a href="https://support.google.com/analytics/answer/2790010?hl=en" rel="nofollow ugc">Universal Analytics</a> deployed on your site, you must provide a <a href="https://support.google.com/analytics/answer/2790010?hl=en" rel="nofollow ugc">Custom Dimension key</a>. <a href="https://support.google.com/analytics/answer/2709829?hl=en&topic=2709827&ctx=topic" rel="nofollow ugc">Follow these instructions</a> to setup a custom dimension. Then, eadd the dimension to the plugin settings.</p>
<p>Also, Universal Analytics users must use this (Custom Report)[https://www.google.com/analytics/web/template?uid=-O_F9EH4Qpil1mSt9l6U8A] to view test results (Universal Analytics only).</p>
<p>You can help to contribute to this project on github.com @ <a href="https://github.com/etan-nitram/split-testing" rel="nofollow ugc">WordPress AB Testing</a></p>
<h3>Requirements</h3>
<ul>
<li>General WordPress Installation</li>
<li>Google Analytics</li>
<li>jQuery – available to your wp-admin and client side</li>
<li>ability to set file and folder permissions on your server</li>
<li>Do not run more than 5 A/B tests per visitor session. Otherwise analytics data will be overwritten or lost</li>
<li>Cache control of file <code>js/ab.js</code>. This file is rewritten and updated often, so make sure you can update cached versions of this file.</li>
</ul>
<h3>Javascript</h3>
<ul>
<li>After your first test is created, you must globally link to the plugin file <code>js/ab.js</code> in your wordpress theme.</li>
<li>This plugin does not load any external libraries.</li>
<li><a href="https://raw.github.com/carhartl/jquery-cookie/" rel="nofollow ugc">jQuery Cookie</a> is included in the <code>js/ab.js</code> file.</li>
<li>You must load <a href="http://jquery.com/" rel="nofollow ugc">jQuery</a> in your wordpress theme to support the jQuery Cookie library.</li>
<li>You can load and use any other javascript library you require for your theme and use that library in your A/B tests to manipulate DOM elements during tests.</li>
</ul>
<h3>Google Analytics</h3>
<ul>
<li>This plugin uses google analytics to store test data.</li>
<li>Data stored is Test Name and Test Version</li>
<li>The combination of Test Name and one Test Version Name must be less than 128 characters. Otherwise <code>_setCustomVar()</code> will not except all data.</li>
<li><code>_setCustomVar()</code> is called just before firing <code>_trackEvent()</code> to store test data.</li>
<li>Custom Variable applied to track event <code>_gaq.push(['_setCustomVar', 'Slot', 'AB: ' + 'Test Name', 'Version Name', 2]);</code> Slot = Test Index</li>
<li>Event sent <code>_gaq.push(['_trackEvent', 'AB Testing', 'Test View', 'Test Name & Version']);</code></li>
<li>Goals: It is up to you, the webmaster or analytics admin, to set the test goals in your analytics admin settings.</li>
<li>Do not run more than 5 A/B tests per visitor session. Otherwise analytics data will be overwritten or lost</li>
</ul>
<p>Supports both versions of Google Analytics, old “_gaq” and new Universal “ga()”</p>
<p>If you have <a href="https://support.google.com/analytics/answer/2790010?hl=en" rel="nofollow ugc">Universal Analytics</a> deployed on your site, you must provide a <a href="https://support.google.com/analytics/answer/2790010?hl=en" rel="nofollow ugc">Custom Dimension key</a>. <a href="https://support.google.com/analytics/answer/2709829?hl=en&topic=2709827&ctx=topic" rel="nofollow ugc">Follow these instructions</a> to setup a custom dimension. Then, eadd the dimension to the plugin settings.</p>
<p>Also, Universal Analytics users must use this (Custom Report)[https://www.google.com/analytics/web/template?uid=-O_F9EH4Qpil1mSt9l6U8A] to view test results (Universal Analytics only).</p>
<p>Here’s further reading about Google Analytics <a href="https://developers.google.com/analytics/devguides/collection/gajs/gaTrackingCustomVariables" rel="nofollow ugc">Custom Variables</a>, <a href="https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide" rel="nofollow ugc">Analytics Events</a>, and <a href="https://support.google.com/analytics/answer/1032415?hl=en" rel="nofollow ugc">Analytics Goals</a>.</p>
<p>When a visitor views a page with a given test running, we use “Session Level” events to track the test view, because this ensures the test data will carry through the session to the conversion goal. From what I understand, “Page Level” custom variables will not work because we are firing an event after page load. Therefore, because the event is fired in the middle of a session, we must use session level custom variables <a href="http://www.kaushik.net/avinash/hits-sessions-metrics-dimensions-web-analytics/" rel="nofollow ugc">Read More Here</a></p>
<h3>A/B Split Test</h3>
<ul>
<li>All A/B tests are run by manipulating HTML/CSS DOM elements in your wordpress theme with javascript.</li>
<li>Depending on how many versions you are testing, all site traffic will be split evenly to show each test version.</li>
<li>When a test version is run, the javascript you defined in the plugin admin will execute and show that variation to the user.</li>
<li>No Server-Side scripting is used.</li>
<li>Any javascript library can be used in your A/B Test, given that you have loaded the library in your wordpress theme.</li>
</ul>
<h3>Running An A/B Split Test</h3>
<p>After you have installed the plugin, in the wordpress admin, navigate to <code>AB Testing</code> and click <code>Create New Test</code>. Enter Test Name, each test Version’s Name, and enter your custom javascript in <code>Version Code</code> and click <code>Save Test</code>. Be sure to include your <code>analytics=true</code> flag in all of your test version code snippets.</p>
<p>The combination of Test Name and one Test Version Name must be less than 128 characters. This is because <code>_setCustomVar</code> limits character length.</p>
<p>Make sure your server <code>/js/</code> directory and file <code>/js/ab.js</code> have permissions 0755 or 0775 so PHP can write output to the <code>ab.js</code> file.</p>
<p>When you are ready to start your test, click the checkbox <code>Active</code>, which will write your new test to the <code>js/ab.js</code> file and make your test live to your site visitors.</p>
<p>And don’t forget to update any cached versions of <code>js/ab.js</code>.</p>
<h3>Example Test Version Code</h3>
<p>First, decide what elements in your theme HTML you want to test.  Because your <code>js/ab.js</code> file is included globally into your theme, your A/B test code will manipulate any DOM elements that meet its conditions.</p>
<p>Therefore, do not run tests on general elements like <code><h1></code> or <code><button></code> unless you want to test these changes site wide.  It is better to be highly specific and target your DOM elements with IDs and Classes.</p>
<p>Also, you must remember to include the <code>analytics=true</code> flag in your javascript code.</p>
<h3>Example</h3>
<p>This is how we would test changing the color of <code><button class="test_button">Add To Cart</button></code> from green to orange.  Let’s assume our <code>button.test_button</code> is already green in our current theme.  Therefore, green is our control version.</p>
<p>However, since we don’t need to change the color for version 1, because it’s already green, we must still check to see if <code>$('button.test_button')</code> exists in the DOM, and if so, trigger the <code>analytics=true</code> flag to send our Custom Variable data to google analytics for the control version.</p>
<h4>Version 1: Javascript Code</h4>
<pre><code>if ( $('button.test_button').length > 0 ) {
    analytics = true;
}
</code></pre>
<h4>Version 2: Javascript Code</h4>
<p>In version 2 we are changing the color to orange. Once again, we must check if <code>$('button.test_button')</code> exists in the DOM.  If it does, we change the button color to orange and trigger the <code>analytics=true</code> flag.</p>
<pre><code>if ( $('button.test_button').length > 0 ) {
    $('button.test_button').css('background-color', 'orange');
    analytics = true;
}
</code></pre>
<h3>analytics = true;</h3>
<ul>
<li>do not override or re-declare the <code>analytics</code> variable. It must be available to the <code>ab.js</code> file scope and set to true.</li>
<li>It is up to you to correctly and logically set the <code>analytics=true</code> flag in your javascript code.</li>
<li>If you forget to set it to true, no test results (custom variables) will be sent to analytics.</li>
<li>If you set it to true in every test, without checking for test page level DOM elements, you will send invalid test data on every website page load.</li>
</ul>
<h3>Test Results</h3>
<p>You will find your test data located in Google Analytics Custom Variables Reporting.</p>
<p>Report Navigation: Audience -> Custom -> Custom Variables</p>
<h3>Custom Variables Report</h3>
<p>You should not have more than 5 tests running at one time.  Or more specifically, no more than 5 tests per visitor session, which is up to you to negotiate.</p>
<p>Depending on how many tests you have running at a given time, your tests will fall into 1 of 5 ‘slots’ in the Custom Variables Report, which are found at;<br />
    Custom Variable (Key 1) Custom Variable (Key 2) Custom Variable (Key 3) Custom Variable (Key 4) Custom Variable (Key 5)</p>


AB Testing with Javascript

AB test website content with javascript (no PHP scripting). Run AB experiments without redirecting users to a different URL

Simple Google Content Experiments vs AB Testing with Javascript