JavaScript Tracking Client

Last updated 29 days ago

Was this helpful?

JavaScript Tracking Client

You can use the JavaScript tracking client to track any application that supports JavaScript, including websites!

To find the tracking code for your website, follow the steps below:

Click Settings
Click Integrations
Click Website

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&amp;rec=1" style="border:0;" alt="" /> </p> </noscript> <!-- End Factoreal Code -->

If you're familiar with JavaScript, this code may look strange. That's due to the fact its 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 clicks on them. In certain cases, you may want to trigger an interaction manually. For instance, there may be a case where you want to trigger an interaction based on a form submission 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 your website. The example below shows how to track a click on a button; however, the same principle can be applied to any block on the site that you want to 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 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, Satisfi Labs tracks page views when the JavaScript tracking code loads and executes 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>

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>

Don't hesitate to get in touch with our team at me-support@satisfilabs.com with any questions you may have!

Last updated 29 days ago

Was this helpful?

You can use the JavaScript tracking client to track any application that supports JavaScript, including websites!

To find the tracking code for your website, follow the steps below:

Click Settings
Click Integrations
Click Website

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&amp;rec=1" style="border:0;" alt="" /> </p> </noscript> <!-- End Factoreal Code -->

Track an Interaction Semi-Automatic

<script> formElement.addEventListener("submit", function () { _paq.push(["trackContentInteractionNode", formElement, "submittedForm"]); }); </script>

Tracking Content Impressions and Interactions Manually

<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 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

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>

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>

Don't hesitate to get in touch with our team at me-support@satisfilabs.com with any questions you may have!

Track an Interaction Semi-Automatic

Tracking Content Impressions and Interactions Manually

Tracking Content Impressions When it Scrolls into View

Manually Trigger Events

Social Login Tracking

Track an Interaction Semi-Automatic

Tracking Content Impressions and Interactions Manually

Tracking Content Impressions When it Scrolls into View

Manually Trigger Events

Social Login Tracking