3rd Party Setup

Google Login #

If you want to enable your Google login then go to https://console.firebase.google.com and find the project that you have already created for push notification setup then open your Project->Authentication->Sign-in method-> Add new Provider->Additional providers then select Google and enable finlay Save.

Android Setup : 

• You need to set a fingerprint in Firebase, go to Project >Project settings > Android apps then select your user app at the bottom you will find add fingerprint then enter your SHA1 and SHA256 and Save. Visit this site here you will get the instruction on how you will get SHA1 and SHA256 Link
• After publishing on the Play Store you need to add your SHA1 and SHA256 form App integrity. To found App Integrity App signing, go to Google Play Console Project-> Release > Setup > App integrity > App signing
• Download your google-service.json file and Copy that file and paste it under <project>/android/app/ folder.
• Go to https://console.cloud.google.com and select your firebase project, you can find your Client id in, APIs & Services-> Credentials -> OAuth 2.0 Client IDs then select Web Client and finally copy the Client ID.
• Go to app_constants.dart file and add your googleServerClintId here.

static const String googleServerClientId = 'YOUR_CLIENT_ID_HERE';

static const String googleServerClientId = 'YOUR_CLIENT_ID_HERE';

• Go to <project>/lib/main.dart and change FirebaseOptions argument value with Firebase configuration object value.

await Firebase.initializeApp(
   options: const FirebaseOptions(
     apiKey: "AIzaSyD_Y7SAZoGunqJyloxuCDcm_qfHy-ZXn_k",
     appId:  "1:361171276071:web:0e60b9a7ba7f9993b45902",
     messagingSenderId:  "361171276071",
     projectId: "on-demand-project",
     storageBucket: "on-demand-project.appspot.com",
   )
);

await Firebase.initializeApp(
   options: const FirebaseOptions(
     apiKey: "AIzaSyD_Y7SAZoGunqJyloxuCDcm_qfHy-ZXn_k",
     appId:  "1:361171276071:web:0e60b9a7ba7f9993b45902",
     messagingSenderId:  "361171276071",
     projectId: "on-demand-project",
     storageBucket: "on-demand-project.appspot.com",
   )
);

iOS Setup :

• Go to https://console.cloud.google.com and select your firebase project, you can find your Client id in, APIs & Services-> Credentials -> OAuth 2.0 Client IDs then select Web Client and finally copy the Client ID.

Go to <project>/ios/Runner/Info.plist and add your Client ID

<dict>
   <key>CFBundleTypeRole</key>
   <string>Editor</string>
   <key>CFBundleURLSchemes</key>
   <array>
       <string>YOUR_CLIENT_ID</string>
   </array>
</dict>

<dict>
   <key>CFBundleTypeRole</key>
   <string>Editor</string>
   <key>CFBundleURLSchemes</key>
   <array>
       <string>YOUR_CLIENT_ID</string>
   </array>
</dict>

Web Setup : 

• Go to <project>/web/index.html and set your CLIENT_ID

<meta name="google-signin-client_id" content="YOUR_CLIENT_ID">

<meta name="google-signin-client_id" content="YOUR_CLIENT_ID">

Facebook Login #

• If you want to configure Facebook login in your project then create your own app form https://developers.facebook.com/apps   
• Configure your app settings from App Settings->Basic with your own Display name, Contact email, Privacy Policy URL, Terms of Service URL, App icon, web app domain
• Add Facebook Login form the products section .
• Add your platform (web/android/ios) with click Add platform and configure your app.
• To Configuration settings in App Facebook Login->Settings->Client OAuth settings enable Client OAuth login, Web OAuth login, Enforce HTTPS, Use Strict Mode for redirect URIs, and Login with the JavaScript SDK.
• Also, you need to add your Allowed Domains for the JavaScript SDK (ex- https://demandium-web.6amtech.com) 
• To get profile information you need to request access in App Review->Permissions and features get access to public_profile
• Now open your flutter project go to <project>/lib/main.dart and replace it with your Facebook appID
• For android go to <project>/android/app/src/main/res/values/string.xml and set the value.

<resources>
  <string name="app_name">Demandium</string>
  <string name="facebook_app_id">YOUR_APP_ID</string>
  <string name="fb_login_protocol_scheme">fb_YOUR_APP_ID</string>
  <string name="facebook_client_token">Go_to_your_fb_app->Settings->Advance->Security->Client token</string>
</resources>

<resources>
  <string name="app_name">Demandium</string>
  <string name="facebook_app_id">YOUR_APP_ID</string>
  <string name="fb_login_protocol_scheme">fb_YOUR_APP_ID</string>
  <string name="facebook_client_token">Go_to_your_fb_app->Settings->Advance->Security->Client token</string>
</resources>

• For ios go to ios/Runner/Info.plist and set value

<array>
   <dict>
       <key>CFBundleURLSchemes</key>
       <array>
         <string>fb_your_app_id</string>
       </array>
   </dict>
<array>
<key>FacebookAppID</key>
<string>app_id</string>
<key>FacebookClientToken</key>
<string>
   Go_to_your_fb_app->Settings->Advance->Security->Client  token
</string>
<key>FacebookDisplayName</key>
<string>name</string>

<array>
   <dict>
       <key>CFBundleURLSchemes</key>
       <array>
         <string>fb_your_app_id</string>
       </array>
   </dict>
<array>
<key>FacebookAppID</key>
<string>app_id</string>
<key>FacebookClientToken</key>
<string>
   Go_to_your_fb_app->Settings->Advance->Security->Client  token
</string>
<key>FacebookDisplayName</key>
<string>name</string>

• For the web go to <project>/lib/main.dart set your appID.

await FacebookAuth.instance.webAndDesktopInitialize(
appId: "YOUR_FB_APP_ID",
   cookie: true,
   xfbml: true,
   version: "v15.0",
);

await FacebookAuth.instance.webAndDesktopInitialize(
appId: "YOUR_FB_APP_ID",
   cookie: true,
   xfbml: true,
   version: "v15.0",
);

Apple Login #

To configure Apple Login  follow the steps mentioned below –

Step 1: Find out Team ID

• Visit the Apple Developer page.
• Go to Account and find the Membership details section. There you will find TeamID.

Step 2: Create or Use App ID

• Go to the Identifiers list.
• Click the Plus icon beside Identifiers, and then select App IDs and continue
• Select type App and continue.
• Provide a brief description and a Bundle ID (the same one used for your app). This identifier will serve as the Client ID for Apple Sign-In.
• In Capabilities, select the required options like Push Notifications, Sign In with Apple, and Associated Domains.
• Click Continue and proceed.

Step 3: Create Service ID

• Go again to the Identifiers list.
• Click the Plus icon beside Identifiers, and then select Service IDs and continue
• Add a description and an identifier for your service, then click Continue
• Download the file labeled as AuthKey_example.p8. This is the Service File, and the segment “example” within the file name is indicative of the KeyID. To illustrate, if your file is titled AuthKey_XXXXXXXXXX.p8, then XXXXXXXXXX signifies the KeyID.

Step 4: Submit Data in the Admin Panel

• Go to the Admin panel.
• Navigate to Configurations > 3rd Party > Apple Login setup your data.
• Use the following information:
  • Client ID: The Bundle ID you previously specified.
  • Team ID: Obtained from the Apple Developer page.
  • Key ID: KeyID from the AuthKey_example.p8 file name.
  • Service File: Downloaded AuthKey_example.p8 file.
• Save and enable Apple Login status.

By following these steps, you can successfully set up and implement Apple Sign-In in your Project.

Firebase OTP Configuration #

For configuring OTP in the Firebase, you must create a Firebase project first. If you haven’t created any project for your application yet, please follow the instructions given here.

Now go the Firebase console and follow the instructions below-

Adding sign-in method​

• Go to your Firebase project.
• Navigate to the Build menu from the left sidebar and select Authentication.
• Get started on the project and go to the Sign-in method tab.
• From the Sign-in Providers section, select the Phone option.
• Ensure to enable the method Phone and press save

Admin Panel Configuration​

To configure the Admin panel for Firebase OTP verification, follow these steps:

• Go to your Firebase project, In the Project settings, locate your Web API Key and make a copy of it.
• Go to the Admin panel and navigate Firebase > Authentication.
• Paste the Web API Key copied from your Firebase project.
• Turn on the Firebase OTP Verification Status.
• Turn on the Phone Verification option from Login Setup > OTP Number Verification.

Web Configuration​

To configure your web domain for Firebase OTP verification:

• Go to your Firebase project.
• Navigate to the Build menu from the left sidebar and select Authentication.
• Go to the Settings tab.
• Under the Authorised Domains section, add your web domain without specifying “http” or “https.” (for example: example.com).

App Configuration​

To configure the app, follow the steps below-

• Go to the firebase console Your Project > Project settings > General > Your apps.
• Download google-services.json file for android and GoogleService-Info.plist for IOS app.
• Copy that file and paste it under <project>/android/app/ folder for android and under <project>/iOS/ for IOS.

Select your app at the bottom you will find an add fingerprint option then enter your SHA1 and SHA256 and Save. Visit this site here you will get the instruction on how you will get SHA1 and SHA256 Link

Marketing Analytics Integration #

Prerequisites & Platform Key Checklist:

Before starting the implementation, ensure you have the following keys and access levels ready. This will prevent interruptions during the technical setup.

Step 1 : Install Google Tag Manager (index.html)

Create a Google Tag Manager Account #

• Go to Google Tag Manager.
• Click Create Account.
• Enter:
  • Account Name
  • Country
• In Container Setup:
  • Container Name: e.g. Demandium
  • Target Platform: Web
• Accept Data Processing Terms (GDPR) and continue.

Install GTM Code in web/index.html #

After creating the container, you will see at top a GTM ID like:

GTM-XXXXXXXX

GTM-XXXXXXXX

Example:
Copy the code below and paste it onto every page of your website.

1. Paste this code as high in the <head> of the page as possible:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXXX');</script>
<!-- End Google Tag Manager -->

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXXX');</script>
<!-- End Google Tag Manager -->

2. Paste this code immediately after the opening <body> tag:

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Step 2 : Creating User-Defined Variables #

We need 6 Data Layer Variables to capture product data.

General Steps:

1. Open Google Tag Manager.
2. Go to Variables.
3. Scroll to User‑Defined Variables → Click New.
4. Click Variable Configuration.
5. Select Data Layer Variable.
6. Enter the variable name and save.

Now, configure and save the following 6 variables individually:

Required Variables #

Result: You should now see a list of 6 new variables in your “User-Defined Variables” section.

Step 3: Create Trigger – Add to Cart

1. Go to Triggers → Click New.
2. Name the trigger: add_to_cart.
3. Click Trigger Configuration.
4. Select Custom Event.
5. Event Name:

add_to_cart

add_to_cart

6. Trigger fires on: All Custom Events.
7. Click Save.

Step 4 : Configure Base Pixels

A. Facebook (Meta) Base Pixel #

1. Go to Tags > New.
2. Name the Tag: Facebook – Base Code.
3. Click Tag Configuration and select Custom HTML.
4. Paste the Facebook Base Code (found in Facebook Events Manager > Data Sources > Settings > Set up Meta Pixel).

Meta Pixel Documentation

Example: 

<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');

fbq('init', 'YOUR_FACEBOOK_APP_ID');
fbq('track', 'PageView');
</script>

<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');

fbq('init', 'YOUR_FACEBOOK_APP_ID');
fbq('track', 'PageView');
</script>

5. Click Triggering.
6. Select Initialization – All Pages.
   • Note: Using “Initialization” ensures it loads before anything else.
7. Click Save.

B. TikTok Base Pixel #

1. Go to Tags > New.
2. Name the Tag: TikTok – Base Code.
3. Click Tag Configuration and select Custom HTML.
4. Paste the TikTok Base Code (found in TikTok Ads Manager > Assets > Events > Web Events > Set Up Web Events).
   • Make sure the code includes ttq.page() at the end.

TikTok Pixel Documentation

Example: 

<script>
!function (w, d, t) {w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie","holdConsent","revokeConsent","grantConsent"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(
var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var r="https://analytics.tiktok.com/i18n/pixel/events.js";ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=r,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};n=document.createElement("script")
;n.type="text/javascript",n.async=!0,n.src=r+"?sdkid="+e+"&lib="+t;e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(n,e)};

  ttq.load('YOUR_TIKTOK_EVENT_ID');
  ttq.page();
}(window, document, 'ttq');
</script>

<script>
!function (w, d, t) {w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie","holdConsent","revokeConsent","grantConsent"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(
var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var r="https://analytics.tiktok.com/i18n/pixel/events.js";ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=r,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};n=document.createElement("script")
;n.type="text/javascript",n.async=!0,n.src=r+"?sdkid="+e+"&lib="+t;e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(n,e)};

  ttq.load('YOUR_TIKTOK_EVENT_ID');
  ttq.page();
}(window, document, 'ttq');
</script>

5. Click Triggering.
6. Select Initialization – All Pages.
7. Click Save.

Step 5 : Configure “Add to Cart” Event Tags

A. Facebook (Meta) Add to Cart Tag #

1. Go to Tags > New.
2. Name the Tag: Facebook – Add To Cart.
3. Click Tag Configuration and select Custom HTML.

Paste the following code exactly:

<script>
fbq('track', 'AddToCart', {
  content_ids: ['{{product_id}}'],
  content_name: '{{product_name}}',
  content_type: '{{content_type}}',
  value: {{value}},
  currency: '{{currency}}',
  quantity: {{quantity}}
});
</script>

<script>
fbq('track', 'AddToCart', {
  content_ids: ['{{product_id}}'],
  content_name: '{{product_name}}',
  content_type: '{{content_type}}',
  value: {{value}},
  currency: '{{currency}}',
  quantity: {{quantity}}
});
</script>

4. Tag Sequencing (Critical):
   • Scroll down to Advanced Settings > Tag Sequencing.
   • Check the box: 🗹 Fire a tag before Facebook – Add To Cart fires.
   • Setup Tag: Select Facebook – Base Code (created in Step 4).
   • Check: 🗹  Don’t fire if Facebook – Base Code fails.
5. Triggering:
   • Click Triggering and select add_to_cart.
6. Click Save.

B. TikTok Add to Cart Tag #

1. Go to Tags > New.
2. Name the Tag: TikTok – Add To Cart.
3. Click Tag Configuration and select Custom HTML.

Paste the following code exactly:

<script>
  if (window.ttq) {
    ttq.track('AddToCart', {
      content_type: '{{content_type}}',
      content_id: '{{product_id}}',
      value: {{value}},
      currency: '{{currency}}'
    });
  }
</script>

<script>
  if (window.ttq) {
    ttq.track('AddToCart', {
      content_type: '{{content_type}}',
      content_id: '{{product_id}}',
      value: {{value}},
      currency: '{{currency}}'
    });
  }
</script>

4. Tag Sequencing (Critical):
   • Scroll down to Advanced Settings > Tag Sequencing.
   • Check the box: 🗹 Fire a tag before TikTok – Add To Cart fires.
   • Setup Tag: Select TikTok – Base Code (created in Step 4).
   • Check: 🗹 Don’t fire if TikTok – Base Code fails.
5. Triggering:
   • Click Triggering and select add_to_cart.
6. Click Save.

How to Check if Google Tag Manager Is Working Using Preview Mode:

Step 1 : Start Preview Mode #

• Open Google Tag Manager
• Select your container
• Click the Preview button from the top-right corner
• The Tag Assistant window will open

Step 2 : Connect Your Website #

• Enter the website URL you just set up with GTM
• Click Connect
• Your website will open in a new tab
• A Tag Assistant debug panel will appear at the bottom or side of the page
• This confirms that Preview mode is connected successfully

Step 3 : Trigger an Action (Add to Cart Test) #

• On your website, add a product to the cart
• This action should trigger your tracking event

Step 4 : Check the Event in GTM Preview #

• Go back to the Tag Assistant / Preview window
• In the left event timeline, look for the event:
  add_to_cart
• Click the event to see detailed information

You will see an event triggered add_to_cart

Step 5 : Verify Variables and Data Layer #

• Open the Variables tab
• Confirm all initialized variables are showing with correct values
• Open the Data Layer tab
• Verify that the expected parameters (product info, price, ID, etc.) are being passed correctly

Also you can see Data layer

IOS Setup

File 1: ios/Runner/AppDelegate.swift #

• Import TikTok SDK at the top

import TikTokBusinessSDK

import TikTokBusinessSDK

• Initialize TikTok:

TikTokBusiness.initWithAppId("YOUR_TIKTOK_APP_ID")

TikTokBusiness.initWithAppId("YOUR_TIKTOK_APP_ID")

File 2: ios/Runner/Info.plist #

Add the following values:

TikTok URL Scheme

<string>tiktokYOUR_TIKTOK_APP_ID</string>

<string>tiktokYOUR_TIKTOK_APP_ID</string>

Facebook App ID

<string>YOUR_FACEBOOK_APP_ID</string>

<string>YOUR_FACEBOOK_APP_ID</string>

Facebook Client Token

<string>YOUR_FACEBOOK_CLIENT_TOKEN</string>

<string>YOUR_FACEBOOK_CLIENT_TOKEN</string>

File 3: ios/GoogleService-Info.plist #

Enable analytics:

<key>IS_ANALYTICS_ENABLED</key>
<true/>

<key>IS_ANALYTICS_ENABLED</key>
<true/>

Android Setup

Useful Links #

• Firebase Console 
• Google Analytics (GA4)
• Meta Android SDK
• TikTok Android SDK

A. Google Analytics (Firebase GA4) #

1. Firebase Console Setup #

1. Go to Firebase Console → Add Android App.
2. Enter your Android package name.
3. Download google-services.json.
4. Place the file here:

android/app/google-services.json

B. Meta (Facebook) – Android #

B. Meta (Facebook) – Android

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <string name="app_name">YOUR_APP_NAME</string>
  <string name="facebook_app_id">YOUR_APP_ID</string>
  <string name="fb_login_protocol_scheme">LOGIN_PROTOCOL_SCHEMA</string>
  <string name="facebook_client_token">FACEBOOK_CLIENT_TOKEN</string>
</resources>

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <string name="app_name">YOUR_APP_NAME</string>
  <string name="facebook_app_id">YOUR_APP_ID</string>
  <string name="fb_login_protocol_scheme">LOGIN_PROTOCOL_SCHEMA</string>
  <string name="facebook_client_token">FACEBOOK_CLIENT_TOKEN</string>
</resources>

Where to find: #

C. Tik Tok – Android #

lib/helper/Analytics/tiktok_analytics.dart

androidAppId: 'YOUR_ANDROID_APP_ID',
tikTokAndroidId: 'TIKTOK_ANDROID_ID',
iosAppId: 'YOUR_iOS_APP_ID',
tiktokIosId: 'TIKTOK_iOS_ID',

androidAppId: 'YOUR_ANDROID_APP_ID',
tikTokAndroidId: 'TIKTOK_ANDROID_ID',
iosAppId: 'YOUR_iOS_APP_ID',
tiktokIosId: 'TIKTOK_iOS_ID',

Where to find: #

Quick FAQ: Troubleshooting Your Setup #

1. Why isn’t my data showing in the dashboard yet?

• Web & Mobile: Standard reports (GA4, Meta, TikTok) typically take 24–48 hours to process for Mobile. Use Realtime Overview to verify hits immediately for the web.
• App Latency: Mobile SDKs “batch” data to save battery; events may only upload every 30–60 minutes or when the app is restarted.

2. How can I confirm the setup is working without waiting 2 days?

• Web: Use the Meta/TikTok Pixel Helper browser extensions or GA4’s Realtime Overview to see live event streams.

• Mobile: Check Firebase Analytics Dashboard or your developer console (Logcat/Xcode) to confirm events are firing from the device.