django-gwo v0.3 documentation

Tutorial

We want to get people to go to other blog posts. In our example blog app, the blog entries have next and previous post links at the top of the page and only at the top of the page. Does moving the links to the bottom of the blog entry increase the amount of times people click on them?

To test this question we are going to run a multivariate experiment with two sections (“Top Nav” and “Bottom Nav”). Each variation will have two variations: the “Original” and an alternate. The “Top Nav” Original variation will show the navigation and the alternate will not show the navigation. The “Bottom Nav” Original variation will not show the navigation and the alternate will show the navigation.

GWO will test all four possible combinations:

Name Top Nav Bottom Nav
Original showing not showing
Combo 2 showing showing
Combo 3 not showing showing
Combo 4 not showing showing

Starting out

Make sure that you have a local_settings.py file with settings for GWO_USER, GWO_PASSWORD, GWO_ACCOUNT.

  1. Create example experiment (link to those docs)
  2. If you go to the Google Website Optimizer site, you’ll see the experiment.
  3. Click on the Add Section link
  4. Name the section “Top Nav”
  5. Click on “Save and add another”
  6. Name the section “Bottom Nav”
  7. Click on “Save”

Original template state

GWO wants at least one “Original” variation and one additional variation for each section. Each variation contains the raw content that GWO will dynamically insert into the document. As a result, the section and variation can not contain anything dynamic on the page. This means that we are going to have to play some tricks to test what we want to test.

We are going to alter the template to include the blog post navigation, but use inline CSS to hide them. We will define the sections around the <p> tag.

First, let’s get the template to its “original” state.

  1. Open the blog/templates/blog/post_detail.html template, and copy the lines 12 - 19 (these lines here):

    <p class="other_posts">
      {% if object.get_previous_by_publish %}
      <a class="previous" href="{{ object.get_previous_by_publish.get_absolute_url }}" title="{% trans "View previous post" %}">&laquo; {{ object.get_previous_by_publish }}</a>
      {% endif %}
      {% if object.get_next_by_publish %}
      | <a class="next" href="{{ object.get_next_by_publish.get_absolute_url }}" title="{% trans "View next post" %}">{{ object.get_next_by_publish }} &raquo;</a>
      {% endif %}
    </p>
    
  2. Paste it just after (around lines 27 - 29):

    <div class="body">
      {{ object.body|safe }}
    </div>
    

    If you were to render a blog entry right now, the next and previous post links would appear above and below the entry.

  3. To make the bottom links disappear, we’ll add some inline CSS to the bottom <p> tag:

    <p class="other_posts" style="display: None">
    

    Now rendering a blog entry shows the links at the top, but not at the bottom. We have our “original” state:

    <div class="body">
      {{ object.body|safe }}
    </div>
    <p class="other_posts" style="display:None">
      {% if object.get_previous_by_publish %}
      <a class="previous" href="{{ object.get_previous_by_publish.get_absolute_url }}" title="{% trans "View previous post" %}">&laquo; {{ object.get_previous_by_publish }}</a>
      {% endif %}
      {% if object.get_next_by_publish %}
      | <a class="next" href="{{ object.get_next_by_publish.get_absolute_url }}" title="{% trans "View next post" %}">{{ object.get_next_by_publish }} &raquo;</a>
      {% endif %}
    </p>
    

Add in the template tags

  1. In line 3, change the {% load i18n comments %} to:

    {% load i18n comments gwo_tags %}
    
  2. We need to specify the experiment we are using. The {% set_experiment %} template tag does this for us. Due to the Django template language, the {% set_experiment %} value is only seen within its current {% block %}. For the sake of this tutorial, we’ll put everything within {% block content %}.

    On line 11, right after {% block content_title %}, insert::

    {% set_experiment “Example Experiment” %} {{ gwo_experiment.control_script|safe }}

    On line 26, right after {% block content %}, insert:

    {% set_experiment "Example Experiment" %}
    
  3. Just before the last {% endblock %}(around line 68), add:

    {{ gwo_experiment.tracking_script|safe }}
    

    to include another script that GWO needs.

Define the sections in the template

To define the sections, we will use the template tags {% gwo_start section %} and {% gwo_end_section %}.

  1. Around line 14, change <p class="other_posts"> to:

    {% gwo_start_section "Top Nav" %}<p class="other_posts">{% gwo_end_section "Top Nav" %}
    
  2. Around line 33, change <p class="other_posts" style="display: None"> to:

    {% gwo_start_section "Bottom Nav" %}<p class="other_posts" style="display: None">{% gwo_end_section "Bottom Nav" %}
    

Create Top Nav Original Variation

Title: Original

Content: <p class="other_posts">

Create Top Nav Alternate Variation

Title: Not Showing

Content: <p class="other_posts" style="display: None">

Create Bottom Nav Original Variation

Title: Original

Content: <p class="other_posts" style="display: None">

Create Bottom Nav Alternate Variation

Title: Showing

Content: <p class="other_posts">

Starting the experiment

Once everything is set up, you can start the experiment.

  1. Make sure all your template changes are deployed on your site
  2. In the admin, go to the GWO Experiment change list
  3. Click on Start in the Status field of this experiment

Finishing the experiment

After a period of time, Google Website Optimizer will inform you of their winning combination(s). You can stop the experiment.

  1. Click on Stop next to the experiment’s Running status in the Django admin.

Updating the templates

There could be more templates than 1 (includes and stuff)

Need the winning combination

compile the test url template into the tree and look for start and stop tags for sections and hopefully/possibly the file in which they reside

Parse each template and remove the sections and substitute the winning variation

print the output to a file/files to replace the existing templates