@snowplow/browser-plugin-form-tracking

What is @snowplow/browser-plugin-form-tracking?

@snowplow/browser-plugin-form-tracking is a plugin for the Snowplow JavaScript tracker that allows you to track form interactions on your website. It helps in capturing form submissions, field changes, and other form-related events, providing valuable insights into user behavior and form performance.

What are @snowplow/browser-plugin-form-tracking's main functionalities?

Track Form Submissions

This feature allows you to track when a form is submitted. By enabling form tracking, the plugin will automatically capture form submission events and send them to the Snowplow collector.

const { newTracker } = require('@snowplow/browser-tracker');
const { FormTrackingPlugin } = require('@snowplow/browser-plugin-form-tracking');

newTracker('sp1', '{{collector_url}}', { plugins: [ FormTrackingPlugin() ] });

window.snowplow('enableFormTracking');

Track Field Changes

This feature allows you to track changes to form fields. By setting the `trackFieldChanges` option to true, the plugin will capture events whenever a form field value is changed.

const { newTracker } = require('@snowplow/browser-tracker');
const { FormTrackingPlugin } = require('@snowplow/browser-plugin-form-tracking');

newTracker('sp1', '{{collector_url}}', { plugins: [ FormTrackingPlugin() ] });

window.snowplow('enableFormTracking', { trackFieldChanges: true });

Custom Form Tracking

This feature allows you to specify which forms to track by providing a list of form selectors. This is useful if you only want to track specific forms on your website.

const { newTracker } = require('@snowplow/browser-tracker');
const { FormTrackingPlugin } = require('@snowplow/browser-plugin-form-tracking');

newTracker('sp1', '{{collector_url}}', { plugins: [ FormTrackingPlugin() ] });

window.snowplow('enableFormTracking', { forms: ['#myForm'] });

Other packages similar to @snowplow/browser-plugin-form-tracking

form-serialize

form-serialize is a lightweight library for serializing form data to JSON. Unlike @snowplow/browser-plugin-form-tracking, it does not provide tracking capabilities but is useful for handling form data in a structured format.

formik

Formik is a popular library for building and managing forms in React. It provides a comprehensive set of tools for form validation, state management, and submission handling. While it does not offer tracking features, it is highly useful for form management in React applications.

redux-form

redux-form is a library for managing form state in Redux. It integrates form state with the Redux store, making it easier to manage complex form interactions. Unlike @snowplow/browser-plugin-form-tracking, it focuses on state management rather than tracking user interactions.

README

Snowplow Form Tracking

Browser Plugin to be used with @snowplow/browser-tracker.

Adds form tracking events to your Snowplow tracking.

Maintainer quick start

Part of the Snowplow JavaScript Tracker monorepo.
Build with Node.js (18 - 20) and Rush.

Setup repository

npm install -g @microsoft/rush 
git clone https://github.com/snowplow/snowplow-javascript-tracker.git
rush update

Package Installation

With npm:

npm install @snowplow/browser-plugin-form-tracking

Usage

Initialize your tracker with the FormTrackingPlugin:

import { newTracker } from '@snowplow/browser-tracker';
import { FormTrackingPlugin } from '@snowplow/browser-plugin-form-tracking';

newTracker('sp1', '{{collector}}', { plugins: [ FormTrackingPlugin() ] }); // Also stores reference at module level

Then use the available functions from this package to track to all trackers which have been initialized with this plugin:

import { enableFormTracking } from '@snowplow/browser-plugin-form-tracking';

enableFormTracking({options: { ... }});

Copyright and license

Licensed and distributed under the BSD 3-Clause License (An OSI Approved License).

Copyright (c) 2022 Snowplow Analytics Ltd, 2010 Anthon Pang.

All rights reserved.