Skip to content

Commit b6d4471

Browse files
dominikmattdominikmatt
committed
Merge pull request #30 from dominikmatt/develop
form-bundle
2 parents 65e57d2 + adaf099 commit b6d4471

File tree

5 files changed

+203
-8
lines changed

5 files changed

+203
-8
lines changed

‎example/bundles/form.html

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title></title>
6+
</head>
7+
<body>
8+
<form data-form-name="Formular name" id="form">
9+
<div class="input-wrap">
10+
<label for="firstname">Firstname</label>
11+
<input type="text" name="firstname" id="firstname" />
12+
</div>
13+
<div class="input-wrap">
14+
<label for="Lastname">Lastname*</label>
15+
<input type="text" name="lastname" id="lastname" />
16+
</div>
17+
<label><input type="checkbox" name="newsletter1" data-form-newsletter data-form-newsletter-name="Newsletter 1" /> Signup Newsletter1</label>
18+
<label><input type="checkbox" name="newsletter2" data-form-newsletter data-form-newsletter-name="Newsletter 2" /> Signup Newsletter2</label>
19+
<br />
20+
<input type="submit" value="Submit" />
21+
</form>
22+
23+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
24+
<script src="/scripts/adapter/ua.js"></script>
25+
<script src="/scripts/tracking.js"></script>
26+
<script src="/scripts/eventBundle/formBundle.js"></script>
27+
28+
<script type="text/javascript">
29+
var tracking = new trackingJS({
30+
namespace: 'formBundle',
31+
type: 'ua',
32+
analyticsCode: 'UA-57009541-1',
33+
url: 'auto',
34+
pageview: false,
35+
anonymizeIp: true,
36+
debug: true,
37+
eventBundles: ['form']
38+
});
39+
40+
var $form = $('#form');
41+
42+
$('form').on('submit', function(event) {
43+
44+
if($form.find('#lastname').val() == '') {
45+
tracking.bundles.form.sendFailed($form);
46+
event.preventDefault();
47+
return false;
48+
}
49+
});
50+
tracking.bundles.form.newsletter.signonFailed('Newsletter1');
51+
tracking.bundles.form.newsletter.signoff('Newsletter1');
52+
53+
</script>
54+
</body>
55+
</html>

‎scripts/eventBundle/formBundle.js

+125
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
/**
2+
* form Bundle
3+
*
4+
* @author Dominik Matt <[email protected]>
5+
*/
6+
trackingJS.prototype.eventBundles.form = function() {
7+
this.bundleName = 'form';
8+
9+
/**
10+
* @method init
11+
*
12+
* @param tracking
13+
*/
14+
this.init = function init(t) {
15+
tracking = t;
16+
bindEvents();
17+
};
18+
19+
/**
20+
* @method bindDomEvents
21+
*/
22+
var bindEvents = function() {
23+
$( document ).delegate( 'form', 'submit', formSendHandler);
24+
};
25+
26+
/**
27+
* @method formSendHandler
28+
*
29+
* @param {jQuery} event
30+
* @returns {boolean}
31+
*/
32+
var formSendHandler = function(event) {
33+
var $form = $(event.currentTarget),
34+
data = getFormData($form);
35+
36+
trackNewsletterHandler($form);
37+
tracking.event(data.name, data.name + ' - Send success', 'Form: ' + data.name + ' send success');
38+
};
39+
40+
/**
41+
* @method trackNewsletterHandler
42+
*
43+
* @type {function(this:trackingJS.prototype.eventBundles)}
44+
*/
45+
var trackNewsletterHandler = function($form) {
46+
var $nlEl = $form.find('[data-form-newsletter]:checked'),
47+
data = getFormData($form);
48+
49+
if($nlEl.length > 0) {
50+
$nlEl.each(function(key, item){
51+
var $el = $(item),
52+
name = $el.data('form-newsletter-name');
53+
54+
if(!name || name == '') name = data.name;
55+
56+
this.newsletter.signup(name);
57+
}.bind(this));
58+
}
59+
}.bind(this);
60+
61+
/**
62+
* @method sendFailed
63+
*
64+
* @param $form
65+
*/
66+
this.sendFailed = function($form) {
67+
var data = getFormData($form);
68+
69+
tracking.event(data.name, data.name + ' - Send failed', 'Form: ' + data.name + ' send failed');
70+
};
71+
72+
/**
73+
* @constructor
74+
* @type {{signup: Function}}
75+
*/
76+
this.newsletter = {
77+
/**
78+
* @method signup
79+
*
80+
* @param name
81+
* @param callback
82+
*/
83+
signup: function(name, callback) {
84+
if(typeof callback != 'function') callback = function() {}
85+
tracking.event('Newsletter', 'Newsletter - Sign-Up', 'Newsletter: '+ name + ' sign-up success', null, callback);
86+
},
87+
88+
/**
89+
* @method signupFailed
90+
*
91+
* @param name
92+
* @param callback
93+
*/
94+
signupFailed: function(name, callback) {
95+
if(typeof callback != 'function') callback = function() {}
96+
tracking.event('Newsletter', 'Newsletter - Sign-Up', 'Newsletter: '+ name + ' sign-up failed', null, callback);
97+
},
98+
99+
/**
100+
* @method signoff
101+
*
102+
* @param name
103+
* @param callback
104+
*/
105+
signoff: function(name, callback) {
106+
if(typeof callback != 'function') callback = function() {}
107+
tracking.event('Newsletter', 'Newsletter - Sign-Off', 'Newsletter: '+ name + ' sign-off', null, callback);
108+
}
109+
};
110+
111+
/**
112+
* @method getFormData
113+
*
114+
* @param $form
115+
* @returns {{name: *}}
116+
*/
117+
var getFormData = function($form) {
118+
var data = {
119+
name: $form.data('form-name')
120+
};
121+
122+
return data;
123+
}
124+
125+
};

