Skip to content

Tracking clicks on forms #579

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Bernardo Srulzon (bernardosrulzon) wants to merge 5 commits into from
Closed

Tracking clicks on forms #579

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ab28d03
tracking mutable elements clicks on forms
bernardosrulzon Apr 14, 2017
dc2dc83
allowing a click event only once
bernardosrulzon Apr 15, 2017
8afd5f7
click -> focus
bernardosrulzon Apr 16, 2017
7d59341
don't track focus on checkbox or radio buttons
bernardosrulzon Apr 16, 2017
2205e2b
fixes tracking of change_form events
bernardosrulzon Apr 16, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions core/lib/core.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -786,7 +786,7 @@ export function trackerCore(base64: boolean, callback?: (PayloadData) => void) {
},

/**
* Track the value of a form field changing
* Track the value of a form field changing or receiving focus
*
* @param formId The parent form ID
* @param elementId ID of the changed element
Expand All @@ -800,7 +800,8 @@ export function trackerCore(base64: boolean, callback?: (PayloadData) => void) {
*
* @todo make `nodeName` enum
*/
trackFormChange: function (
trackFormFocusOrChange: function (

@BenFradet Ben Fradet (BenFradet) Nov 3, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we separate trackFormChange from trackFormFocus?

@bernardosrulzon Bernardo Srulzon (bernardosrulzon) Nov 5, 2017

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought it would make sense to keep them together as they send exactly the same data. But feel free to edit this PR as you see fit - it was just a quick implementation to help us identify which forms needed more attention

schema: string,
formId: string,
elementId: string,
nodeName: string,
Expand All @@ -811,7 +812,7 @@ export function trackerCore(base64: boolean, callback?: (PayloadData) => void) {
tstamp?: Timestamp): PayloadData {

return trackSelfDescribingEvent({
schema: 'iglu:com.snowplowanalytics.snowplow/change_form/jsonschema/1-0-0',
schema: 'iglu:com.snowplowanalytics.snowplow/' + schema + '/jsonschema/1-0-0',
data: removeEmptyProperties({
formId: formId,
elementId: elementId,
Expand Down
33 changes: 32 additions & 1 deletion core/tests/unit/core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -400,6 +400,37 @@ define([
compare(tracker.trackRemoveFromCart(sku, name, category, unitPrice, quantity, currency), expected);
},

"Track a form focus event": function () {
var formId = "parent";
var elementId = "child";
var nodeName = "INPUT";
var type = "text";
var elementClasses = ["important"];
var value = "male";

var inputJson = {
schema: 'iglu:com.snowplowanalytics.snowplow/focus_form/jsonschema/1-0-0',
data: {
formId: formId,
elementId: elementId,
nodeName: nodeName,
type: type,
elementClasses: elementClasses,
value: value
}
};

var expected = {
e: 'ue',
ue_pr: JSON.stringify({
schema: unstructEventSchema,
data: inputJson
})
};

compare(tracker.trackFormFocusOrChange('focus_form', formId, elementId, nodeName, type, elementClasses, value), expected);
},

"Track a form change event": function () {
var formId = "parent";
var elementId = "child";
Expand Down Expand Up @@ -428,7 +459,7 @@ define([
})
};

compare(tracker.trackFormChange(formId, elementId, nodeName, type, elementClasses, value), expected);
compare(tracker.trackFormFocusOrChange('change_form', formId, elementId, nodeName, type, elementClasses, value), expected);
},

"Track a form submission event": function () {
Expand Down
9 changes: 6 additions & 3 deletions src/js/forms.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,12 +119,14 @@ object.getFormTrackingManager = function (core, trackerId, contextAdder) {
/*
* Return function to handle form field change event
*/
function getFormChangeListener(context) {
function getFormChangeListener(event_type, context) {
return function (e) {
var elt = e.target;
var type = (elt.nodeName && elt.nodeName.toUpperCase() === 'INPUT') ? elt.type : null;
var value = (elt.type === 'checkbox' && !elt.checked) ? null : elt.value;
core.trackFormChange(getParentFormName(elt), getFormElementName(elt), elt.nodeName, type, helpers.getCssClasses(elt), value, contextAdder(context));
if (event_type === 'change_form' || (type != 'checkbox' && type != 'radio')) {
core.trackFormFocusOrChange(event_type, getParentFormName(elt), getFormElementName(elt), elt.nodeName, type, helpers.getCssClasses(elt), value, contextAdder(context));
}
};
}

Expand Down Expand Up @@ -162,7 +164,8 @@ object.getFormTrackingManager = function (core, trackerId, contextAdder) {
lodash.forEach(innerElementTags, function (tagname) {
lodash.forEach(form.getElementsByTagName(tagname), function (innerElement) {
if (fieldFilter(innerElement) && !innerElement[trackingMarker]) {
helpers.addEventListener(innerElement, 'change', getFormChangeListener(context), false);
helpers.addEventListener(innerElement, 'focus', getFormChangeListener('focus_form', context), false);
helpers.addEventListener(innerElement, 'change', getFormChangeListener('change_form', context), false);
innerElement[trackingMarker] = true;
}
});
Expand Down