[TUTORIAL] Add META SDK to your app - Step by step tutorial

Hey everyone,

If you've launched your app and have a marketing team, or you are the marketing team, you will often hear the sentence "We need to track downloads!". This is quite important to track your KPIs, your campaigns and plan for your future investments. You don't want to be wasting money on campaigns that don't get you downloads/purchases.

Here comes the guide:

1. You need to use Git for this. So if you haven't done that before, don't worry, it's slightly terrifying at first, but very fast becomes second nature. I won't be covering how to do this since this has been done many times, but here is a tutorial from FF: https://docs.flutterflow.io/customizing-your-app/manage-custom-code-in-github... Some short disclaimers:

   1. No, you don't need to be a coder for this

   2. No, you don't need to re-implement META SDK each time

   3. No, it won't take you forever to push to the store - it will take 3min more per push compared to the built-in integration

Now that you have your code, implementing FB SDK is super simple, here are the steps:

We'll start with flutter files.

2. Add flutter_meta_sdk: ^1.0.2 to you pubspec.yaml file

3. Add import 'package:flutter_meta_sdk/flutter_meta_sdk.dart' to the beginning of your main.dart file (you will see lots of imports at the beginning of the file, just add it somewhere there - location doesn't matter, but I always add it last)

Great. Now let's do iOS.

2. Open the Info.plist file (inside the ios/Runner folder). Locate the <key>CFBundleURLTypes</key> array (you can CMD+F). Inside the <array> tag, add the following:

   Copy

   <dict>
           <key>CFBundleURLSchemes</key>
           <array>
               <string>fb[APP_ID]</string>
           </array>
   </dict>

   Make sure you change your APP ID here. So it should look something like this:

   

   Don't touch anything else inside the <array> object. Just add this to the start.

3. After that same array is finished (find the </array>), add this:

   Copy

   <key>FacebookAppID</key>
   <string>[APP_ID]</string>
   <key>FacebookClientToken</key>
   <string>[CLIENT_TOKEN]</string>
   <key>FacebookDisplayName</key>
   <string>[APP_NAME]</string>

   So it should look something like this:

   

4. Now open you AppDelegate.swift file. Here, add this import import FBSDKCoreKit . Also, add the following to your main function:

   Copy

       ApplicationDelegate.shared.application(
         application,
         didFinishLaunchingWithOptions: launchOptions
       )

   Add this to the main function right before the line that starts with "return super..."

Perfect. You've done 2/3 of the work. Android left.

5. Open your build.gradle file (inside the android/app folder). Add this dependency:

   implementation 'com.facebook.android:facebook-android-sdk:latest.release'

6. Now open the strings.xml file (this can be found it android/app/main/res/values). Here, add the following code:

   Copy

   <!-- ... other string resources ... -->
      <string name="facebook_app_id">[APP_ID]</string>
      <string name="fb_login_protocol_scheme">fb[APP_ID]</string>
      <string name="facebook_client_token">[CLIENT_TOKEN]</string> 

   So it should look something like this:

   

7. Open your AndroidManifest.xml file. Add this:

   Copy

           <!-- Facebook Meta App ID -->
           <meta-data android:name="com.facebook.sdk.ApplicationId" 
               android:value="@string/facebook_app_id" />
           <meta-data android:name="com.facebook.sdk.ClientToken" 
               android:value="@string/facebook_client_token" />

   Inside your <application> tag. The easiest way to find this is by using CTRL+F and searching for <application. Now go to the end of tag and add the code below it. So the added code should be inside the <application> tag, and before the <activity> tag. It should look like this:

   

That's it! You can now track your KPIs inside METAs dashboard.

I hope everything is clear and simple. Let me know how it goes!