Hampus Persson hmps

Working with the ProspectEye dynamic tracking API

ProspectEye tracks all forms that are available in the DOM at page load. If you have a dynamic page where forms and / or inputs are inserted into the DOM after window.onLoad you can use our dynamic tracking API to make them trackable in ProspectEye. This is a short guide on how to accomplish that.

A fair warning

You should have a basic understanding of the DOM and of Javascript to be able to implement the dynamic tracking API properly. The examples given here are by now means exhaustive and you need to make sure that your Javascript will run on all platform and in all browsers that your site is intended for.

We will try to supply ample warnings where such are needed, but the responsibility of the actual implementation is yours.

Prerequisites

To use the dynamic tracking API you need two things:

	echo "Cloning grunt-template";
	git clone https://github.com/hampuspersson/grunt-template.git .;
	echo "Done!";
	echo "Installing components";
	cd assets/components;
	git clone https://gist.github.com/6024781.git sassylicious
	echo "Sassylicious installed into assets/components/sassylicious!";
	bourbon install;
	neat install;
	cd ..;

	<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js"></script>
	<script>
	if (typeof jQuery == 'undefined') {
	document.write(unescape("%3Cscript src='/js/jquery-2.0.0.min.js' type='text/javascript'%3E%3C/script%3E"));
	}
	</script>

	.media-obj {
	margin:10px;
	}

	.media-obj, .media-obj__body {
	overflow:hidden;
	_overflow:visible;
	zoom:1;
	}

	<img class="Logo" src="https://www.prospecteye.com/info/wp-content/themes/prospecteye/images/logo.png?new">
	<div class="Login">
	<form method="post">
	<label for="Login-email">E-mail</label>
	<input type="text" name="Login-email" id="Login-email" placeholder="Username" required="required" />
	<label for="Login-password">Password</label>
	<input type="password" name="Login-password" placeholder="Password" required="required" />
	<button type="submit" class="btn"><span>Log in</span></button>
	<a href="#" class="Login-forgotLink">I forgot my password</a>
	</form>

	var module = function() {
	'use strict';

	var _p = {}; // Prepare for our private API

	_p.privateFunction = function privateFunction() {

	}

	_p.anotherPrivateFunction = function removeClass() {

	/------------------------------------\
	PROSPECTEYE
	STYLE.CSS
	Version: 1.0.0
	Author: Hampus Persson
	@hmps_se
	\------------------------------------/

	@charset "UTF-8";

	/* http://meyerweb.com/eric/tools/css/reset/
	v2.0 \| 20110126
	License: none (public domain)
	*/

	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;