-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
170 lines (158 loc) · 5.65 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!doctype html>
<html>
<head>
<title>Trackiffer - Easy GA Event tracking</title>
<style type="text/css">
body {
color: #555;
font-family: sans-serif;
font-size: 16px;
line-height: 1.5;
margin: 60px 80px;
}
.row {
overflow: hidden;
}
.section {
border-bottom: 1px solid #eee;
padding: 15px 20px 40px;
}
input {
width: 300px;
}
pre {
background: #eee;
font-size: 12px;
padding: 10px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script type="text/javascript" src="trackiffer.js"></script>
<!--
<script type="text/javascript" src="trackiffer.min.js"></script>
-->
<script type="text/javascript">
_gaq = [['_setAccount', 'UA-111111111-1']];
</script>
</head>
<body title="Trackiffer's Body">
<div class="section">
<h2>Bookmarklet</h2>
<p>Want to test trackiffer out on a page? Drag this link to your toolbar: <a href="javascript:window.trackiffer_debug = true;(function(){document.body.appendChild(document.createElement('script')).src='https://raw.github.com/averyvery/trackiffer/master/trackiffer.js';})();">Trackiffer</a></p>
</div>
<div class="section">
<h2>Debug</h2>
<p>To see the debugger in action, <a href="#" id="debug">click here.</a> or visit <a href="#trackiffer_debug">index.html/#trackiffer_debug</a> and refresh the page.</p>
</div>
<div>
<div class="section basic">
<h3>Basic Event Data</h3>
<p>
<a class="text" href="#">Link clicks are tracked</a>
<span title="The title of the span">Non-link clicks can be tracked</span>
</p>
<form action="http://example.com" class="simple" method="get">
<p>Form submissions and can be tracked</p>
<button type="submit">Submit</button>
</form>
<p>
<div href="#" class="retweet">You can track several GA event types, like "_trackSocial"</div>
</p>
<pre>
trackiffer({
'.basic a' : ['_trackEvent', 'Link', 'Click', '{{text}}'],
'.basic span' : ['_trackEvent', 'Span', 'Click', '{{title}}'],
'.basic form' : ['_trackEvent', 'Form', 'Submit', 'Email Signup'],
'.basic select' : ['_trackEvent', 'Select', '{{name}}', '{{value}}'],
'.basic .retweet' : ['_trackSocial', 'Twitter', 'Retweet', '{{href}}', window.location.href]
});</pre>
</div>
<div class="section advanced">
<h3>Advanced Data and Selection</h3>
<p>
<a href="http://example.com/" class="b-text">
Using some JS, you can set this link to record just the <b>bold text</b>
</a>
</p>
<p>
<a href="http://example2.com/track/" class="url-parse">With fancy selectors, you can track this "example.com" link...</a>
</p>
<p>
<a href="http://subdomain.example2.com/track/" class="url-parse">...and this "subdomain.example.com" one...</a>
</p>
<p>
<a href="http://example2.com/no-track/" class="url-parse">...but not this "example.com/no-track" one.</a>
</p>
<pre>
trackiffer({
'.advanced a.b-text' : ['_trackEvent', 'Advanced Link', 'Click', function(N){ return N.find('b').text(); }],
'.advanced a[href*="example2.com"]:not([href*="example2.com/no-track"])' :
['_trackEvent', 'Advanced Link', 'Click', '{{href}}']
});</pre>
</div>
<div class="section delay">
<h3>100ms Delays</h3>
<p>
<a href="http://example.com">Outbound links and forms automatically delay 100ms, then forward users to href or action</a>
</p>
<form action="http://example.com" class="simple" method="get">
<button type="submit">Submit</button>
</form>
<pre>
trackiffer({
'.delay a' : ['_trackEvent', 'Delayed Link', 'Click', 'Should forward user 100ms after click'],
'.delay form' : ['_trackEvent', 'Delayed Link', 'Submit', 'Should submit 100ms after click']
});</pre>
</div>
<div class="section">
<div class="config">
<h3>Configuration</h3>
<p>
<a href="http://example.com" data-event="Click" class="outbound">You can also configure outbound links NOT to delay and forward.</a>
</p>
</div>
<script type="text/javascript">
var delegate_link = '<a href="#" data-event="Delegated Click" class="delegated">\'delegate\' items that don\'t exist at execution time.</a>';
var delegate_form = '<form action="http://example.com" data-event="Delegated Submit"><input type="submit" /></form>';
</script>
<pre>
trackiffer({
'.config a.outbound' : {
delay : false,
rule : ['_trackEvent', 'Normal link', '{{data-event}}', 'Should _not_ forward user user 100ms after click']
},
'.config' : {
delegate : 'a.delegated',
rule : ['_trackEvent', 'Delegated link', '{{data-event}}', 'Should detect links added to the page after execution time']
},
});
trackiffer({
'.config' : {
delegate : 'form',
type : 'submit',
rule : ['_trackEvent', 'Delegated form', '{{data-event}}', 'Should delegate a form submit']
}
});
setTimeout(function(){
var delegate_link_example =
'<a href="http://example.com" data-event="Delegated Click" class="delegated">\'delegate\' items that don\'t exist at execution time.</a>';
var delegate_form_example =
'<form action="http://example.com" data-event="Delegated Submit"><input type="submit" /></form>';
$('.config p').before(delegate_link);
$('.config p').before(delegate_form);
}, 1000);
</pre>
</div>
</div>
<script type="text/javascript">
$('pre').each(function(){
eval(this.innerHTML);
});
jQuery('#debug').click(function(event){
event.preventDefault();
trackiffer('debug');
});
</script>
<script type="text/javascript" src="http://www.google-analytics.com/u/ga_debug.js"></script>
</body>
</html>