Automating5 Min.

How to track form activity with custom tracking code

Tripetto offers direct tracking with Google Analytics and Facebook Pixel, but you can also use your own custom tracking code to track form activity with other tracking services.


When to use

By tracking the activity of respondents in your forms, you can get insight information of their behaviors. This helps you to analyze form starts, form completions, interactions and drop-offs.

There are lots of services that can help you to analyze your activity data. Tripetto offers direct integrations with Google Analytics and Facebook Pixel, but if you want to connect with other tracking services you can use the custom tracking code option. To do so, you need to have JavaScript programming skills.

Tripetto studio: only in embedded forms

You can use the custom tracking code in the Tripetto studio at tripetto.app, but this will only work for your embedded forms. This will not work if you use the shareable link of your form at the tripetto.app domain.

Please also make sure you always update your embed code in your website/app.


How to use

In this article we will show the steps you have to take to send Tripetto activity data to a tracking service of your choosing. You can also have a look at our global article about how form activity tracking works.

JavaScript programming skills needed

The custom tracking code works with JavaScript. We assume you have the needed JavaScript programming skills to setup your own custom tracking code. Tripetto support does not offer any programming help on writing custom tracking code.

Step 1 - Prepare tracking service

First step is to make sure your tracking service is ready to receive data from Tripetto. Please first dive into the documentation of your tracking service to find out if/how it's possible to connect with it via JavaScript.

In your tracking service:

Make sure you have configured your tracking service. It depends on the tracking service you're using how to do this. It's important that your tracking service is able to access the domain that the Tripetto form is served from.

In your WordPress site this will be your own domain name in most cases, because your form will run on your own site's domain.

If you're using the Tripetto studio you can only track form activity if you have embedded the form in your own site. That's why you have to make sure that your tracking service is able to access that domain.

Step 2 - Connect tracking service

Next step is to connect your Tripetto form to your tracking service. This is where your JavaScript programming skills come in.

In Tripetto:

Open your form in Tripetto. At the top menu bar of the form builder click Automate Click Tracking. The Tracking pane will show up on the right side of the form builder.

After enabling the feature Track form activity with custom tracking code you can start with the custom tracking code.

Screenshot of tracking in Tripetto
Enable custom tracking code.

Now we have to develop the custom tracking code. The custom tracking code needs to be a function and should begin with function() { and end with }.

Code analysis

Tripetto performs some static analysis on the correctness of the code. It is key to supply a function with the specified beginning and ending. Otherwise, the tracking code will simply not run.

Within the function signature you should do two things:

  1. Implement any initialization code for your tracking service (for example loading scripts);
  2. Return a function from your tracking function. That return function will be invoked by Tripetto every time an event is triggered.

So, the basic tracking code will look like this:

function() {
  // Place your tracker initialization code here.

  // The function returned here is invoked by Tripetto each time a trackable event occurs.
  return function(event, form, block) {
    // Place your event tracking code here.
  }
}

The return function receives three arguments:

  • event - This is the event name and contains one of the following string values:
    • start - Tracks when a form is started;
    • complete - Tracks when a form is completed;
    • stage - Tracks when a block becomes available.
      It depends on your selected form face when this event will be fired:
      • Autoscroll form face: this event will be fired when a block gets activated;
      • Chat form face: this event fires when a block becomes answerable;
      • Classic form face: this even fires when the block becomes visible.
    • unstage - Tracks when a block becomes unavailable.
      It depends on your selected form face when this event will be fired:
      • Autoscroll form face: this event will be fired when a block gets deactivated;
      • Chat form face: this event fires when a block becomes unanswerable;
      • Classic form face: this even fires when the block becomes invisible.
    • focus - Tracks when an input element gains focus;
    • blur - Tracks when an input element loses focus;
    • pause - Tracks when a form is paused.
  • form - Object that contains information about the form. Has the following properties:
    • name - String that contains the name of the form;
    • reference - String with the reference (identifier) of the form;
    • runner - String with the name of the runner;
    • fingerprint - String that contains the fingerprint of the form.
  • block - Object that contains information about a block. Has the following properties:
    • id - String with the identifier of the block;
    • name - String with the name of the block.

Step 3 - Receive tracking data

Assuming your tracking code is correct, your tracking service will now receive the configured tracking data from your Tripetto form. Let's test this.

Tripetto studio: only in embedded forms

You can use the custom tracking code in the Tripetto studio at tripetto.app, but this will only work for your embedded forms. This will not work if you use the shareable link of your form at the tripetto.app domain.

Please also make sure you always update your embed code in your website/app.

In Tripetto:

Open your Tripetto form and submit an entry to it. The best way to do so, is by just opening your form via the shareable link and perform the actions you want to track yourself.

In tracking service:

Now switch back to your tracking service and have a look if the data is shown.

Delay in your tracking service

Please notice that although Tripetto sends all events in realtime, it can take some time before a tracking service shows the events from your Tripetto form. Depending on your tracking service this can take up to 24 hours.

From there on you can follow the instructions of your tracking service to configure the desired analysis. For help with this, please have a look at the help section of your tracking service. Also see our in-depth articles about measuring completion rates and dropoffs.

In this article

    Help us improve