Inights plugin
The Insights plugin sends data to a Ninetailed Insights API endpoint via the Beacon API when an <Experience>
component remains in the viewport for a specified amount of time. This view data powers Component Insights and Experience Insights.
Installation
NOTE:
The Insights Plugin requires that you are using major version 6.x or above of one of Ninetailed's SDKs. Ensure that all of your other
@ninetailed
dependencies are also using the same version.
Add the dependency:
npm install @ninetailed/experience.js-plugin-insights
yarn add @ninetailed/experience.js-plugin-insights
Then, add the plugin to the Ninetailed instance:
import { NinetailedInsightsPlugin } from '@ninetailed/experience.js-plugin-insights'
<NinetailedProvider
// ...
plugins={[
new NinetailedInsightsPlugin()
]}
componentViewTrackingThreshold={2000} // (Optional prop) Number, default = 2000
>
// ...
</NinetailedProvider>;
plugins: [
// ...
{
resolve: `@ninetailed/experience.js-plugin-gatsby`,
options: {
// ...
componentViewTrackingThreshold: 2000 // (Optional prop) Number, default = 2000
ninetailedPlugins: [
// ...
{
resolve: `@ninetailed/experience.js-plugin-insights`,
options: {}
}
]
}
}
]
import { Ninetailed } from '@ninetailed/experience.js';
import { NinetailedInsightsPlugin } from '@ninetailed/experience.js-plugin-insights'
export const ninetailed = new Ninetailed(
{
clientId: // Your client ID
environment: // Your Ninetailed environment
},
{
plugins: [
new NinetailedInsightsPlugin();
],
// Specify an amount of time (ms) that a component must be present in the viewport to register a component view
componentViewTrackingThreshold: 2000,
}
);
Timing configuration
The Insights Plugin logs that a component has been seen only after the component has remained within the user's viewport for a specified amount of time (in milliseconds), determined by the value of the componentViewTrackingThreshold
property on the Ninetailed instance (see code samples above). If the option is unspecified, the value defaults to 2000
.