countly-sdk-web
Version:
Countly Web SDK
104 lines (93 loc) • 4.34 kB
HTML
<html>
<head>
<!-- Page styling here -->
<link rel='stylesheet' type='text/css' href='./style/style.css'>
<!--Countly script-->
<script type='text/javascript' src='../lib/countly.js'></script>
<script type='text/javascript'>
//initializing countly with params and passing require_consent config as true
const COUNTLY_SERVER_KEY = "https://your.server.ly";
const COUNTLY_APP_KEY = "YOUR_APP_KEY";
if (COUNTLY_APP_KEY === "YOUR_APP_KEY" || COUNTLY_SERVER_KEY === "https://your.server.ly") {
console.warn("Please do not use default set of app key and server url")
}
// initializing countly with params
Countly.init({
app_key: COUNTLY_APP_KEY,
url: COUNTLY_SERVER_KEY, //your server goes here
debug: true,
require_consent: true //this true means consent is required
});
//(optionally) provide custom feature tree if needed
Countly.group_features({
activity: ["sessions", "events", "views"],
interaction: ["scrolls", "clicks", "forms"]
});
//we can call all the helper methods we want, they won't record until consent is provided for specific features
Countly.track_sessions();
Countly.track_pageview();
Countly.track_clicks();
Countly.track_links();
Countly.track_forms();
Countly.track_errors({ jquery: "1.10", jqueryui: "1.10" });
//Consent Management logic should be implemented and controled by developer
//this is just a simply example of what logic it could have
if (typeof (localStorage) !== "undefined") {
var consents = localStorage.getItem("consents");
//checking if user already provided consent
if (consents) {
//we already have array with consents from previous visit, let's just pass them to Countly
Countly.add_consent(JSON.parse(consents));
}
else {
//user have not yet provided us a consent
//we need to display popup and ask user to give consent for specific features we want to track
//for example purposes, we will wait till user clicks "Give Consent" button
//to allow consent for "activity", "interaction", "crashes"
}
} else {
// Sorry! No Web Storage support..
// we can fallback to cookie
}
//user can then change his mind and opt out or opt back in
//so let's provide these function to UI
function giveConsent() {
//give consent to same 3 features
var response = ["activity", "interaction", "crashes"];
Countly.add_consent(response);
localStorage.setItem("consents", JSON.stringify(response));
}
function removeConsent() {
//remove consent from same 3 features
var response = ["activity", "interaction", "crashes"];
Countly.remove_consent(response);
localStorage.setItem("consents", JSON.stringify([]));
}
</script>
</head>
<body>
<!-- Header, banner etc. Top part of your site -->
<div id="header">
<h1>GDPR Features</h1>
<img id="logo" src="./images/logo.png">
</div>
<center>
<img src="./images/team_countly.jpg" id="wallpaper" />
<form method='post' name='comments' onsubmit="return false;">
<p><input type="text" name="message" value="Message Name"></p>
<p><textarea>Message</textarea></p>
<p><select>
<option value='option1'>Option1</option>
<option value='option2'>Option2</option>
<option value='option3'>Option3</option>
</select></p>
<p><input id="submit-form" type="submit" value="Submit"></p>
</form>
<p><button id="unhandled_error" onclick="unhandled_error()">Unhandled Error</button></p>
<p><a id="track_link" href='#link'>Dummy link</a></p>
<p><a href='https://countly.com/'>Countly</a></p>
<p><button onclick="giveConsent()">Give Consent</button></p>
<p><button onclick="removeConsent()">Remove Consent</button></p>
</center>
</body>
</html>