Using our jQuery Plugin for trying out new content on your web pages


I wanted to take a few minutes to show how easy it is to use the Conductrics service with our jQuery Plugin.

Getting Set Up

First, you’ll include the script file, just as you would for any jQuery plugin. Our file is called conductrics.jquery.js, which you should grab from Github and include somewhere after the script tag for jQuery itself, like so:

  • Replace the owner and apiKey codes with the ones from your Conductrics account (you can find these in the welcome email from us when you sign up for our service, or by signing into your account at console.conductrics.com).
  • Also, make up an agent code for your test. Each test should have a unique code, so we can tell your tests apart. (You can use letters, numbers, and dashes in the code.)

Trying Out New Content via a Simple Show / Hide Test

Let’s say you have some new content somewhere on your page. It might be a new “contact us” form, call to action, or banner image. It doesn’t really matter.

Just to keep it simple, let’s assume it’s a new image, included in your page HTML using a normal img tag. 

<img src="new-image.jpg">

To have Conductrics show the new image to some people, and keep it hidden for others, use an ordinary jQuery selector to select the desired img tag, then call our plugin’s toggle method, like so, like so:

<script>
  $('img[src*="new-image.jpg"]').conductrics('toggle')
</script>

Here’s what happens when the page loads in a user’s browser:

  1. The jQuery selector “finds” the image tag.
  2. The image is hidden initially while the Conductrics service is contacted.
  3. The plugin contacts the Conductrics service, which decides whether the image should be shown or hidden for this particular page view. At first, that’s just a random selection, but over time it will favor showing it if the image has proven to encourage conversion–or will favor hiding it if the image has proven to pull conversions down.
  4. When the plugin gets the show/hide decision from the Conductrics service, it shows the image or leaves it hidden as appropriate.

All of this happens very quickly. As far as the user is concerned, the image appears (or doesn’t appear) as a normal part of the over page loading process.

Of course, not just images

Because you can use any jQuery selector to indicate what you want to show or hide, you can test out just about any page content.

For instance, if you have some kind of new “callout” somewhere on the page (which might contain text, images, whatever), and it has new-callout as its ID, something like this:

<div id="new-callout">
  <h2>Check this out<h2>
  <p>Any content here...</p>
</div>

That means you can target the callout by its ID in the jQuery selector, which means testing it via show/hide would look like this:

<script>
  $('#new-callout').conductrics('toggle')
</script>

Again, because you’re using normal jQuery selectors, your selector can use CSS class names, which is handy when the “new” content you want to test out is sprinkled around in different parts of a page.

<img src="new-banner.png" class="new-ux">
...elsewhere...
<div class="new-ux">Some new content</div>
...elsewhere...
<a href="..." class="new-ux">Some new link</a>

To show or hide all of the new content, track its effectiveness, and automatically favor the new content if it proves to actually work well for your visitors, you would use the same basic ‘toggle’ code as shown earlier with a jQuery selector that finds everything tagged with the ‘new-ux’ class, like so:

<script>
  $('.new-ux').conductrics('toggle')
</script>

Beyond Showing and Hiding

This post kept it simple by just explaining how to show and hide content selectively.

But there’s a lot more that you can do with the plugin, especially if you know just a little bit of jQuery. It’s easy to do stuff like swap out content, decide whether to show interstitial overlays, decide whether to use animations, decide whether to use a new take on navigation, and more. Because you have the full power of jQuery available, you can create just about any kind of test you can dream up.

Take a look at the other methods available on the plugin’s Github page, and look for more blog posts here in the near future!


Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*