You can use the JavaScript tracking client to track any application that supports JavaScript: for example, websites!
To find the tracking code for your website, follow the steps below:
- log in to Factoreal with your admin account
- click on the “settings” (cog icon) in the bottom left menu
- click on “Website” menu under “Integrations” tab
- click on “Copy Script” for the website you wish to track.
- Paste the JavaScript tracking code into your pages, just after the opening <body> tag (or within the <head> section)
The tracking code looks as follows:
<!-- Factoreal -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(["setCookieDomain", "*.store.combifam.com"]);
_paq.push(["setDoNotTrack", true]);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function () {
var u = "https://webanalytics.factoreal.com/";
_paq.push(['setTrackerUrl', u + 'js/tracker.php']);
_paq.push(['setSiteId', '60']);
var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
g.async = true;
g.src = u + 'js/tracker.php';
s.parentNode.insertBefore(g, s);
})();
</script>
<noscript>
<p><img src="https://webanalytics.factoreal.com/js/tracker.php?idsite=60&rec=1" style="border:0;" alt="" /></p>
</noscript>
<!-- End Factoreal Code -->
This code might look a bit strange to those of you familiar with JavaScript, but that is because it is made to run asynchronously. In other words, browsers will not wait for the js/tracker.php file to be downloaded to show your page.
Track an interaction semi-automatic
Interactions with content blocks are usually tracked automatically as soon as a visitor is clicking on it. Sometimes you might want to trigger an interaction manually for instance in case you want to trigger an interaction based on a form submit or a double click. To do so call the method trackContentInteractionNode(domNode, contentInteraction).
<script>
formElement.addEventListener("submit", function () {
_paq.push(["trackContentInteractionNode", formElement, "submittedForm"]);
});
</script>
Tracking content impressions and interactions manually
You should use the method trackContentInteraction(contentInteraction, contentName, contentPiece, contentTarget) to track an interaction on you website.
The below example shows how to track a click on a button, but the same principle can be applied to any block on the site that you want track clicks on.
<script>
const button = document.querySelector("#button_to_be_tracked");
button.addEventListener("click", function () {
_paq.push(["trackContentInteraction", "click", "Click Me", "contextual text", "https://www.example.com"]);
});
</script>
Tracking content impressions when it scrolls into view
You should use the method trackContentImpression(contentName, contentPiece, contentTarget) to track an impressions on specific blocks on your website.
The below example shows how to track a carousel when it scrolls into view.
<script>
var ignoreEvent = false;
document.addEventListener("DOMContentLoaded", () => {
let observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
// This is to prevent duplicate events.
if (ignoreEvent) return;
if (entry.isIntersecting) {
_paq.push(["trackContentImpression", "View", "Carousel"]);
// We set this is true so we don't register the same event twice.
ignoreEvent = true;
}
});
},
{
root: null,
rootMargin: "0px",
threshold: 1.0,
},
);
let target = document.querySelector("#track_carousel");
observer.observe(target);
});
</script>
Manually trigger events
By default, Factoreal tracks page views when the JavaScript tracking code loads and executes on each page view.
However, on modern web applications, user interactions do not necessarily involve loading a new page. For example, when users click on a JavaScript link, or when they click on a tab (which triggers a JS event), or when they interact with elements of the user interface, you can still track these interactions with Factoreal.
To track any user interaction or click with Factoreal, you can manually call the JavaScript function trackEvent(). For example, if you wanted to track a click on a JavaScript menu, you could write:
<a href="#" onclick="_paq.push(['trackEvent', 'Menu', 'Freedom']);">Freedom page</a>
Social Login tracking
This can also be used to track any other custom event.
For Example, on Google Login you can add this event to the Factoreal CDP
<script>
function handleCredentialResponse(CredentialResponse){
// decodeJwtResponse() is a custom function defined by you
// to decode the credential response.
const responsePayload = decodeJwtResponse(response.credential);
_paq.push(['trackEvent', 'Login', 'google', responsePayload.email]);
}
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: handleCredentialResponse
});
google.accounts.id.prompt();
};
</script>
Note: Please look at how to Enable User ID Tracking for JavaScript Client for better tracking.
