Overview

Intempt's Javascript source makes sending your data to any tool simple without having to learn, test, or implement a new API every time.

The initialized Web SDK source will automatically collect the following events with data-rich properties like URL, referrer, geo-location, and date-time from your website or web app:

• pageviews (page visits)
• clicks (on links)
• form submissions (including the data that was submitted with the form)

Browser support

NOTE: the Web SDK source currently only supports modern browsers, including:

• Chrome 8+
• Android Browser 3+
• Chrome for Android 53+
• Safari 9.1+
• iOS Safari 5.1+
• Firefox 47+
• Opera 15+
• Internet Explorer 10+

How to create a new Web tracker source

Under the Sources object, locate and click on the Add new source button and select the Web tracker source option.

3. Under “Insert a code snippet,” copy the code block snippet containing the script tags and Javascript function.

🚧

Don't miss out!

Remember to replace "YOUR_API_KEY" with the API key you generated via API keys section.

4. Paste the first block into your site’s HTML in the tags and the second one under the section. This should be an HTML page that acts as a base or template page (with other scripts your page loads) to ensure all possible events are captured.

This allows autocapture to capture events like clicks, change of inputs, or submission of a button, form, input, select, textarea, and label tags. Once set up, those events flow automatically into Intempt for you to see and analyze. ‍

Auto-tracked events

Some web tracker events as recorded by default and the data items are inserted into the respective collection that it belongs to.

These events are:

• Clicks (clicks). Triggered on any click.
• Page Views (pageviews). Triggered once a user exits a page.
• Form Submissions (form_submissions). Triggered on any form submission.
• Profile (profile). Triggered by the identification of the user.

Custom events are logged manually using the JavaScript API and appear depending on the collection name assigned.

Autocapture’s limitations

Although we are proud of our autocapture feature, it isn’t enough for more advanced product analytics. This is for two reasons.

First, event autocapture can be overwhelming. In high-volume instances, where events come in at a high rate, the live events table can contain so much information it can be difficult to determine exactly what you care about. Remember that every click, change of input, or submission is tracked here. Without proper filters, actions, and insights set up, this data can be overwhelming.‍

Second, autocapture is a general solution that provides value to many users. To get the most out of Intempt, you should be using custom events. Custom events let you track exactly the behavior you care about, ranging from a user hovering input to a function call in your backend.

Set up custom events

‍To expand on autocapture, you can create and add custom events to your website or application. Custom events allow you to capture details from anywhere in the codebase, whether it is a button press on the frontend or a class method call on the backend. This ensures correct and comprehensive data capture.

To set up custom events, first, you need to install the Web tracker on your site (as indicated in the previous section). Next, you will need to create a collection in the Web tracker you created.

Intempt uses Avro schemas to structure data - this ensures that all ingested events are validated against the schema structure in the database. This is an advantage compared to schemaless architecture allowint to ensure proper data validation in all cases (so no wrong or broken events are ingested).

However, this also means creating event collection schemas are required to be created in advance to start ingesting custom events. Please note that tracked events have schemas already pre-created - so it does not need this step.

To create the collections for customer events, you need to:

1. Map the schema of the event your want to track

Example of the mapped schema is below. You can read here to learn more about building a tracking plan.

‍

2. Create an event collection in the Intempt console using the schema editor

Open the Web tracker source and select the “Collections” tab.

Create a new collection - name it based on the event you want to create.

Add fields for each of the properties you mapped in the previous step (event schema).

📘

Important

1. Add a visitorId field and set a profile identifier as one of its properties.
2. Make sure to also add an eventId to your schema - each event needs to have its unique identifier.

Note that the Data type sent should match the data type set when creating the collection. For instance, if sending a property timestamp that has an object type of integer, the data will not be ingested due to a mismatch.

‍

3. Add tracking code to your codebase to track the custom event

You can log a custom event by calling Intempt's recordEvent function, passing in a set of key-value pairs.

    intempt.recordEvent('COLLECTION_NAME', {
		key: value,
	});

The COLLECTION_NAME refers to an event type. For example, if you wanted to log every purchase made on your site, you might call that collection "purchase". Then, when a purchase happens, you call track and pass in the purchase details.

In the example below, we have a custom event with the name of purchase, then we have an object of key-value pairs. The pairs passed into the fields are the same as those created in the source collection.

intempt.recordEvent("purchase", {
	 "items": [{"item name": "item 1","price": 20}, {"item name": "item 2","price": 15}],
	 "totalprice": 35,
	 "ispaid": true,
	 "timestamp": new Date().getTime(),
	 "fixed.name": "John Smith",
	 "fixed.age": 28,
	 "intempt.visit.trackcharge": 35
})

In the another example below, the code snippet captures user sign-up data, such as their first name, last name, email, and discount card number.

    const btn = document.querySelector("#regBtn")
    btn.addEventListener("click", () => {
    const first_name = document.querySelector('input[name="customer[first_name]"]').value;
    const last_name = document.querySelector('input[name="customer[last_name]"]').value;
    const email = document.querySelector('input[name="customer[email]"]').value;
    const discount_card_number = document.querySelector('input[name="customer[note][DiscountCardNumber]"]').value;
    intempt.recordEvent('signed_up', {
    first_name: first_name,
    last_name: last_name,
    email: email,
    discount_card_number: discount_card_number,
  });
    },false)

When the "w" is clicked, the data is extracted from the input fields and passed as an object to Intempt's "recordEvent" function. The data is passed to Intempt as an object and includes the user's first name, last name, email, and discount card number.

Using event listeners

To track each custom event when it occurs, you need to use event listeners.

Event listeners are used in detecting user interaction with specific elements on the webpage, such as a button or a form input. In the code snippet example,, the "click" event listener is used to detect when the user clicks the "regBtn" or "loginBtn" button, respectively. When the event is detected, the function specified in the event listener is executed.

‍

Getting custom events right

With some custom events being sent, it is time to refine those events to capture the data you want. Getting this right requires multiple steps.

1. It starts with the goals of the product, which inform what data is needed about users and their behavior.
2. Next is ensuring data is accessible in the right places in your codebase. This might require writing helper functions for access or formatting the data correctly.
3. Finally, ensuring all the data is captured and added to Intempt for use in your analysis, visualization, and optimization. This is where we’ll focus for the rest of this tutorial.

There are multiple places where more details can be added to events to make sure you are tracking the right data. Here are some key ones.

‍

Identifying users

To best capture data about users, you must understand who those users are. Autocaptured events identify users for you, while custom events require manually setting that user identification.

Examples of identifiers for users include session IDs and emails. For example, getting identifying a user by email using Javascript is as simple as calling intempt.identify() with a unique identifier.

function loginRequest(user) {
  return authUser(user)
    .then(authorizedUser => {
        intempt.identify(user.email)
    })
}

To track visitors across multiple browsers and apps (or sessions after cookies are removed), pass in a unique identifying string (user email, unique user ID in your database etc.).

	intempt.identifyUser("[email protected]")

Identifying users helps us understand who those users are and what they are doing. Once identified, Intempt connects events related to formerly anonymous IDs with the unique set IDs.

An example below is when the same identifier was used across two different sources. For this user, Intempt got a unified view of all of the events across the Shopify and iOS demo sources.

Retrieving A User's VisitorId

    intempt.getVisitorId()

Tracking consents

Save user consent and apply them to the data flow. Make sure you have created consents purposes in your organization's settings

Supported Regulation Types - GDPR & CCPA;

Consents are tracked using Intempt's exported function ;

	intempt.trackConsent(consent)

Intempt.trackConsent() expects consents as an array of Objects to be tracked successfully.

Example:

	intempt.trackConsents({
  	action: "accept", // "accept" for granting  or "reject" for revoking
  	category: "", // category of the consent
  	email: "", // email used/entered by the visitor
  	message: "" // optional (can be left as empty string)
  })

Opting in and out of tracking

Every user can decide whether he/she can be tracked. To know the current tracking status of a user, you call our exported function Intempt.has_opted_in_tracking() to check if the user is opted into tracking and Intempt.has_opted_out_tracking() to check if the user opted out of tracking.

Intempt.has_opted_in_tracking() returns true if the user is currently opted in to tracking and false if not.

Intempt.has_opted_out_tracking() obeys standard browser opt-out settings. By default, this will check standard browser opt out settings such as Navigator.doNotTrack. The method returns true if the user is currently opted out of tracking and false if not.

Intempt.opt_in_tracking() opts the user into data tracking resumes data tracking irrespective of the customer's browser settings. In this case, Setting DonotTrack in your browser settings is ignored because the user has enabled tracking. Data Tracking is enabled by setting a localStorage/cookies entry.

Intempt.opt_out_tracking() opts the user out of data tracking and pauses data tracking indefinitely until it is resumed at a later time. Data tracking is disabled by setting a localStorage/cookies entry.

Intempt.clear_opt_in_out_tracking() reverts all Intempt's tracking settings back to the browser's settings. This means that even if the user initially opted Into tracking, calling this exported function will revert this back to the default settings of the browser meaning that if DonotTrack is turned on in your settings, you are automatically optedOut of tracking and if it is turned on, you are optedIn to tracking by default.

Data Subject Requests

Both the General Data Protection Regulation (GDPR) and the California Consumer Privacy Act (CCPA) define that consumers/data subjects have the right to view, update, extract and delete data that controllers & businesses have saved on them. When a consumer/data subject exercises their rights, they create a data subject request (DSR).

Creating a Data Subject Request Object

You need to discover supported options for creating data subject requests, such as request type or the supported subject identities

To discover this options, call our exported function;

Intempt.get_data_subject_request_supported_options()

The function above returns a Promise.

The Object below is a response from our servers for supported options.

	{
		"api_version":"2.0",
	    "supported_identities": {
			"identity_type":"email,
			 mobile_number",
			 "identity_format":"raw"
		},
		"supported_subject_request_types":[
			"portability",
			"access",
			"erasure"
		],
		"processor_certificate":
		"https://static.intempt.com/dsr/opendsr_cert.pem"
	}

After discovering supported options, we now create our DSR object.

	const DSRObject = {
		regulation: "GDPR",
        subject_request_type: "Access",
        subject_identities: [
			{
				identity_type: "mobile_number",
				identity_value: "+13022482744"
			}
		]
	}

After creating the object, we now create the data subject request using the method below. The exported function below returns a Promise.

	Intempt.create_data_subject_request(DSRObject)

 

FAQ

Why aren't my events showing up in Intempt?

Make sure you've disabled ad blockers, and your Do Not Track (DNT) browser settings are set to false when testing your JavaScript implementation. If the DNT setting is set to true, then Intempt won't collect information from that Intempt project.

Does Intempt use third-party cookies?

No, our Intempt JavaScript SDK does not set or use any third-party cookies.