The JavaScript SDK

How to integrate journy.io using our JavaScript SDK.

Updated over a week ago

⚠️ This article relates to both journy.io's SDKs and Twilio Segment SDKs.

journy.io’s JavaScript library lets you record data from your platform, from your JavaScript code.

All of journy.io’s server-side libraries are built for high-performance, so you can use them in your web server controller code. This library uses an internal queue to make identify and track calls non-blocking and fast. It also batches messages and flushes asynchronously to journy.io’s servers.

Getting Started

Make sure you’re using a version of Node that’s 14 or higher.

  1. Run the relevant command to add journy.io’s Node library module to your package.json.

    npm install @segment/analytics-next

  2. Initialize the Analytics constructor the module exposes with your journy.io SDK connector Write Key, like so:

    import { AnalyticsBrowser } from "@segment/analytics-next"; 

    const analytics = AnalyticsBrowser.load(
    { writeKey: "YOUR_WRITE_KEY",
    cdnURL: "https://analyze.journy.io/frontend", // See Proxy
    },
    { integrations: {
    "Segment.io": {
    apiHost: "analyze.journy.io/frontend/v1", }, // See Proxy
    }
    }
    );

Be sure to replace YOUR_WRITE_KEY with your actual Write Key which you can find in journy.io by navigating to: Connections > API/SDK Connector and selecting the source tab and going to the JavaScript tab.

This creates an instance of Analytics that you can use to send data to journy.io for your project. The default initialization settings are production-ready and queue 20 messages before sending any requests.

There is an option in journy.io to set a proxy ("Use proxy domain") so traffic flows through your own domain. In that case, apiHost and cdnURL will have another value, pointing to your own domain.

Basic tracking methods

The basic tracking methods below serve as the building blocks of your journy.io tracking. They include Identify, Group, Track, and Page.

These methods correspond with those used in the journy.io Spec. The documentation on this page explains how to use these methods in JavaScript.

Identify

For any of the different methods described on this page, you can replace the properties and traits in the code samples with variables that represent the data collected.

identify lets you tie a user to their actions and record traits about them. It includes a unique User ID and/or anonymous ID, and any optional traits you know about them.

journy.io recommends that you make an identify call:

  • After a user first registers

  • After a user logs in

  • When a user updates their info (for example, they change or add a new address)

Example of an anonymous identify call:

analytics.identify({
nickname: "web visitor"
friends: 42
});

This call identifies the user and records their unique anonymous ID, and labels them with the friends trait.

Example of an identify call for an identified user:

analytics.identify("abc123",{  // Elon Musk — unique Id from database
firstname: "Elon",
lastname: "Musk",
email: "[email protected]",
friends: 42
});

The call above identifies Elon by his unique User ID (the one you know him by in your database), and labels him with the firstname, lastname, email, and friends traits.

The identify call has the following fields:

FIELD

TYPE

DESCRIPTION

userId Optional

String

The database ID for the user. If you don’t know who the user is yet, you can omit the userId and just record traits. You can read more about identities in the identify reference.

traits Optional

Object

A dictionary of traits you know about the user, like email or name. You can read more about traits in the identify reference.

options Optional

Object

A dictionary of options. For example, enable or disable specific destinations for the call. Note: If you do not pass a traits object, pass an empty object (as an ‘{}’) before options.

callback Optional

Function

A function executed after a timeout of 300 ms, giving the browser time to make outbound requests first.

Identifying users happen incremental: You can identify users with a subset of traits; and later make another identify call with another subset of traits. The result of both identify calls will be the union of all traits.

To delete a traits, you have to add them to the identify call with value null:

analytics.identify("abc123",{  // Elon Musk — unique Id from database
firstname: "Elon",
lastname: "Musk",
email: null,
friends: 42
});

Find details on the identify method payload in journy.io’s Identify Spec.

Group

group lets you associate an identified user with a group. A group could be a company, organization, account, project or team! It also lets you record custom traits about the group, like industry or number of employees.

journy.io recommends that you make a group call:

  • After a user first registers, entering its company details.

  • After a user logs in. Make a group call for each account the user is part of.

  • When a user updates their info, make a group call for each account the user is part of.

Example group call, adding user Elon Musk to account Tesla, as an 'admin':

analytics.group( "xyz789",  // Tesla — unique Id from database
{ name: "Tesla Inc",
industry: "Automotive"
},
{ relationship:
{ role: "admin"
}
}
);