‎scripts/eventBundle/formBundle.md

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
#form-Bundle
2+
- send success (Event on Submit)
3+
formname* // formname* - Send success // Form: formname* send success*
4+
- send failed: (Event on method Call {sendFailed($form)})
5+
formname* // formname* - Send failed // Form: formname* send failed*
6+
7+
- Newsletter
8+
- signup (Event on Submit || Event on method Call {newsletter.signup(name, callback)})
9+
Newsletter // Newsletter - Sign-Up // Newsletter: name* sign-up success
10+
11+
- signup-failed (Event on method Call {newsletter.signupFailed(name, callback)})
12+
Newsletter // Newsletter - Sign-Up failed // Newsletter: name* sign-up failed
13+
14+
- signoff (Event on method Call {newsletter.signoff(name, callback)})
15+
Newsletter // Newsletter - Sign-Off // Newsletter: name* sign-off

‎scripts/eventBundle/linkBundle.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -40,16 +40,16 @@ trackingJS.prototype.eventBundles.link = function() {
4040
// phone
4141
if(/tel:/.test(href)) {
4242
this.tracking.event(
43-
'Phone',
44-
'Phone - Click',
45-
'Phone: ' + $el.text() + ' - Number: ' + href.replace('tel:', '')
43+
'Contact',
44+
'Contact - Click Tel',
45+
'Tel:' + href.replace('tel:', '')
4646
);
4747
//mailto
4848
} else if(/mailto:/.test(href)) {
4949
this.tracking.event(
50-
'Mail',
51-
'Mail - Click',
52-
'Mail: ' + $el.text() + ' - Mail: ' + href.replace('mailto:', '')
50+
'Contact',
51+
'Contact - Click Mail',
52+
'E-Mail: ' + href.replace('mailto:', '')
5353
);
5454
//external link
5555
} else if(external.test(href)){

‎scripts/eventBundle/linkBundle.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22
- external link (Event on Click)
33
External Link // External Link - Click // External Link: name* - Link: url*
44
- mailto: (Event on Click)
5-
Mail // Mail - Click // Mail: name* - Mail: address*
5+
Contact // Contact - Click Mail // Mail: mailaddress*
66
- tel: (Event on Click)
7-
Phone // Phone - Click // Phone: name* // Phone: name* - Number: phonenumber*
7+
Contact // Contact - Click Tel // Tel: phonenumber*

0 commit comments

Comments
 (0)