LogoLogo
Back to studio
  • Formsort documentation
  • โฉQuickstart
    • ๐ŸŸขGet started with Formsort
    • ๐ŸŽCore concepts
    • โ„น๏ธQuestion and content reference
    • ๐Ÿ“•Key terms
    • ๐Ÿž๏ธCreate your first flow
    • ๐Ÿ“–Add content and collect answers
      • ๐ŸคณCapture demographic data
      • โ„น๏ธAdd informational content
      • ๐Ÿ” Review your variable schema
    • ๐ŸŽจCreate a theme
      • Set brand guidelines
    • ๐ŸคนPersonalize your flow
      • ๐ŸŒŸTemplate your variables
      • ๐Ÿง Add conditional logic
      • ๐Ÿ’ซUsing conditional logic with Calculated and API variables
      • ๐Ÿ”šEnd the flow
    • ๐Ÿ”€Set up integrations
    • ๐Ÿš€Go live
      • Auditing your flow for content, functionality, and design
    • ๐Ÿ’ผCommon use cases
      • ๐Ÿ’”Disqualify responders
      • ๐Ÿ—“๏ธAdd a scheduling option
      • ๐Ÿ“„Allow responders to read and accept your company policies
  • ๐Ÿ—๏ธBuilding flows
    • Flows and variants
      • Flow starts
    • Adding content
      • Groups
      • Steps
        • Settings
        • Logic
        • Style
      • Questions
        • General Settings
        • Style
        • Address
        • Comparison
        • Confirmation
        • Date
        • Date & Time
        • Email address
        • File upload
        • Grid choice
        • Iframe
        • Image upload
        • Number
        • Payment
        • Phone number
        • Postal code
        • Question group
        • Region
        • Select
          • Providing choices via API or calculation
        • Signature
        • SSN
        • Text questions
        • Yes/No
      • Content
        • General Settings
        • Statement
        • Image
        • Video
        • Next button
        • Divider
        • Map
      • Endings
      • Using markdown
      • Using variable templating
        • Template formatting functions
      • Copy-pasting form content
      • Content library
    • Conditions and logic
      • Logical operator reference
      • Advanced logic
    • Variables (answers)
      • Variables from questions
      • Externally provided variables
      • Calculated variables
      • API lookups
      • System Library variables
      • Orphaned variables
    • Schemas
      • JSON Schemas
      • Validating flow schemas
    • Redirects
    • Styling and themes
      • CSS Reference
      • Overriding theme styling
      • Custom CSS overrides
      • Content area
      • Animations and transitions
      • Form Layout
      • Typography
        • Adobe Fonts
        • Hosting custom fonts
      • Color variables
      • Dimension variables
      • Question containers
      • Assets
      • Form Buttons
        • Select buttons
      • Inputs and dropdowns
      • Checkmarks
      • Tables
      • Sliders
      • Divider lines
      • Progress bar
      • Comparison cards
    • Variant settings
      • Form behavior for returning responders
      • Group ranking API
    • Publishing and versions
      • Preview window
      • Deploying
      • History
  • ๐Ÿ’พHandling data
    • Philosophy and data retention policy
    • Viewing form answers
    • Responder UUIDs
    • Environments
      • Loading different environments
    • Passing data in
      • URL parameters
      • POST body
      • Embed query parameters
    • Custom validators
    • Form answers and events
      • Analytics events
      • Signed requests
      • Event payload shape
      • Submission frequencies
      • Runtime error reporting
      • Admin API
      • Flow content data format
    • Integration reference
      • Amplitude
        • Amplitude cross domain tracking
      • BigQuery
      • FullStory
      • Google Analytics
        • Updating from Universal Analytics to GA4
      • Google Cloud Storage
      • Google Sheets
      • Google Tag Manager (GTM)
        • JavaScript triggered by flow events
      • Hubspot
      • Jornaya
      • Optimizely
      • PostgreSQL
      • Redshift
      • Rudderstack
      • S3
      • Salesforce
      • Segment
        • Segment Setup
        • Segment cross domain tracking
      • Stripe
      • TrustedForm
      • Webhooks
        • Zapier
  • ๐Ÿ“บGoing live
    • Custom domains
    • Built-in analytics
    • Embedding
      • Web-Embed API
        • React-embed
      • Adding authentication
      • Embedding forms in iOS and Android
      • Setting up a dev environment
    • Split testing
    • Preflight checklist
  • ๐ŸขTeams
    • Accounts
      • Roles and permissions
    • Events subscriptions
    • Workspace domain detection
Powered by GitBook
On this page
  • Custom events
  • Example function

Was this helpful?

  1. Handling data
  2. Integration reference
  3. Google Tag Manager (GTM)

JavaScript triggered by flow events

Run JavaScript via Google Tag Manager

PreviousGoogle Tag Manager (GTM)NextHubspot

Last updated 11 months ago

Was this helpful?

Formsort integrates directly with a number of 3rd party tools. If the tool you need does not have a prebuilt integration, Google Tag Manager can be used to run JavaScript to extend Formsort's capabilities

Running JavaScript via Google Tag Manager should only be done as a last resort. Formsort cannot provide support for this functionality or guarantee that it will not negatively impact your flows.

Custom events

Formsort dispatches custom events via . These events can be listened to and used to trigger JavaScript via Google Tag Manager.

The following is a list of events with payload definitions:

  • FlowLoaded

{
	flowLabel: string;
	variantLabel: string;
	deploymentUuid: string;
	experimentId?: string;
	formsortEnv: string; // production, staging etc.
}
  • StepLoaded

{
	stepIndex: number;
	stepId: string | number; // loaded step id, falls back to step index if step id is not given
	// and variant details defined in FlowLoaded
}
  • StepCompleted

{
  stepIndex: number,
  stepId: string | number;
  msSpentOnStep: number; // time in milliseconds user spent on this step
  // and variant details defined in FlowLoaded
}
  • FlowFinalized

{
  stepIndex: string; // final step index
  stepId: string | number; // final step id falling back to index number
  redirectUrl?: string; // redirect url of final step (optional)
  // and variant details defined in FlowLoaded
}

Example function

The following JavaScript for a mock analytics service can be triggered in Google Tag Manager based on a single step of a multi-step flow via the StepLoaded event.

window.addEventListener('StepLoaded', (event) => {
	const payload = event.details;
	
	if (payload.stepId === 'watch_this_step') {
		const thirdPartyScript = document.createElement('script');
		thidrPartyScript.src = '...';
		document.head.appendChild(thidrPartyScript);
		
		fetch('my-api-url.com/record-start-event', {
			method: 'POST',
			body: JSON.stringify({ flowLabel: payload.flowLabel, timeStamp: +Date.now() }),
			headers: {
				'content-type': 'application/json',
			},
		})
	}
});

window.addEventListener('StepCompleted', (event) => {
	const payload = event.details;
	
	if (payload.stepId === 'watch_this_step') {
		window.thirdPartyService.stopRecording();
		
		fetch('my-api-url.com/record-end-event', {
			method: 'POST',
			body: JSON.stringify({ flowLabel: payload.flowLabel, timeStamp: +Date.now() }),
			headers: {
				'content-type': 'application/json',
			},
		})
	}
});

๐Ÿ’พ
custom event api