When you implement Intempt, you add Intempt code to your website, app, or server. This code generates messages based on specific triggers you define.

In a basic implementation, the code can be a snippet of JavaScript that you copy and paste into the HTML of a website to track page views. It can also be as complex as a custom even tracked via server-side library.

The best way to learn about how Intempt works is to see it in action.

Before you begin

Before you start your Intempt implementation, you need:

1. Intempt account and an organization + project created. If you’re not already part of any project with Intempt organization, you can sign up for a free account.
2. Access to the code for a website, or an iOS app.

Tip! If you don’t have any of those things, consider creating a simple GitHub Pages website.

Create separate dev and prod projects

When you develop and test sources, we recommend you to create and use separate projects for each of your environments (production, development, staging) to prevent testing and development activities from filling production systems with invalid data.

You can give each project an environment label when you create it, and we strongly suggest that you use these labels to sort your projects.

Installing Intempt

Click the tab below to see the tutorial content for the specific library you chose.

Step 1: Create your API key

The API key is a unique identifier for a source that tells Intempt which source the data comes from, to which organization the data belongs.

To find your write key:

1. Go to the API keys section
2. Click “Create public key”
3. Copy the API key, you will need in the next steps

🚧

Attention

Make sure to save the API key in a secure file/folder - you will not be able to access it later

📘

Important

Cloud-sources do not have write keys, as they use a token or key from your account with that service.

Step 1: Create a source & set up autocapture

Autocapture makes it easy to start getting data such as page views, clicks, and submissions from your site through a JavaScript snippet. It doesn’t require setting up individual events and automatically captures data from new or changed components. This is useful, for example, if you restructure your frontend, autocapture continues to collect relevant events without you needing to update your codebase.

To set up autocapture:

1. Go to the Integrations section -> Sources tab

2. Create a “Web” source

3. Under “Installation”, 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 in the first step.

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, changes 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. ‍

For a detailed guide on how to install the snippet, read our installation guide.

Autocapture’s limitations

Although we are proud of our autocapture feature, we know 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 that 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 over input to a function call in your backend.

Step 3: 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).

While custom event tracking might sound complex and technical, Intempt handles all the heavy lifting for you. All you need to do is add the tracking code to your codebase to track the custom event, which is exactly what we’ll cover in the next section.

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

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

const recordParams = {
  eventTitle: 'login',
  userId: '[email protected]',
  userAttributes: {
    loginMethod: 'OAuth',
    attemptCount: 3
  },
  data: {
    ipAddress: '192.168.1.1'
  }
};

intempt.record(recordParams);

In the example below, we have a custom event with the name of purchase, then we have an object of key-value pairs.

const recordParams = {
  eventTitle: 'purchase',
  userId: '[email protected]',
  data: {
    items: [{"item name": "item 1","price": 20}, {"item name": "item 2","price": 15}],
		totalprice: 35,
	 	ispaid: true,
	 	timestamp: new Date().getTime(),
	 	name: "John Smith",
	 	age: 28,
  }
};

intempt.record(recordParams);

In 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;
      
		const recordParams = {
  		eventTitle: 'signed_up',
  		userId: '[email protected]',
  		userAttributes: {
    		first_name: first_name,
    		last_name: last_name,
    		email: email,
    		discount_card_number: discount_card_number,
  		}
		};

		intempt.record(recordParams);
    },false)

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

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.

‍

Step 4: Identify 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, 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({userId: 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.).

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.

Step 5: Create events

Often, a single event does not make up an entire behavior that you want to track. For example, a signup can include not only pressing the signup button, but also entering the correct information and making it past the basic information input stage. To truly track all the events and behaviors, events can be combined into defined events.

Defined events can be created by using the Intempt Event editor - autocapture events, custom events, and page views can then be combined to better track the behavior you care about. You can find more about using the event editor here.

📘

Important

Defined events also work retroactively, meaning they also tag events that happened in the past, not only events that happened after the action was created.‍

What’s next?

‍Now that you have set up autocapture, high-quality custom events, and actions, what’s next? If your website or application is active (we hope it is), you’ll be getting a flow of data into your Intempt instance. You can continue to expand the capturing and formatting of that data, or you can begin to analyze it. ‍

If you are looking to get started with the analysis of all the event tracking data you now have, you can look into creating a new report or explore our templates library to get inspiration on how to use Intempt.