What is the R89Tag?
The R89Tag is a widget provided by the R89SDK with a required tag parameter. The tag is used by the R89SDK to place ads where you want us to add the monetization inventory inside your app’s widget tree.
Where To Add The R89Tag?
While it is true that filling your app with ads to the brim is not the best user experience, we recommend you add the R89Tag widgets everywhere where there is a blank space on the screen. Even if you do not want to fill them in, it is okay. We can manage which ones are filled and which are not from the web.
Best Practices When Adding a R89Tag
Before adding an R89Tag to the app’s widget tree, make sure the following
-
Do not overlap other
R89Tagor other UI components. -
Every blank space is a good space to place an
R89Tag(even if you do not plan to use it). -
Do not use only one
tagfor all of your wrappers, it will be hard to configure your monetization and change it according to your needs.
Example
Just before starting to put R89Tag widgets into your widget tree, make sure to add R89SDK.routeObserver to your navigatorObservers list
@override
Widget build(BuildContext context) {
return MaterialApp(
navigatorObservers: [
R89SDK.routeObserver,
],
// ...
);
}
and initialize the R89SDK with the singleTag parameter specified true as shown below.
void initializeSDK() {
R89SDK.setLogLevel(LogLevel.debug);
R89SDK.setDebug(getLocalFakeData: true);
R89SDK.initialize(
publisherId: "TestRefinery89ID",
appId: "TestDemoApp",
// if true enables the auto-configuration mode
singleTag: true);
}
Place the R89Tag into the widget tree.
In the sample below two R89Tag widgets are placed in a widget tree with pre-configured tag parameters.
@override
Widget build(BuildContext context) =>
const Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
// ...
// The banner_tag will be replaced with the banner ad.
R89Tag(tag: 'banner_tag'),
// The outstream_tag will be replaced with the video outstream ad.
R89Tag(tag: 'outstream_tag'),
// ...
],
);
The first is named “banner_tag“ which will be replaced with a banner ad by the R89SDK when the widget is displayed, and the second is “outstream_tag" which will be replaced with a video outstream ad.
The R89Tag widget has an optional child parameter. In case the child is provided, the ad will be positioned below the provided child.
Place the R89Tag into the scrollable widget.
The R89Tag widget can be used inside the scrollable widget as well (such as ListView.builder).
@override
Widget build(BuildContext context) =>
ListView.builder(
itemCount: 100,
itemBuilder: (context, index) =>
R89Tag(
tag: 'scroll_tag',
itemIndex: index,
child: ListTile(
leading: const Icon(
Icons.star_rounded,
color: Colors.amber,
),
title: Text(features[index % features.length]),
),
),
);
As you may notice, besides the tag parameter, the itemIndex is provided to R89Tag, which is used by the SDK to decide whether to display an ad for a given item position or not.
In a more complex scenario, If R89Tag is used in multiple scrollable widgets on the same screen, a key parameter needs to be specified for it. The key parameter uniquely identifies the scrollable widget. Use the ValueKey to identify the name of the scrollable widget.
In the sample below there are two scrollable widgets vertical and horizontal. The vertical one is a SliverList and the other is a horizontal ListView positioned at the index 3.
@override
Widget build(BuildContext context) =>
Scaffold(
body: CustomScrollView(
slivers: [
SliverList(
delegate: SliverChildBuilderDelegate(
childCount: 40,
(context, index) =>
index != 3
? R89Tag(
key: const ValueKey('v_scroll'),
tag: 'infinite_scroll',
itemIndex: index,
child: Text("Item $index"))
: KeepAliveWrapper(
child: SizedBox(
height: 400,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 40,
itemBuilder: (context, index) =>
R89Tag(
key: const ValueKey('h_scroll'),
tag: 'infinite_scroll',
itemIndex: index,
child: Text("Item $index"),
),
),
),
))),
],
),
);
The R89Tag from the vertical list has a value key ValueKey('v_scroll') and the other from the horizontal list has ValueKey('h_scroll'). Those keys are used by the R89SDK to separate the scrollable widgets and apply the ad placement logic separately for each of them.
Display Interstitial on R89Tag child’s onTap
The R89Tag can display an interstitial on the child’s content tap event, and then propagate the on-tap event down to the child, so the child can handle it.
In the example below the R89Tag will intercept the child’s tap event, display an interstitial, and run the child’s onTap callback when the interstitial gets closed.
@override
Widget build(BuildContext context) =>
const Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// ...
// The button_tag will wrap the child content and intercept the on tap events on it to display an interstitial,
// and will invoke child's onTap event after the interstitial get closed.
R89Tag(
tag: 'button_tag',
child: ListTile(
// ...
// The onTap will be invoked right after the interstitial ad get closed.
onTap: () {
// This Scaffold will be displayed after the interstitial get closed.
ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
content:
Text('This SnackBar is displayed after the interstitial get closed.')));
},
)
),
// ...
]
,
);
Summary
As mentioned above the R89Tag can be used to display ads not only inside the widget tree but also can display intercept its child onTap events and display an interstitial, and for all of these it only needs a preconfigured tag as a parameter.
