Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Code for Testing Google Analytics Custom Events with Capybara and Poltergeist:
require "capybara"
require "capybara/cucumber"
require 'capybara/poltergeist'
require "json"
Capybara.app_host= 'localhost:4567'
Capybara.default_selector= :css
Capybara.default_driver = :poltergeist
include Capybara::DSL
group :test do
gem 'cucumber'
gem 'capybara'
gem 'poltergeist'
gem 'rspec'
Feature: Google Analytics Tracking
Scenario: Reading land line contract
Given I am on the "/contracts/land-line" page
And I scroll to the bottom
Then GA should get an event {"Contract", "scrollToEnd", "landLine"}
Given /^I am on the "([^"]*)" page$/ do |path|
visit "http://localhost:4567/#{path}?google-analytics-debug"
When /^I scroll to the bottom$/ do
page.execute_script "window.scrollBy(0,100000)"
Then /^GA should get an event {"([^"]*)", "([^"]*)", "([^"]*)"}$/ do |category, action, value|
ga_pushes.should include(["_trackEvent", category, action, value])
<!DOCTYPE html>
<script src="//"></script>
<script type="text/javascript">
// -- Code 1
var Example = Example || {};
Example.Analytics = Example.Analytics || {};
var _gaq = _gaq || [];
Example.Analytics.is_debug = window.location.href.match(/[\?&]google-analytics-debug([&#]|$)/);
$(function () {
if (Example.Analytics.is_debug) {
Example.Analytics.push = function () {
_gaq.push.apply(_gaq, arguments);
if (Example.Analytics.is_debug) {
var args = arguments[0];
$(function () {
var li = $("<li/>").text(JSON.stringify(args));
$("#google-analytics-debug ol").append(li);
Example.Analytics.push(['_setAccount', 'UA-INVALID']);
Example.Analytics.push(['_setDomainName', document.domain]);
Example.Analytics.push(['_setAllowLinker', true]);
(function () {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
<script type="text/javascript">
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
Example.Analytics.push(['_trackEvent', 'Contract', 'scrollToEnd', 'landLine']);
<style type="text/css">
body {
background-color: #F2F2F2;
#google-analytics-debug {
/* we hide the debug div by default */
font-family: NTA, 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bold;
display: none;
position: fixed;
top: 45px;
right: 10px;
padding: 10px;
min-width: 300px;
background: #ddd;
-moz-border-radius: 15px;
border-radius: 15px;
color: #666;
border: solid 2px #666;
#google-analytics-debug ol {
padding-left: 10px;
margin: 5px;
<div id="google-analytics-debug">
<%= erb :land_line_contract %>

Looks like you're missing this support file, which is mentioned in the blog post:

def ga_pushes
  ga_pushes = []
  all('#google-analytics-debug li').each do |li|
    ga_pushes << JSON.parse(li.text)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment