Conversion Goals

Unbounce’s conversion goals provide users with a way to track the success of their landing pages.

In order to active this feature in our apps, there’s a function provided by Smart Builder SDK titled getAfterFormSubmitScript.

You can use this function from the following package:

import { getAfterFormSubmitScript } from 'config/global-dependencies/smart-builder-sdk'

This function also require two arguments, the first one is entityId (string) and the second one is trackingEnabled (boolean).

entityId: this argument is used by the function to indicate the entity to be tracked as a form conversion. See the code below, the entityId is already typed in ComponentProps, you can get the value using object destructuring in your component.
```
// ... imports

const HelloWorld = ({ data, entityId }: ComponentProps<DataStructure>) => {
  return <div>My Entity ID: {entityId}</div>;
};

// ... WithControls HOC
```
trackingEnabled: if this value is true the tracking will be enabled, otherwise is disabled. Below is an example of how to call the function:

getAfterFormSubmitScript("myEntity", true);

Note, when you call getAfterFormSubmitScript with the proper arguments, it will return a code that must be called on the published page for the conversion to go through.

Example

We often follow a pattern with all the apps that are able to implement this conversion feature. Let’s dive into it.

Before we add tracking conversion to an application, a tracking property is needed in our app schema. The following code shows how to declare this property:

const schema = Schema.object({
  itemId: Schema.string(),
  date: Schema.string(),
  tracking: Schema.formUrl(), // tracking property
});

Notice that formUrl() is being used for this property. For more information about the Schema please visit the following page: Schema Methods/Types

To allow user to active or deactivate conversions, commonly a toggle component is created and added to the app controls: