Go to rebrand

Experiments


Tracker

Experiments are a big part of consumeraffairs, to make them easier to implement in our site we decided to create a script that handles the click tracking of the experiments.

Including the script:

To include the script you just have to include it like:

<script src="{{ static("js/ca_styleguide_experiments.js") }}"></script>

data-track-goal

We have the ability to track a goal by adding the data-track-goal attribute to the element we want to track the goal on, you'll need to add the name of the goal you want to track as the value of the attribute.

Dynamic goal tracking

In case you need to add goals dynamically because some ajax or something similar happened, you can access the script through the window object like

window.CAGoalsTracker

The function you'll want to use to rebind elements to the goal tracker is _bindGoals, you can use it like:

window.CAGoalsTracker._bindGoals(container);

Example

<a href="" data-track-goal="global:goal_name:click">Link</a>

Example of Behavior

By clicking in the Link below you'll realize in the network tab that it's trying to make an ajax request to an url with the same name as the goal, it means it's working correctly, it'll fail here in styleguide because we're not using experiments here but in main site it should work with a real goal name added.

Click me

Example of Behavior with Multiple goals

By clicking in the link below you'll see that in the network tab there are two goals being sent instead of one which indicates that it supports multiple goals in one element.

Click me to see multiple goals