Feature/sc 64568/add an option to the javascript pixel for

[seeratawan01]

This PR introduces a new feature to Usermaven JS Pixel that provides form-tracking capabilities.

Key Points:

• Multiple Options for Form Tracking: This feature allows users to set the level of form tracking by setting the value of data-form-tracking attribute to "all/true", "tagged", or "none/false".

• Data Privacy and Sensitivity: A um-no-capture class which, when added to form fields, will prevent tracking of data from those specific fields. This feature also prevents sensitive data - such as credit card details, social security numbers, or passwords - from being collected.

Setup and Settings:

<script
      src="%%SERVER%%/s/lib.js"
      data-key="testtesttest"
      data-log-level="debug"
      data-autocapture="true"
      data-form-tracking="tagged"
></script>

• all/true: This setting will automatically track all the forms on your web page.
• tagged: This setting tracks only those form submissions that contain the data-um-form attribute.
• none/false: This setting prevents any form tracking.

Example of a tagged form:

<form id="example" data-um-form>

Data Privacy and Sensitivity

This prevents the tracking of data in specific field we can use um-no-capture class.

Example of a protected field:

<input type="email" name="email" data-hidden="false" class="um-no-capture">

Additionally, we automatically prevent sensitive data like credit card numbers, social security numbers, or password field values from being collected to ensure data security.

Submission Payload:

Example Payload:

{
    "event_type": "$form",
    "event_attributes": {
       "form_id": "form1",
       "form_action": "http://localhost:8081/test-case/form-tracking.html?name=seerat+awan&email=&pass=seeratawan&credit-card=6011-1111-1111-1117",
       "form_method": "get",
       "field_1_tag": "input",
       "field_1_type": "text",
       "field_1_value": "seerat awan",
       "field_1_name": "name",
       "field_2_tag": "input",
       "field_2_type": "password",
       "field_2_data_attributes": "{\"hidden\":\"false\"}",
       "field_2_name": "pass",
       "field_3_tag": "textarea",
       "field_3_data_attributes": "{\"hidden\":\"false\"}",
       "field_3_value": "<redacted>",
       "field_3_name": "credit-card"
    }
}

[shortcut-integration[bot]]

This pull request has been linked to Shortcut Story #64568: Add an option to the Javascript Pixel for the form capturing..