Skip to content

Track clicks when element inside of <a href> tag is clicked. #54

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

Merged
merged 12 commits into from
Oct 7, 2020
Merged

Track clicks when element inside of <a href> tag is clicked. #54

Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
f390df8
make match recursive
fleitz Jul 6, 2020
9c09b13
fix link matching
fleitz Jul 6, 2020
3adad87
ensure matched element is used for event properties
fleitz Jul 6, 2020
c335a71
include element that was clicked
fleitz Jul 7, 2020
08dfca6
use this instead of monkey patching the Event
fleitz Oct 7, 2020
714a488
fix spacing
fleitz Oct 7, 2020
572794a
rename elementProperties to eventProperties, pass element as this
fleitz Oct 7, 2020
63b6075
rename elementProperties to eventProperties, pass element as this
fleitz Oct 7, 2020
a511e5e
remove extraneous target = this, fix spacing
fleitz Oct 7, 2020
68f6b12
change var to let
fleitz Oct 7, 2020
b124294
fix space
fleitz Oct 7, 2020
33baf69
change event to e
fleitz Oct 7, 2020
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
37 changes: 22 additions & 15 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,17 +100,23 @@ function matchesSelector(element, selector) {
element.webkitMatchesSelector;

if (matches) {
return matches.apply(element, [selector]);
if (matches.apply(element, [selector])) {
return element;
} else if (element.parentElement) {
return matchesSelector(element.parentElement, selector)
}
return null;
} else {
log("Unable to match");
return false;
return null;
}
}

function onEvent(eventName, selector, callback) {
document.addEventListener(eventName, function (e) {
if (matchesSelector(e.target, selector)) {
callback(e);
let matchedElement = matchesSelector(e.target, selector);
if (matchedElement) {
callback.call(matchedElement, e);
}
});
}
Expand Down Expand Up @@ -253,13 +259,12 @@ function cleanObject(obj) {
}

function eventProperties(e) {
Copy link
Owner

Choose a reason for hiding this comment

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

No change needed on this line.

let target = e.target;
return cleanObject({
tag: target.tagName.toLowerCase(),
id: presence(target.id),
"class": presence(target.className),
tag: this.tagName.toLowerCase(),
id: presence(this.id),
"class": presence(this.className),
page: page(),
section: getClosestSection(target)
section: getClosestSection(this)
});
}

Expand Down Expand Up @@ -418,25 +423,27 @@ ahoy.trackView = function (additionalProperties) {
};

ahoy.trackClicks = function () {
// Example: <a id="link" href="/foo"><p id="text">Foo</p></a>
// e.target on Chrome (and likely every other browser) is not a#link tag but p#text
// onEvent will callback with this = a#text and e.target = p#text
onEvent("click", "a, button, input[type=submit]", function (e) {
let target = e.target;
let properties = eventProperties(e);
properties.text = properties.tag == "input" ? target.value : (target.textContent || target.innerText || target.innerHTML).replace(/[\s\r\n]+/g, " ").trim();
properties.href = target.href;
let properties = eventProperties.call(this, e);
properties.text = properties.tag == "input" ? this.value : (this.textContent || this.innerText || this.innerHTML).replace(/[\s\r\n]+/g, " ").trim();
properties.href = this.href;
ahoy.track("$click", properties);
});
};

ahoy.trackSubmits = function () {
onEvent("submit", "form", function (e) {
let properties = eventProperties(e);
let properties = eventProperties.call(this, e);
ahoy.track("$submit", properties);
});
};

ahoy.trackChanges = function () {
onEvent("change", "input, textarea, select", function (e) {
let properties = eventProperties(e);
let properties = eventProperties.call(this, e);
ahoy.track("$change", properties);
});
};
Expand Down