django-gwo v0.3 documentation
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 |
Make sure that you have a local_settings.py file with settings for GWO_USER, GWO_PASSWORD, GWO_ACCOUNT.
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.
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" %}">« {{ 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 }} »</a>
{% endif %}
</p>
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.
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" %}">« {{ 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 }} »</a>
{% endif %}
</p>
In line 3, change the {% load i18n comments %} to:
{% load i18n comments gwo_tags %}
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 %}.
{% set_experiment “Example Experiment” %} {{ gwo_experiment.control_script|safe }}
On line 26, right after {% block content %}, insert:
{% set_experiment "Example Experiment" %}
Just before the last {% endblock %}(around line 68), add:
{{ gwo_experiment.tracking_script|safe }}
to include another script that GWO needs.
To define the sections, we will use the template tags {% gwo_start section %} and {% gwo_end_section %}.
Around line 14, change <p class="other_posts"> to:
{% gwo_start_section "Top Nav" %}<p class="other_posts">{% gwo_end_section "Top Nav" %}
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" %}
To let Google Website Optimizer know that a conversion has occurred we need to use a script. At the bottom of the template, just before the {% endblock %}, around line 70, add:
{% trackclick_script %}
The trackclick_script template tag renders the template gwo/trackclick_script.html, which a snippet of JavaScript that looks like:
<script type="text/javascript" charset="utf-8">
function trackclick(that){
try {
{{ conversion_script|safe }}
setTimeout('document.location = "' + that.href + '"', 100);
}catch(err){}
}</script>
The trackclick() function will change the location of the browser to the URL passed to it. The function also allows us to do a few things before it changes. The {{ conversion_script|safe }} variable is set to the appropriate pieces of the conversion script passed back to us from Google.
The trackclick() function is designed to work regardless of whether there is currently an active experiment.
We need to call the trackclick script from each <a> tag that counts as a successful conversion. The template tag {% trackclick %} renders gwo/trackclick.html which looks like:
onclick="trackclick(this);return false;"
By rendering a template, it allows you to add additional commands or functions easily.
We need to modify the two sets of <a> tags by adding {% trackclick %} within the tag. The first one is around line 16 and also around line 35:
<a class="previous" href="{{ object.get_previous_by_publish.get_absolute_url }}" {% trackclick %} title="{% trans "View previous post" %}">« {{ object.get_previous_by_publish }}</a>
The next set is around line 19 and also around line 38:
| <a class="next" href="{{ object.get_next_by_publish.get_absolute_url }}" {% trackclick %} title="{% trans "View next post" %}">{{ object.get_next_by_publish }} »</a>
Once everything is set up, you can start the experiment.
After a period of time, Google Website Optimizer will inform you of their winning combination(s). You can stop the experiment.
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