Skip to content

F
foresight
Commit 69ef6e42 by James Ooi
Options

Implement basic functionality

parent c454d2e9
Showing with 152 additions and 3 deletions
index.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-93571739-3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-93571739-3');
</script>
</head>
<body>
<div style="background-color: #FAFAFA; min-height: 100vh; display: flex; justify-content: center; align-items: center">
<a href="https://google.com" class="btn btn-primary" data-track="clicks;landing : all models : series select">
Google
</a>
</div>
<div
style="background-color: #FFFFFF; min-height: 100vh; display: flex; justify-content: center; align-items: center"
data-track-view="views;landing : view : facebook"
data-track="landing : section : facebook"
>
<a href="https://facebook.com" class="btn btn-secondary" data-track="clicks;landing" data-track:non-interaction>
Facebook
</a>
</div>
</body>
<script src="build/foresight.js"></script>
<script>
Foresight.track();
</script>
</html>
\ No newline at end of file
package.json
......@@ -11,5 +11,8 @@
"babel-preset-stage-2": "^6.24.1",
"webpack": "^4.16.3",
"webpack-cli": "^3.1.0"
},
"dependencies": {
"scrollmonitor": "^1.2.4"
}
}
src/foresight.js
console.log('Hello world!');
\ No newline at end of file
/**
* Foresight Event Tracking Library
* @author James Ooi <james.ooi@forefront.com.my>
* @license MIT
*/
import ScrollMonitor from 'scrollmonitor';
/**
* Foresight is an event analytics tracking library that allows for declarative
* and elegant event tracking.
*/
class Foresight {
static track() {
if (gtag === undefined) {
throw 'The `gtag` function is undefined. Has Google Analytics been loaded yet?';
}
Foresight._setupClickTrackers();
Foresight._setupViewTrackers();
}
static _setupClickTrackers() {
const elements = [].slice
.call(document.querySelectorAll('[data-track]'))
.filter(el => el.getAttribute('data-track-ready') === null)
.forEach(el => {
el.addEventListener('click', e => Foresight._onClick(el, e));
el.addEventListener('auxclick', e => Foresight._onClick(el, e)); // also track middle clicks
el.setAttribute('data-track-ready', '');
});
}
static _setupViewTrackers() {
const watchers = [].slice
.call(document.querySelectorAll('[data-track-view]'))
.filter(el => el.getAttribute('data-track-view-ready') === null)
.map(el => {
const watcher = ScrollMonitor.create(el);
watcher.enterViewport(() => {
Foresight._onView(el);
watcher.destroy();
});
el.setAttribute('data-track-view-ready', '');
return watcher;
});
}
static _onClick(element) {
const eventString = element.getAttribute('data-track');
if (eventString === null || eventString === '') {
console.warn('Insufficient tracking arguments provided.', element);
return;
}
const eventStringArr = eventString.split(';');
let [ eventCategory, eventName, eventLabel ] = eventStringArr;
let isNonInteraction = element.getAttribute('data-track:non-interaction') !== null;
// If only one argument is provided, then the argument is the action
if (eventStringArr.length === 1) {
eventName = eventCategory;
eventCategory = undefined;
}
gtag('event', eventName, {
'event_label': eventLabel,
'event_category': eventCategory,
'non_interaction': isNonInteraction,
});
}
static _onView(element) {
const eventString = element.getAttribute('data-track-view');
if (eventString === null || eventString === '') {
console.warn('Insufficient tracking arguments provided.', element);
return;
}
const eventStringArr = eventString.split(';');
let [ eventCategory, eventName, eventLabel ] = eventStringArr;
let isNonInteraction = !(element.getAttribute('data-track-view:is-interaction') !== null);
// If only one argument is provided, then the argument is the action
if (eventStringArr.length === 1) {
eventName = eventCategory;
eventCategory = undefined;
}
gtag('event', eventName, {
'event_label': eventLabel,
'event_category': eventCategory,
'non_interaction': isNonInteraction,
});
}
}
module.exports = Foresight;
webpack.config.js
......@@ -37,7 +37,8 @@ const config = {
minimizer: [new UglifyJsPlugin({
include: /\.min\.js$/
})],
}
},
devtool: false,
}
......
yarn.lock
......@@ -2701,6 +2701,10 @@ schema-utils@^0.4.4, schema-utils@^0.4.5:
ajv "^6.1.0"
ajv-keywords "^3.1.0"
scrollmonitor@^1.2.4:
version "1.2.4"
resolved "https://registry.yarnpkg.com/scrollmonitor/-/scrollmonitor-1.2.4.tgz#823d04cc1574aa3b71de7cc70ef91ebe633344a0"
semver@^5.3.0, semver@^5.5.0:
version "5.5.0"
resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment