How to track Signup Flow events with JavaScript

Summary

SparkLoop emits browser events during the Signup Flow. You can listen for these events on your website and send them to Meta Pixel, Google Tag Manager, or another analytics tool.

Note: events are only available for the users who use the SparkLoop tracking script.

When to use this

Use these events if you drive paid traffic to your website and want to track what happens after someone subscribes, chooses recommendations, completes a survey, or clicks an offer.

Available events

Event	When it fires
`sl:signup-flow-opened`	Signup Flow opens
`sl:signup-flow-closed`	Signup Flow closes
`sl:signup-flow-recommendations-submitted`	Subscriber submits selected recommendations
`sl:signup-flow-recommendations-skipped`	Subscriber skips recommendations
`sl:signup-flow-survey-submitted`	Subscriber submits the survey
`sl:signup-flow-survey-skipped`	Subscriber skips the survey
`sl:signup-flow-offer-clicked`	Subscriber clicks an offer

Example: send recommendation signups to Meta Pixel

Add this JavaScript to your site, or add it as a Custom HTML tag in Google Tag Manager.

document.addEventListener("sl:signup-flow-recommendations-submitted", function(event) {
  if (typeof fbq !== "function") return;  fbq("track", "Subscribe", {
    content_ids: event.detail.subscribed.map(function(recommendation) {
      return recommendation.id;
    }),
    content_names: event.detail.subscribed.map(function(recommendation) {
      return recommendation.publicationName;
    })
  });
});

Example: send offer clicks to Meta Pixel

document.addEventListener("sl:signup-flow-offer-clicked", function(event) {
  if (typeof fbq !== "function") return;  fbq("trackCustom", "SparkLoopOfferClicked", {
    offer_id: event.detail.offer.id,
    offer_headline: event.detail.offer.headline,
    offer_brand: event.detail.offer.brand,
    conversion_type: event.detail.offer.conversionType
  });
});

Example payloads

sl:signup-flow-opened

{
  "signupFlowId": "sf_123",
  "publicationId": "pub_123",
  "stages": ["recommendations", "survey", "offers"]
}

sl:signup-flow-closed

{
  "signupFlowId": "sf_123",
  "publicationId": "pub_123"
}

sl:signup-flow-recommendations-submitted

{
  "signupFlowId": "sf_123",
  "publicationId": "pub_123",
  "stage": "recommendations",
  "shown": [
    {
      "id": "rec_123",
      "publicationName": "Morning Brew"
    }
  ],
  "subscribed": [
    {
      "id": "rec_123",
      "publicationName": "Morning Brew"
    }
  ]
}

sl:signup-flow-recommendations-skipped

{
  "signupFlowId": "sf_123",
  "publicationId": "pub_123",
  "stage": "recommendations"
}

sl:signup-flow-survey-submitted

{
  "signupFlowId": "sf_123",
  "publicationId": "pub_123",
  "stage": "survey",
  "answers": [
    {
      "label": "What is your role?",
      "inputType": "single_select",
      "value": "Founder"
    },
    {
      "label": "Which topics interest you?",
      "inputType": "multi_select",
      "value": "[\"Marketing\",\"Growth\"]"
    }
  ]
}

sl:signup-flow-survey-skipped

{
  "signupFlowId": "sf_123",
  "publicationId": "pub_123",
  "stage": "survey"
}

sl:signup-flow-offer-clicked

{
  "signupFlowId": "sf_123",
  "publicationId": "pub_123",
  "stage": "offers",
  "offer": {
    "id": "offer_123",
    "headline": "Get 20% off your first month",
    "conversionType": "click",
    "brand": "Acme"
  }
}

Testing your setup

Open your browser console and paste this before testing your form:

document.addEventListener("sl:signup-flow-recommendations-submitted", function(event) {
  console.log("Recommendations submitted", event.detail);
});document.addEventListener("sl:signup-flow-survey-submitted", function(event) {
  console.log("Survey submitted", event.detail);
});document.addEventListener("sl:signup-flow-offer-clicked", function(event) {
  console.log("Offer clicked", event.detail);
});

Then submit your form and complete the Signup Flow. You should see the event data logged in the console.