@formspark/formtrack
TypeScript icon, indicating that this package has built-in type declarations

0.1.36 • Public • Published

Formtrack logo

Formtrack

Automatically inject UTM parameters into your HTML form submissions.

Sponsored by Formspark, the simple & powerful form solution for developers.

Continuous deployment

About

Marketers use UTM parameters to track the effectiveness of online campaigns across traffic sources and publishing media. The parameters identify the campaign that refers traffic to a specific website and can be parsed by analytics tools and used to populate reports.

Copying these parameters and injecting them into your form submissions manually is tedious and error-prone, we built Formtrack to automate this process.

Installation & usage

Add the Formtrack script.

<script src="https://unpkg.com/@formspark/formtrack" async></script>

Add a data-formtrack attribute to your form element.

<form action="https://submit-form.com" data-formtrack>
  <input type="text" name="message" />
  <button type="submit">Send</button>
</form>

Formtrack will now automatically inject the supported parameters into your HTML form submissions.

Supported parameters

Parameter Purpose Example
ref Identifies which site sent the traffic, not an official parameter. ref=producthunt
referrer Identifies which site sent the traffic, not an official parameter. referrer=producthunt
utm_source Identifies which site sent the traffic, and is a required parameter. utm_source=google
utm_medium Identifies what type of link was used, such as cost per click or email. utm_medium=cpc
utm_campaign Identifies a specific product promotion or strategic campaign. utm_campaign=spring_sale
utm_term Identifies search terms. utm_term=running+shoes
utm_content Identifies what specifically was clicked to bring the user to the site, such as a banner ad or a text link. It is often used for A/B testing and content-targeted ads. utm_content=logolink or utm_content=textlink

Custom parameters

You have the flexibility to define a list of custom parameters.

Include a data-formtrack-params attribute within your form element, and populate it with a comma-separated list of the desired parameters.

<form
  action="https://submit-form.com"
  data-formtrack
  data-formtrack-params="custom_param_1,custom_param_2"
>
  ...
</form>

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i @formspark/formtrack

Weekly Downloads

335

Version

0.1.36

License

MIT

Unpacked Size

104 kB

Total Files

15

Last publish

Collaborators

  • formspark-bjorn