Developer Guide
API GuideDeveloper Guide
  • Overview
    • Getting Started
    • Customers and Visitors
    • Events and Business Objects (BOs)
      • Sample Event Templates
  • Website
    • Getting Started
      • Direct JS Implementation
      • JS Integration via GTM
      • Tracking Haravan website events
    • Tracking Users
    • Tracking Events
      • [Direct] Sample E-Commerce Events
        • View Product
        • Add a Product to the Shopping Cart
        • View the Shopping Cart
        • Remove a Product from the Shopping Cart
        • Search for Product(s)
        • Checkout Shopping Cart
        • Apply Promotion Code
        • Purchase Product(s)
      • [GTM] Sample E-Commerce Events
        • View Product
        • Add a Product to the Shopping Cart
        • View the Shopping Cart
        • Remove a Product from the Shopping Cart
        • Search for Product(s)
        • Checkout Shopping Cart
        • Apply Promotion Code
        • Purchase Product(s)
    • Web Push
  • Android
    • Getting Started
    • Tracking Users
    • Tracking Events
    • Push Messaging
    • App Inbox Messaging
  • iOS
    • Getting Started
      • Integration of Antsomi iOS SDK
    • Tracking Users
    • Tracking Events
    • Push Messaging
  • Hybrid Apps
    • React Native
      • Tracking Users
      • Tracking Events
        • Sample E-Commerce Events
          • View Product
          • Add a Product to the Shopping Cart
          • View the Shopping Cart
          • Remove a Product from the Shopping Cart
          • Search for Product(s)
          • Checkout Shopping Cart
          • Apply Promotion Code
          • Purchase Product(s)
      • Push Messaging
      • App Inbox Messaging
    • Flutter
      • Tracking Users
      • Tracking Events
        • Sample E-Commerce Events
          • View Product
          • Add a Product to the Shopping Cart
          • View the Shopping Cart
          • Remove a Product from the Shopping Cart
          • Search for Product(s)
          • Checkout Shopping Cart
          • Purchase Product(s)
      • Push Messaging
      • App Inbox Messaging
      • App In-line Content
  • Antsomi Service Integrations
    • Media Template
    • Media JSON
      • Sample E-Commerce Events
        • Search for Product(s)
        • View Product
        • Add a Product to the Shopping Cart
        • Checkout Shopping Cart
        • Purchase Product(s)
      • Sample User Events
        • Sign-in
        • Sign-up
      • Sample Opt-in Events
        • Subscribe to Email marketing
        • Subscribe to OneSignal channel
  • 3rd Party Integrations
    • Shopify
      • Tracking Shopify website events
    • LINE
      • Integrating LINE Login with your web app
    • Google Ad Manager
      • Targeting CDP365 segment via PPID(s)
Powered by GitBook
On this page
  • What is Media JSON?
  • Implementation with Antsomi Flutter SDK
  • 1. Retrieving Media JSON data
  • 2. Utilizing Retrieved Media JSON
  • 3. Trigger Tracking Events
  1. Hybrid Apps
  2. Flutter

App In-line Content

Deliver personalized in-app messages to your Flutter users. Leverage Antsomi SDK for targeted communication & a frictionless user experience.

PreviousApp Inbox MessagingNextMedia Template

Last updated 1 year ago

Supported from Antsomi SDK v0.0.29.

App In-line Content allows you to insert content directly into your app's screen without disturbing the user experience. It also allows you to dynamically update your app's content and run relevant and contextual campaigns.

You may use the In-line Content to change areas of your app or show banner ads based on live triggers and segmentation.

This capability is provided in the Antsomi Media JSON feature. If you are not familiar with this feature, head over to this .

What is Media JSON?

Media JSON acts as a structured data format that stores content and configuration information associated with Customer Journeys within CDP365. These Customer Journeys represent pre-defined sequences of interactions or touchpoints designed to engage users based on their behavior and attributes. By associating Media JSON with specific Customer Journeys, you can dynamically deliver personalized content to users at the right time.

