@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 (12 LTS or 14 LTS) 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) 2021 Snowplow Analytics Ltd, 2010 Anthon Pang.

All rights reserved.