### Install a plugin with npm Source: https://getanalytics.io/plugins/writing-plugins Example of installing a plugin named `analytics-plugin-awesome-stuff` using npm. ```bash npm install analytics-plugin-awesome-stuff ``` -------------------------------- ### Zero-config perfumePlugin setup Source: https://getanalytics.io/plugins/perfumejs Simple setup passing only the Perfume class to the plugin; automatically sends all performance metrics to all attached analytics providers. Includes example with Google Analytics and HubSpot. ```javascript import Analytics from 'analytics' import googleAnalytics from '@analytics/google-analytics' import hubSpotPlugin from '@analytics/hubspot' import perfumePlugin from '@analytics/perfumejs' import Perfume from 'perfume.js' const analytics = Analytics({ app: 'my-app', plugins: [ // Attach Google analytics googleAnalytics({ trackingId: 'UA-12341131-6', instanceName: 'two' }) // Attach Hubspot analytics hubSpotPlugin({ portalId: '234576' }), // Include perfume.js plugin with no options set. // This will send data to all analytics providers by default perfumePlugin(Perfume), ] }) ``` -------------------------------- ### Install analytics and @analytics/fullstory Source: https://getanalytics.io/plugins/fullstory Install the required packages using npm. You will need your FullStory org ID from Settings > FullStory Setup. ```bash npm install analytics npm install @analytics/fullstory ``` -------------------------------- ### Install @analytics/global-storage-utils Source: https://getanalytics.io/utils/global-storage Install the package from npm. ```bash npm install @analytics/global-storage-utils ``` -------------------------------- ### Install analytics and @analytics/simple-analytics Source: https://getanalytics.io/plugins/simple-analytics Install the analytics core package and the Simple Analytics plugin. ```bash npm install analytics npm install @analytics/simple-analytics ``` -------------------------------- ### Browser API initialization Source: https://getanalytics.io/plugins/simple-analytics Browser API example: initialize analytics with the Simple Analytics plugin. This is the minimal setup for browser usage. ```javascript import Analytics from 'analytics' import simpleAnalyticsPlugin from '@analytics/simple-analytics' const analytics = Analytics({ app: 'awesome-app', plugins: [simpleAnalyticsPlugin()] }) ``` -------------------------------- ### Install @analytics/queue-utils Source: https://getanalytics.io/utils/queue Install the @analytics/queue-utils package from npm. ```bash npm install @analytics/queue-utils ``` -------------------------------- ### Install @analytics/storage-utils Source: https://getanalytics.io/utils/storage Install the @analytics/storage-utils package from npm. ```bash npm install @analytics/storage-utils ``` -------------------------------- ### Install @analytics/session-storage-utils Source: https://getanalytics.io/utils/session-storage Install the @analytics/session-storage-utils package from npm. ```bash npm install @analytics/session-storage-utils ``` -------------------------------- ### Install analytics and use-analytics Source: https://getanalytics.io/utils/react-hooks Install both the analytics core and the use-analytics React hooks library. ```bash npm install analytics use-analytics ``` -------------------------------- ### Install analytics and @analytics/customerio Source: https://getanalytics.io/plugins/customerio Install the `analytics` core package and the `@analytics/customerio` plugin package. ```bash npm install analytics npm install @analytics/customerio ``` -------------------------------- ### Install analytics and @analytics/mixpanel Source: https://getanalytics.io/plugins/mixpanel Install the required packages using npm. ```bash npm install analytics npm install @analytics/mixpanel ``` -------------------------------- ### Install @analytics/remote-storage-utils Source: https://getanalytics.io/utils/remote-storage Install the package from npm. ```bash npm install @analytics/remote-storage-utils ``` -------------------------------- ### Installation commands for analytics, perfumejs plugin, and perfume.js Source: https://getanalytics.io/plugins/perfumejs Install the required packages: analytics, @analytics/perfumejs, and perfume.js. ```bash npm install analytics npm install @analytics/perfumejs npm install perfume.js ``` -------------------------------- ### Install @analytics/router-utils Source: https://getanalytics.io/utils/router Install the @analytics/router-utils package from npm. ```bash npm install @analytics/router-utils ``` -------------------------------- ### Server-side ES6 example with page and track Source: https://getanalytics.io/plugins/custify Server-side example using ES6 imports, initializing with apiKey, and tracking page views and custom events. ```javascript import Analytics from 'analytics' import custifyPlugin from '@analytics/custify' const analytics = Analytics({ app: 'awesome-app', plugins: [ custifyPlugin({ apiKey: 'abc123' }) // ...other plugins ] }) /* Track a page view */ analytics.page() /* Track a custom event */ analytics.track('cartCheckout', { item: 'pink socks', price: 20 }) ``` -------------------------------- ### Install analytics and @analytics/hubspot Source: https://getanalytics.io/plugins/hubspot Install the `analytics` core package and the `@analytics/hubspot` plugin. Run these commands in your project directory before using the plugin. ```bash npm install analytics npm install @analytics/hubspot ``` -------------------------------- ### Install analytics and window events plugin Source: https://getanalytics.io/plugins/window-events Install the core analytics package and the window events plugin using npm. ```bash npm install analytics npm install analytics-plugin-window-events ``` -------------------------------- ### Install @analytics/url-utils Source: https://getanalytics.io/utils/url Install the @analytics/url-utils package from npm. ```bash npm install @analytics/url-utils ``` -------------------------------- ### Install @analytics/type-utils from npm Source: https://getanalytics.io/utils/types Install the package using npm. This is the first step to use the type-utils library. ```bash npm install @analytics/type-utils ``` -------------------------------- ### Install analytics and original source plugin Source: https://getanalytics.io/plugins/original-source Install the `analytics` core package and the `analytics-plugin-original-source` plugin from npm. ```bash npm install analytics npm install analytics-plugin-original-source ``` -------------------------------- ### Install @analytics/amplitude Source: https://getanalytics.io/plugins/amplitude Install the analytics core package and the Amplitude plugin for browser usage. ```bash npm install analytics npm install @analytics/amplitude ``` -------------------------------- ### Install analytics and event validation plugin Source: https://getanalytics.io/plugins/event-validation Install the analytics core and the event validation plugin. ```bash npm install analytics npm install analytics-plugin-event-validation ``` -------------------------------- ### Install analytics and @analytics/google-tag-manager Source: https://getanalytics.io/plugins/google-tag-manager Install the `analytics` core package and the `@analytics/google-tag-manager` plugin. Run these commands in your project directory. ```bash npm install analytics npm install @analytics/google-tag-manager ``` -------------------------------- ### Install @analytics/redact-utils Source: https://getanalytics.io/utils/redaction Install the redaction utilities library from npm. ```bash npm install @analytics/redact-utils ``` -------------------------------- ### Install @analytics/listener-utils from npm Source: https://getanalytics.io/utils/listeners Install command using npm to add the @analytics/listener-utils package to your project. It is a tiny utility library for event listeners under 734 bytes. ```bash npm install @analytics/listener-utils ``` -------------------------------- ### Install analytics and @analytics/snowplow Source: https://getanalytics.io/plugins/snowplow Install the `analytics` core package and the `@analytics/snowplow` plugin. Run these commands in your project directory before using the plugin. ```bash npm install analytics npm install @analytics/snowplow ``` -------------------------------- ### Install @analytics/scroll-utils via npm Source: https://getanalytics.io/utils/scroll Install the @analytics/scroll-utils package from npm. ```bash npm install @analytics/scroll-utils ``` -------------------------------- ### Install @analytics/google-analytics-v3 Source: https://getanalytics.io/plugins/google-analytics-v3 Install the analytics core package and the Google Analytics v3 plugin. Run this in your project directory before using the plugin. ```bash npm install analytics npm install @analytics/google-analytics-v3 ``` -------------------------------- ### Install analytics and @analytics/ownstats Source: https://getanalytics.io/plugins/ownstats Install the analytics core package and the Ownstats plugin via npm. ```bash npm install analytics npm install @analytics/ownstats ``` -------------------------------- ### Install analytics via yarn Source: https://getanalytics.io/tutorials/getting-started Install the analytics module into your project via yarn. ```bash yarn add analytics ``` -------------------------------- ### Install analytics package Source: https://getanalytics.io/debugging Install the analytics package via npm. ```bash npm install analytics ``` -------------------------------- ### Install analytics and @analytics/google-analytics Source: https://getanalytics.io/plugins/google-analytics Install the core analytics package and the Google Analytics plugin via npm. ```bash npm install analytics npm install @analytics/google-analytics ``` -------------------------------- ### Install analytics and @analytics/crazy-egg Source: https://getanalytics.io/plugins/crazyegg Install the `analytics` core package and the `@analytics/crazy-egg` plugin package via npm. ```bash npm install analytics npm install @analytics/crazy-egg ``` -------------------------------- ### Install @analytics/countly Source: https://getanalytics.io/plugins/countly Install the analytics core package and the Countly plugin via npm. ```bash npm install analytics npm install @analytics/countly ``` -------------------------------- ### Server-side ES6 example Source: https://getanalytics.io/plugins/ownstats Additional server-side example using ES6 imports, including a page view call. ```javascript import Analytics from 'analytics' import ownstatsPlugin from '@analytics/ownstats' const analytics = Analytics({ app: 'awesome-app', plugins: [ ownstatsPlugin({ endpoint: 'my.ownstats.cloud' }) // ...other plugins ] }) /* Track a page view */ analytics.page() ``` -------------------------------- ### Install analytics and @analytics/aws-pinpoint Source: https://getanalytics.io/plugins/aws-pinpoint Install the required packages for using the AWS Pinpoint plugin. ```bash npm install analytics npm install @analytics/aws-pinpoint ``` -------------------------------- ### Install analytics and analytics-plugin-tab-events Source: https://getanalytics.io/plugins/tab-events Install the analytics core package and the tab events plugin from npm. ```bash npm install analytics npm install analytics-plugin-tab-events ``` -------------------------------- ### Install @analytics/form-utils via npm Source: https://getanalytics.io/utils/forms Install the package from npm. The library works with analytics or as a standalone import. ```bash npm install @analytics/form-utils ``` -------------------------------- ### Install analytics and @analytics/segment Source: https://getanalytics.io/plugins/segment Install the analytics core package and the Segment plugin for use in browser or Node.js projects. ```bash npm install analytics npm install @analytics/segment ``` -------------------------------- ### Initialize analytics with Google Analytics, HubSpot, and customerio Source: https://getanalytics.io/tutorials/sending-provider-specific-events Sets up an analytics instance with three plugins: googleAnalytics, hubSpot, and customerIo. ```javascript import Analytics from 'analytics' import googleAnalytics from '@analytics/google-analytics' import customerIo from '@analytics/customerio' import hubSpot from '@analytics/hubspot' /* Initialize analytics with 3 plugins */ const analytics = Analytics({ app: 'app-name', plugins: [ // Attach analytic provider plugins googleAnalytics({ trackingId: '123-xyz' }), hubSpot({ portalId: '234576' }) customerIo({ siteId: '123-xyz' }) ] }) ``` -------------------------------- ### getHost Source: https://getanalytics.io/utils/url Get host domain of url. Returns the hostname for the given example. ```javascript import { getHost } from '@analytics/url-utils' getHost('https://subdomain.my-site.com/') // subdomain.my-site.com ``` -------------------------------- ### Browser example with custom Intercom methods Source: https://getanalytics.io/plugins/intercom Browser example showing custom Intercom methods. Use analytics.plugins.intercom.startTour to start a tour and analytics.plugins.intercom.onShow to hook into the launcher being shown. ```javascript import Analytics from "analytics"; import intercomPlugin from "@analytics/intercom"; // Initialize analytics instance with plugins const analytics = Analytics({ app: "your-app-name", plugins: [ intercomPlugin({ appId: "123-xyz", }), ], }); // Usage: // Now you can call intercom.startTour in your app like so analytics.plugins.intercom.startTour("tourID"); // hook usage: analytics.plugins.intercom.onShow(() => { console.log("fires when intercom launcher is shown"); }); ``` -------------------------------- ### Get localStorage value with getItem Source: https://getanalytics.io/utils/localstorage Retrieves a value from localStorage using the specified key. The example uses 'cookie-key' as the key. ```javascript import { getItem } from '@analytics/localstorage-utils' const value = getItem('cookie-key') ``` -------------------------------- ### Full example: disable plugins until user opts in Source: https://getanalytics.io/conditional-loading Full example of conditional loading: disables Google Analytics and HubSpot initially, then enables them later after user permission. Shows that calls before enabling are no-ops, and after enabling, page, track, and identify work. ```javascript import Analytics from 'analytics' import googleAnalyticsPlugin from '@analytics/google-analytics' import hubspotPlugin from '@analytics/hubspot' const analytics = Analytics({ app: 'awesome-app', plugins: [ googleAnalyticsPlugin({ trackingId: 'UA-xyz-123', // Disable GA from loading until `analytics.plugins.enable` called enabled: false, }), hubSpotPlugin({ portalId: '234576', // Disable HubSpot from loading `analytics.plugins.enable` called enabled: false, }) ] }) /* Because no analytic plugin is enabled, all calls will noOp & not load any third party JS */ analytics.page() // NoOp analytics.track(...) // NoOp analytics.identify(...) // NoOp /** * Later in your app after getting user permission to load analytics tools... */ /* User opted in, enable analytics plugins */ analytics.plugins.enable(['google-analytics', 'hubspot']).then(() => { /* Plugins are now loaded into the page */ /* Track a page view */ analytics.page() /* Track a custom event */ analytics.track('cartCheckout', { item: 'pink socks', price: 20 }) /* Identify a visitor */ analytics.identify('userId123', { name: 'bob', email: 'bob@bob.com' }) }) ``` -------------------------------- ### getHashValue: Get single hash param value Source: https://getanalytics.io/utils/url Returns a single hash param value by key. The example retrieves 'bar' for key 'foo'. ```javascript import { getHashValue } from '@analytics/url-utils' getHashValue('foo', 'https://my-site.com/#foo=bar') // bar ``` -------------------------------- ### getSearchValue: Get single search param value Source: https://getanalytics.io/utils/url Returns a single search param value by key. The example retrieves 'bar' for key 'foo'. ```javascript import { getSearchValue } from '@analytics/url-utils' getSearchValue('foo', 'https://my-site.com/?foo=bar') // bar ``` -------------------------------- ### isNodeList: Check DOM node list Source: https://getanalytics.io/utils/types Checks if a value is a list of DOM nodes. The example uses document.querySelectorAll('button') to get a NodeList and passes it to isNodeList. ```javascript import { isNodeList } from '@analytics/type-utils' const buttons = document.querySelectorAll('button') isNodeList(buttons) // true ``` -------------------------------- ### Get value with get Source: https://getanalytics.io/utils/global-storage Get a value from the global context by key. ```javascript import { get } from '@analytics/global-storage-utils' const value = get('key') console.log(value) ``` -------------------------------- ### Using @analytics/simple-analytics in HTML via CDN Source: https://getanalytics.io/plugins/simple-analytics HTML example using the unpkg CDN to load the analytics and Simple Analytics scripts, then initialize analytics with the plugin. Note this pulls the latest version of the package. ```html