Implementation with Antsomi Flutter SDK

The Antsomi Flutter SDK offers functionalities to retrieve Media JSON for your Flutter applications. Here's a breakdown of the process:

Before continuing, please ensure that you've

1. Retrieving Media JSON data

Once you have access to the initialized AntsomiSDK instance (assuming you've completed the as documented by the Antsomi SDK provider), you can utilize the getMediaJson() method in the screen that you want to display the App In-Line Content by following:

import 'package:antsomisdk/antsomi.dart'; // Contains Antsomi SDK APIs
import 'package:antsomisdk/cdp_event.dart'; // Contains Antsomi SDK APIs
import 'package:antsomisdk/media_json.dart'; // Contains the Catalog class

final event = CDPEvent(en: 'view_screenview');
event.eventProps = {'screen_name': 'templateMediaJson'};

const storyId = '123';

// Initialize AntsomiSDK object
antsomiSdk = Antsomi();
final MediaJson mediaJson = await antsomiSdk.getMediaJson(event: event, storyId: storyId);

This method takes two arguments:

Field
Data Type
Description

event

CDPEvent

The specific event name corresponds to the event configured within your CDP365 workspace to initiate the relevant Customer Journey.

storyId

String

(Optional) Allows you to specify a particular journey within the Customer Journey triggered by the event. If omitted, the Media JSON for the default journey associated with the event will be retrieved.

The retrieved MediaJson is a structured data format containing various properties relevant to personalization. While the exact structure might vary depending on your CDP365 configuration, here's a general overview of the common elements:

Field
Data Type
Description

status

bool

The status of getting the Media JSON, always check this key first to prevent errors.

webContents

Map<string, dynamic>?

This key contains the main content data.

contents

Map<string, dynamic>

This nested map holds the actual content associated with the Customer Journey.

globalTracking

Map<string, dynamic>

This map might contain global tracking information like impression and view URLs or UTM modules used for tracking purposes within CDP365.

view

String

The global view URL tracking information.

impression

String

The global impression URL tracking information.

atmTrackingParameters

String

The global UTM/ATM modules string.

2. Utilizing Retrieved Media JSON

Once you have successfully retrieved the Media JSON object, you can leverage the data to personalize user experiences within your Flutter applications. Here are some potential use cases:

Populate UI Elements

For example, take a look at a Media JSON configured as below:

With this setup, we can extract dynamic content from the dynamicContent object and use it to populate UI elements like images, product names, prices, or descriptions to recommend our end-users with the latest trending products as the following:

@override
Widget build(BuildContext context) {
    return Scaffold(
    // ... More code here
    child: Container(
        height: 200, // Adjust the height as needed
        color: Colors.white,
        child: SingleChildScrollView(
            controller: _scrollController,
            scrollDirection: Axis.horizontal,
            child: Row(
                children: dynamicContent.map((content) {
                  return GestureDetector(
                    onTap: () {
                      // onTap() handlers...                      
                  },
                  child: SizedBox(
                    width: 150, // Adjust the width as needed
                    child: Column(
                      children: [
                        Image.network(
                          content['image_url'],
                          height: 150,
                        ), // Image.network
                        Text(content['name']),
                        Text(content['price']),
                      ],
                    ), // Column
                  ), // SizedBox
                ); // GestureDetector
              }).toList(),
            ), // Row

    // ... More code here

And you will receive something similar to this

3. Trigger Tracking Events

Utilize tracking URLs found within the globalTracking map (if applicable) to trigger events within CDP365 based on user interactions with personalized content such as impression, viewable, item clicked, or UTM tracking.

For instance, let's say we are building a section that shows a list of personalized recommended products for our end-users, these products are precisely selected via our algorithms and delivered to each end-user through the Customer Journeys.

Impression Event

When the screen is loaded and you have successfully requested the list of the recommended products. This is the impression event that should be fired as soon as the request is successfully made. After invoking the getMediaJson() and getting the list of recommended products, please invoke this function:

if (mediaJson.webContents?['contents']?['globalTracking']?['impression'] != null) {
    antsomiSdk.handleTrackingUrl(url: Uri.parse(mediaJson.webContents!['contents']!['globalTracking']!['impression']));
}

Viewable Event

When a user scrolls down the screen the specific recommended products section is displayed. This is the viewable event. This event should be fired once the section is partially visible. After making the API request and getting the list of recommended products, and the displayed section is partially visible, invoke the function like the example below:

// Check visibility when the screen is loaded
WidgetsBinding.instance.addPostFrameCallback((_) {
  if (_isRowVisible()) {
    // Check if the second row is visible when the screen is loaded
    if (mediaJson.webContents?['contents']?['globalTracking']?['view'] != null) {
      antsomiSdk.handleTrackingUrl(url: Uri.parse(mediaJson.webContents!['contents']!['globalTracking']!['view']));
    }
  }
});

Click Item Event

When the list of recommended products is loaded, and our user taps on any one of them. This is the click item event. This event should be fired once the section is partially visible. After making the API request and getting the list of recommended products, and the displayed section is partially visible, invoke the function like the example below:

@override
Widget build(BuildContext context) {
    return Scaffold(
    // ... More code here
    child: Container(
        height: 200, // Adjust the height as needed
        color: Colors.white,
        child: SingleChildScrollView(
            controller: _scrollController,
            scrollDirection: Axis.horizontal,
            child: Row(
                children: dynamicContent.map((content) {
                  return GestureDetector(
                    onTap: () {
                        if (content['page_url_with_tracking_click'] != null) {                            
                            var trackingLink = Uri.parse(content['page_url_with_tracking_click']);
                            AntsomiSDK.instance.handleTrackingUrl(url: trackingLink);
                            
                            // Redirect your end-user to the Product Screen here...
                        }
                  },
                  child: SizedBox(
                    // ... More code here
                ); // GestureDetector
              }).toList(),
            ), // Row

    // ... More code here

ATM/UTM Tracking

And finally, what if you want to set some UTM/ATM tracking modules so that you can unify the source of events, just simply include the value of the atmTrackingParameters in the globalTracking map and invoke the handleDeepLink() method. From now on, every event that our SDK tracked will be automatically included with this UTM/ATM tracking module.

@override
Widget build(BuildContext context) {
    return Scaffold(
    // ... More code here
    child: Container(
        height: 200, // Adjust the height as needed
        color: Colors.white,
        child: SingleChildScrollView(
            controller: _scrollController,
            scrollDirection: Axis.horizontal,
            child: Row(
                children: dynamicContent.map((content) {
                  return GestureDetector(
                    onTap: () {
                        if (content['page_url_with_tracking_click'] != null) {
                            var deepLink = Uri.parse(content['page_url'] + '?' + globalTracking?['atmTrackingParameters']);
                            var trackingLink = Uri.parse(content['page_url_with_tracking_click']);
                            
                            antsomiSdk.handleDeepLink(url: deepLink);
                            antsomiSdk.handleTrackingUrl(url: trackingLink);
                            
                            // Redirect your end-user to the Product Screen here...
                        }
                  },
                  child: SizedBox(
                    // ... More code here
                ); // GestureDetector
              }).toList(),
            ), // Row

    // ... More code here

By effectively utilizing App In-line Content and the Antsomi Flutter SDK, you can create a more dynamic and engaging user experience within your Flutter applications. This capability allows you to deliver personalized content, trigger relevant campaigns, and gain valuable insights into user interactions. Remember to refer to the specific documentation provided by your chosen App In-line Content solution for detailed integration steps and functionalities.

document
.
initialization steps
[App Retail PRODUCT RECOMMEND] - Media JSON
Sample Result - App In-Line Content show the list of Recommended Products
added the Flutter SDK to your app