Integrate the Singular SDK for Conversion and Campaign Tracking

Hi everyone! 👋 If you're running ads for your app on TikTok, Google Ads, or other platforms, you probably want to track installs and conversions to measure your campaign success. Today I show you how to integrate the Singular SDK on any FF app easily. (via Custom Actions)

1. Set Up your Singular Account (it's Free up to 15k conversion)

   Go to https://singular.net and create an account

   Once you're logged in, just follow the long Onboarding (You don't have to do everything, but here are the most important ones) :

   1. Plan Your Onboarding (don't forget to check Firebase SDK if used, "For iOS Will you be showing an ATT Prompt" and the rest is up to you

   2. Add your app (your app need to be published before)

   3. Integrate the Singular SDK, copy the key

   4. And you just need to do the step 6 Set Up Attribution if you use Google Adwords

   5. The most important, is to do the step 7 Add data connectors. Follow the tutorial to connect to Admob to track revenus, Apple Search Ads or TIktok Ads or something else.

   

2. Great, you finished the most difficult part of this Tutorial. Now we need to do some Custom Action on your Flutterflow Project.

   1. On your Project Dependencies add these two dependencies

      1. singular_flutter_sdk: ^1.5.1

      2. app_tracking_transparency: ^2.0.3

         

   2. Then we will create 2 Custom Action. One is for initialize the Tracking and the second one is to track a custom event.

3. Initiliaze the Tracking (Custom Action)

   So now create a blank custom action named "startSingularConfig" with an argument "customUserId" string nullable. and Past this code

   // Automatic FlutterFlow imports

   import '/backend/backend.dart';

   import '/flutter_flow/flutter_flow_theme.dart';

   import '/flutter_flow/flutter_flow_util.dart';

   import '/custom_code/actions/index.dart'; // Imports other custom actions

   import '/flutter_flow/custom_functions.dart'; // Imports custom functions

   import 'package:flutter/material.dart';

   // Begin custom action code

   // DO NOT REMOVE OR MODIFY THE CODE ABOVE!

   import 'package:singular_flutter_sdk/singular.dart';

   import 'package:singular_flutter_sdk/singular_config.dart';

   Future startSingularConfig(String? customUserId) async {

   SingularConfig config =

   SingularConfig('SDKKEY', 'SDKSecret');

   config.customUserId = customUserId;

   Singular.start(config);

   }

   

   Just replace SDKKEY and SDKSecret with your Singular SDK Api Key. This code will initiliaze the Conversion Tracking with the UserID as arguments.

4. Now we will create a second Custom Action to track a custom event

   Create a blank custom action named "sendSingularSDKEvent" with argument "eventName" string NON-nullable and past this code.

   // Automatic FlutterFlow imports

   import '/backend/backend.dart';

   import '/flutter_flow/flutter_flow_theme.dart';

   import '/flutter_flow/flutter_flow_util.dart';

   import '/custom_code/actions/index.dart'; // Imports other custom actions

   import '/flutter_flow/custom_functions.dart'; // Imports custom functions

   import 'package:flutter/material.dart';

   // Begin custom action code

   // DO NOT REMOVE OR MODIFY THE CODE ABOVE!

   import 'package:singular_flutter_sdk/singular.dart';

   import 'package:singular_flutter_sdk/singular_config.dart';

   Future sendSingularSDKEvent(String eventName) async {

   // Use this code please Singular.event(eventName);

   // Call the Singular SDK event function

   Singular.event(eventName);

   }

   

   Great. This code will start track the custom event, you can use it like "AppLevel", or "StartedWorkoutSession" or something like that. Be aware, Standard event like Purchase, App Launch, etc are basically tracked within Singular.

5. Now what we need to do is add these Action somewhere. The are my recommandation

   1. Warning! BEFORE add your sendSingularSDKEvent, you will always need to initiliaze Singular with the Custom Action 1. You just need to add the Action 1 at app launch, you don't need the add everytime the Custom Action 1.

   2. So. At your Login Page (and Signup) add an On Page Load action, set as Custom Action and add these two action. Starting with the startSingularConfig, the second one is optionnal because Singular automatically track app launch. Here if you want you can add the UserID as argument

      

   3. After the Initialization, everywhere you want to track something, just add the Custom Action sendSingularSDKEvent with the Argument a custom name or variable. You can track any event like Page Load, Button action, Rewarded ads, etc.

      

6. And thats' it, now you can use your app for Tiktok Dedicated Ads Campaign for iOS 14+. Wonderful.

And that's it, you've completed the integration. Now it's time to build the application and publish it. It's tricky to follow Testflight events. I don't know if it works on the web, I do know that this code works for tracking my events in the app and for my Tiktok ad campaigns. 🎉

It's really a basic integration, I for example only needed to track these events, but now that it's integrated into FF, you can do more with Singular SDK, so don't hesitate to finalize Singular Onboarding. 😄