PaperForm GTM Event Listener

PaperForm

Overview

PaperForm is a versatile form and landing page builder. It dispatches two custom window events: PaperformSubmission for final form completions and PaperformPageChange for multi-step form navigation. This listener captures both events with rich context including form ID, submission ID, step data, and timestamps.

Events fired:

• paperformSubmissionEvent, successful form submission
• paperformStepChange, user navigates to next step

Variables: form_ID, submission_ID, paperForm_Step, paperForm_Total_Step, event_timestamp, formData

Why Use This Listener

PaperForm's multi-step tracking capability is unique, you can track funnel progression through form steps, calculate drop-off rates, and optimize individual steps. The submission event also provides a submission_ID for deduplication.

Common Use Cases

• Track form completion as GA4 conversion event
• Measure step-by-step drop-off in multi-page PaperForms
• Capture submission ID for deduplication in GA4
• Fire Google Ads conversions on form completion
• Analyze which form steps have the highest abandonment

Installation

<!-- GTM Custom HTML Tag: PaperForm Listener -->
<script>
window.addEventListener('PaperformSubmission', function(e) {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    'event': 'paperformSubmissionEvent',
    'form_ID': e.detail.submission.form_id,
    'submission_ID': e.detail.submission.id,
    'event_timestamp': e.detail.submission.created_at,
    'formData': e.detail.submission.data
  });
});

window.addEventListener('PaperformPageChange', function(e) {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    'event': 'paperformStepChange',
    'form_ID': e.detail.form_id,
    'paperForm_Step': e.detail.current_page,
    'paperForm_Total_Step': e.detail.total_pages
  });
});
</script>

Fire on: All Pages (Pageview).

Data Layer Output

Submission Event

{
  "event": "paperformSubmissionEvent",
  "form_ID": "abc123",
  "submission_ID": "sub_xyz789",
  "event_timestamp": "2024-01-15T10:30:00Z",
  "formData": { "field_1": "value_1" }
}

Step Change Event

{
  "event": "paperformStepChange",
  "form_ID": "abc123",
  "paperForm_Step": 2,
  "paperForm_Total_Step": 4
}

Triggers to Create

Variables to Capture

GA4 Mapping

Compute completion percentage in GA4:

// Custom JS Variable
function() {
  return Math.round(({{DLV - PF Step}} / {{DLV - PF Total Steps}}) * 100) + '%';
}

Debugging

Best Practices

1. Use submission_ID for GA4 event deduplication
2. Track step changes for funnel analysis in GA4 Explorations
3. Exclude sensitive formData fields before pushing to dataLayer

Related Listeners

• Typeform
• Tally Forms
• Cognito Form