The group call has the following fields:

FIELD

TYPE

DESCRIPTION

groupId

String

The Group ID to associate with the current user.

traits Optional

Object

A dictionary of traits for the group. Example traits for a group include address, website, and employees.

options Optional

Object

A dictionary of options. For example, enable or disable specific destinations for the call. Note: If you do not pass a properties object, pass an empty object (like ‘{}’) before options.

callback Optional

Function

A function that runs after a timeout of 300 ms, giving the browser time to make outbound requests first.

Group-calling accounts happen incremental: You can identify users with a subset of traits; and later make another identify call with another subset of traits. The result of both identify calls will be the union of all traits.

To delete a traits, you have to add them to the group call with a null reference:

analytics.group( "xyz789",  // Tesla — unique Id from database
{ name: "Tesla Inc",
industry: null
},
{ relationship:
{ role: "admin"
}
}
);

Find more details about group, including the group payload, in the journy.io Spec.

Track

track lets you record the actions your users perform, optionally within the context of an account. Every action triggers what we call an “event”, which can also have associated event metadata.

You’ll want to track events that are indicators of success for your site, like Signed Up, Item Purchased or Article Bookmarked.

To get started, we recommend tracking just a few important events. You can always add more later!

Example identified track call by a current user:

analytics.track("Car Sold", 
{ total_amount: 39999.99,
currency: "usd",
shippingMethod: "200-day"
}
);

B2B example identified track call by a current user (assuming current user being Elon Musk) in the context of account Tesla, back on Dec 12th 2015:

analytics.track("Car Sold", 
{ total_amount: 39999.99,
currency: "usd",
shippingMethod: "200-day"
},
{ timestamp: "2015-12-12T19:11:01.249Z",
groupId: "xyz789" // Tesla — same Id as from group call
}
);

This example track call tells us that Elon Musk triggered the Car Sold event with a revenue of $39999.99 and chose your hypothetical ‘200-day’ shipping, back on Dec 12th 2015.

track event properties can be anything you want to record. In this case, revenue and shipping method.

The track call has the following fields:

FIELD

TYPE

DESCRIPTION

event

String

The name of the event you’re tracking. You can read more about the track method and recommended event names.

properties Optional

Object

Optional. A dictionary of properties for the event. If the event was 'Added to Cart', it might have properties like price and productType.

options Optional

Object

Optional. A dictionary of options. For example, enable or disable specific destinations for the call. Note: If you do not pass a properties object, pass an empty object (like ‘{}’) before options.

callback Optional

Function

Optional. A function that runs after a timeout of 300 ms, giving the browser time to make outbound requests first.

Find details on best practices in event naming as well as the track method payload in the journy.io Spec.

Page

The page method lets you record page views on your website, along with optional extra information about the page being viewed. It is also user to record screen views in your app/on your platform.

⚠️ Important Note:

  • When a name is provided in the page call, journy.io will collect those calls and stores them as (app) screen objects.

  • Without name, journy.io regards those calls as (website) page objects.

If you’re using our client-side set up in combination with the JavaScript library, page calls are already tracked for you by default. However, if you want to record your own page views manually and aren’t using our client-side library, read on!

Example page call, where a current user visits the pricing page:

analytics.page("pricing page");

B2B example page call, where a user Elon Musk visits the pricing page, when being in account Tesla, back on Dec 12th 2015:

analytics.page("pricing page", 
{},
{ timestamp: "2015-12-12T19:11:01.249Z",
groupId: "xyz789" // Tesla — same Id as from group call
}
);

The page call has the following fields:

FIELD

TYPE

DESCRIPTION

category Optional

String

The category of the page. Useful for cases like ecommerce where many pages might live under a single category. Note: if you pass only one string to page it is assumed to be name. You must include a name to send a category.

name Optional

String

The name of the page.

properties Optional

Object

A dictionary of properties of the page. Note: Analytics.js collects url, title, referrer and path are automatically. This defaults to a canonical url, if available, and falls back to document.location.href.

options Optional

Object

A dictionary of options. For example, enable or disable specific destinations for the call. Note: If you do not pass a properties object, pass an empty object (like ‘{}’) before options.

callback Optional

Function

A function that runs after a timeout of 300 ms, giving the browser time to make outbound requests first.

Find details on the page payload in the journy.io Spec.

Did this answer your question?