Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MOB-3869-Add a sample screen to example app of API customization #6

Open
wants to merge 4 commits into
base: MOB-3712-example_app_for_meta_integration
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Java/app/build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ dependencies {
implementation 'androidx.annotation:annotation:1.1.0'

//Taboola
implementation 'com.taboola:android-sdk-beta:meta-unified-1.0.2-615-b6bbebdb0'
implementation 'com.taboola:android-sdk-beta:meta-global-beta-1.0.10-638-5287bf970'

implementation 'com.squareup.retrofit2:converter-gson:2.9.0'

Expand Down
6 changes: 6 additions & 0 deletions Java/app/src/main/java/com/taboola/sdk4example/MetaConst.java
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,10 @@ public class MetaConst {
public static final String DEFAULT_LAYOUT_KEY = "default";
public static final String TEST_LAYOUT_IMAGE_LINK_TYPE = "image_link";
public static final String TEST_LAYOUT_CAROUSEL_TYPE = "carousel";
// UI customization
public static final String ELEMENT_TYPE_BRANDING = "branding";
public static final String DARK_NODE = "darkMode";
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@DanielFrTB - Why is the dark mode key part of the UI Customizations here and not in the Kotlin part?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

public static final int TEXT_FONT_SIZE = 20;
public static final int NUMBER_OF_LINES = 2;
public static final float AMOUNT_OF_LINES_BETWEEN_LINES = 0.5f;
Copy link
Collaborator

@tomer-br-taboola tomer-br-taboola Jan 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@DanielFrTB - I think the name of this constant is wrong, AMOUNT_OF_LINES_BETWEEN_LINES. I believe it should be amount of space between lines.
https://brain.taboola.com/display/MOBILE/TBLUiStyleProperties

}
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,9 @@
import com.taboola.sdk4example.sdk_classic.FeedWithMiddleArticleInsideScrollViewFragment;
import com.taboola.sdk4example.sdk_classic.MetaAdCarouselFragment;
import com.taboola.sdk4example.sdk_classic.MetaAdInsideScrollViewFragment;
import com.taboola.sdk4example.sdk_classic.MetaAdUICustomization;
import com.taboola.sdk4example.sdk_classic.MetaClassicUnitFragment;
import com.taboola.sdk4example.sdk_classic.MetaClassicUnitFragmentUICustomization;
import com.taboola.sdk4example.sdk_classic.OCClickHandlerFragment;
import com.taboola.sdk4example.sdk_classic.PullToRefreshFragment;
import com.taboola.sdk4example.sdk_classic.RecyclerViewPreloadFragment;
Expand Down Expand Up @@ -68,6 +70,8 @@ public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceStat
addButton(getString(R.string.std_feed_lazy_loading_rv), R.id.std_feed_lazy_loading_rv, viewGroup);
addButton(getString(R.string.std_mid_article_with_feed_dark_mode_rv), R.id.std_mid_article_with_feed_dark_mode_rv, viewGroup);
addButton(getString(R.string.std_meta), R.id.std_meta_ad, viewGroup);
addButton(getString(R.string.std_meta_ad_UI_customization), R.id.std_meta_ad_UI_customization, viewGroup);
addButton(getString(R.string.std_meta_tbl_classic_unit_ad_UI_customization), R.id.std_meta_tbl_classic_unit_ad_UI_customization, viewGroup);
addButton(getString(R.string.std_meta_classic_unit), R.id.std_meta_classic_unit, viewGroup);
addButton(getString(R.string.std_meta_carousel), R.id.std_meta_carousel, viewGroup);
}
Expand Down Expand Up @@ -115,6 +119,12 @@ public void onClick(View v) {
case R.id.std_meta_classic_unit:
fragmentToOpen = new MetaClassicUnitFragment();
break;
case R.id.std_meta_ad_UI_customization:
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@DanielFrTB - What is the difference between these two screens?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tomer-br-taboola
std_meta_ad_UI_customization - regular Meta ad
std_meta_tbl_classic_unit_ad_UI_customization - meta_tbl_classic_unit (1x1 + feed)

fragmentToOpen = new MetaAdUICustomization();
break;
case R.id.std_meta_tbl_classic_unit_ad_UI_customization:
fragmentToOpen = new MetaClassicUnitFragmentUICustomization();
break;
case R.id.std_meta_carousel:
fragmentToOpen = new MetaAdCarouselFragment();
break;
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
package com.taboola.sdk4example.sdk_classic;

import static com.taboola.sdk4example.Const.META_WIDGET_MODE;
import static com.taboola.sdk4example.Const.META_WIDGET_PLACEMENT_NAME;
import static com.taboola.sdk4example.MetaConst.AMOUNT_OF_LINES_BETWEEN_LINES;
import static com.taboola.sdk4example.MetaConst.ELEMENT_TYPE_BRANDING;
import static com.taboola.sdk4example.MetaConst.NUMBER_OF_LINES;
import static com.taboola.sdk4example.MetaConst.TEXT_FONT_SIZE;

import android.graphics.Color;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.Nullable;

import com.facebook.ads.NativeAdLayout;
import com.taboola.android.TBLClassicPage;
import com.taboola.android.TBLClassicUnit;
import com.taboola.android.TBLPublisherInfo;
import com.taboola.android.Taboola;
import com.taboola.android.annotations.TBL_PLACEMENT_TYPE;
import com.taboola.android.listeners.TBLClassicListener;

import com.taboola.android.utils.style_properties.TBLTitleStylePropertiesBuilder;
import com.taboola.android.utils.style_properties.TBLUiStyleProperties;
import com.taboola.android.utils.style_properties.TBLCallToActionButtonStylePropertiesBuilder;
import com.taboola.sdk4example.Const;
import com.taboola.sdk4example.MetaConst;
import com.taboola.sdk4example.R;
import com.taboola.sdk4example.tabs.BaseTaboolaFragment;
import com.taboola.android.utils.style_properties.TBLTextStylePropertiesBuilder;

import java.util.HashMap;

public class MetaAdUICustomization extends BaseTaboolaFragment {


private static final String TAG = MetaAdUICustomization.class.getSimpleName();


@Nullable
@Override
public View onCreateView(LayoutInflater inflater,
@Nullable ViewGroup container,
@Nullable Bundle savedInstanceState) {
Taboola.init(new TBLPublisherInfo(MetaConst.META_PUBLISHER_NAME));
View rootView = inflater.inflate(R.layout.fragment_meta_ad_classic_unit, null);
NativeAdLayout adContainerTop = rootView.findViewById(R.id.native_ad_container_top);

Taboola.setGlobalExtraProperties(new HashMap<String, String>() {{
put(MetaConst.AUDIENCE_NETWORK_APPLICATION_ID_KEY, MetaConst.AUDIENCE_NETWORK_APP_ID);
put(MetaConst.ENABLE_META_DEMAND_DEBUG_KEY, "true");
}});

setupAndLoadTaboolaAd(adContainerTop);
return rootView;
}


private void setupAndLoadTaboolaAd(NativeAdLayout adContainer) {
TBLClassicPage tblClassicPage = Taboola.getClassicPage(Const.PAGE_URL, Const.PAGE_TYPE);
TBLClassicUnit tblClassicUnit = tblClassicPage.build(getContext(), META_WIDGET_PLACEMENT_NAME, META_WIDGET_MODE, TBL_PLACEMENT_TYPE.PAGE_MIDDLE, new TBLClassicListener() {
@Override
public boolean onItemClick(String placementName, String itemId, String clickUrl, boolean isOrganic, String customData) {
Log.d(TAG, "onItemClick");
return super.onItemClick(placementName, itemId, clickUrl, isOrganic, customData);
}

@Override
public void onAdReceiveSuccess() {
super.onAdReceiveSuccess();
Log.d(TAG, "onAdReceiveSuccess");
}

@Override
public void onAdReceiveFail(String error) {
super.onAdReceiveFail(error);
Log.d(TAG, "onAdReceiveFail " + error);
}
});
tblClassicUnit.setUnitExtraProperties(new HashMap<String, String>() {{
put(MetaConst.AUDIENCE_NETWORK_PLACEMENT_ID_KEY, MetaConst.AUDIENCE_NETWORK_CAROUSEL_PLACEMENT_ID);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@DanielFrTB - Is there a reason why you chose a carousel placement id here?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tomer-br-taboola
No, Changed to DEFAULT_LAYOUT_KEY

}});
TBLUiStyleProperties brandingStyleProperties = new TBLTextStylePropertiesBuilder(ELEMENT_TYPE_BRANDING)
DanielFrTB marked this conversation as resolved.
Show resolved Hide resolved
.setFontLightColor(R.color.design_default_color_error)
.setFontDarkColor(R.color.colorPrimary)
.setFontSize(TEXT_FONT_SIZE).
build();
TBLUiStyleProperties titleStyleProperties = new TBLTitleStylePropertiesBuilder()
.setAmountOfSpaceBetweenLines(AMOUNT_OF_LINES_BETWEEN_LINES)
.setLines(NUMBER_OF_LINES)
.setFontLightColor(Color.RED)
.setFontSize(TEXT_FONT_SIZE)
.setFontDarkColor(Color.BLUE)
.build();
TBLUiStyleProperties ctaStyleProperties = new TBLCallToActionButtonStylePropertiesBuilder()
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@DanielFrTB - Since the default setting for the CTA button is to be visible, what is the point of showing this?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tomer-br-taboola
I think that we need to display the all API we have.

I can remove if needed

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@DanielFrTB - If you want to display all the APIs we have, choose an option that shows to publishers how it works. This way, publishers might think they need to do this (even though they don't since the default is to show the CTA button).

.setVisibility(true)
.build();
tblClassicUnit.setNativeUI(MetaConst.DEFAULT_LAYOUT_KEY, brandingStyleProperties, titleStyleProperties, ctaStyleProperties);
adContainer.addView(tblClassicUnit);
tblClassicUnit.fetchContent();
}


}
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
package com.taboola.sdk4example.sdk_classic;

import static com.taboola.sdk4example.Const.META_FEED_MODE;
import static com.taboola.sdk4example.Const.META_FEED_PLACEMENT_NAME;
import static com.taboola.sdk4example.Const.META_WIDGET_MODE;
import static com.taboola.sdk4example.Const.META_WIDGET_PLACEMENT_NAME;
import static com.taboola.sdk4example.MetaConst.AMOUNT_OF_LINES_BETWEEN_LINES;
import static com.taboola.sdk4example.MetaConst.DARK_NODE;
import static com.taboola.sdk4example.MetaConst.ELEMENT_TYPE_BRANDING;
import static com.taboola.sdk4example.MetaConst.NUMBER_OF_LINES;
import static com.taboola.sdk4example.MetaConst.TEXT_FONT_SIZE;

import android.content.res.Configuration;
import android.graphics.Color;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.Nullable;

import com.facebook.ads.NativeAdLayout;
import com.taboola.android.MetaPlacementProperties;
import com.taboola.android.TBLClassicPage;
import com.taboola.android.TBLMetaClassicUnit;
import com.taboola.android.TBLPublisherInfo;
import com.taboola.android.Taboola;
import com.taboola.android.annotations.TBL_PLACEMENT_TYPE;
import com.taboola.android.listeners.TBLClassicListener;
import com.taboola.android.utils.style_properties.TBLCallToActionButtonStylePropertiesBuilder;
import com.taboola.android.utils.style_properties.TBLTextStylePropertiesBuilder;
import com.taboola.android.utils.style_properties.TBLTitleStylePropertiesBuilder;
import com.taboola.android.utils.style_properties.TBLUiStyleProperties;
import com.taboola.sdk4example.Const;
import com.taboola.sdk4example.MetaConst;
import com.taboola.sdk4example.R;
import com.taboola.sdk4example.tabs.BaseTaboolaFragment;

import java.util.HashMap;

public class MetaClassicUnitFragmentUICustomization extends BaseTaboolaFragment {

private static final String TAG = MetaClassicUnitFragmentUICustomization.class.getSimpleName();

@Nullable
@Override
public View onCreateView(LayoutInflater inflater,
@Nullable ViewGroup container,
@Nullable Bundle savedInstanceState) {
int isOSDarkMode =
getContext().getResources().getConfiguration().uiMode &
Configuration.UI_MODE_NIGHT_MASK;
Taboola.init(new TBLPublisherInfo(MetaConst.META_PUBLISHER_NAME));
View rootView = inflater.inflate(R.layout.fragment_meta_ad_classic_unit, null);
NativeAdLayout adContainerTop = rootView.findViewById(R.id.native_ad_container_top);

Taboola.setGlobalExtraProperties(new HashMap<String, String>() {{
put(MetaConst.AUDIENCE_NETWORK_APPLICATION_ID_KEY, MetaConst.AUDIENCE_NETWORK_APP_ID);
put(MetaConst.ENABLE_META_DEMAND_DEBUG_KEY, "true");
if (isOSDarkMode == Configuration.UI_MODE_NIGHT_YES) {
put(DARK_NODE, "true");
}
}});

setupAndLoadTaboolaAd(adContainerTop);
return rootView;
}


private void setupAndLoadTaboolaAd(NativeAdLayout adContainer) {
TBLClassicPage tblClassicPage = Taboola.getClassicPage(Const.PAGE_URL, Const.PAGE_TYPE);
MetaPlacementProperties metaPlacementProperties = new MetaPlacementProperties(META_WIDGET_PLACEMENT_NAME, META_WIDGET_MODE);
TBLMetaClassicUnit tblMetaClassicUnit = tblClassicPage.buildWithMeta(getContext(), META_FEED_PLACEMENT_NAME, META_FEED_MODE, TBL_PLACEMENT_TYPE.PAGE_MIDDLE, metaPlacementProperties, new TBLClassicListener() {
@Override
public boolean onItemClick(String placementName, String itemId, String clickUrl, boolean isOrganic, String customData) {
Log.d(TAG, "onItemClick");
return super.onItemClick(placementName, itemId, clickUrl, isOrganic, customData);
}

@Override
public void onAdReceiveSuccess() {
super.onAdReceiveSuccess();
Log.d(TAG, "onAdReceiveSuccess");
}

@Override
public void onAdReceiveFail(String error) {
super.onAdReceiveFail(error);
Log.d(TAG, "onAdReceiveFail " + error);
}

@Override
public void onResize(int height) {
super.onResize(height);
Log.d(TAG, "onResize");
}
});
tblMetaClassicUnit.setMetaAdTypeForDebug(MetaConst.TEST_LAYOUT_IMAGE_LINK_TYPE);
tblMetaClassicUnit.setUnitExtraProperties(new HashMap<String, String>() {{
put(MetaConst.AUDIENCE_NETWORK_PLACEMENT_ID_KEY, MetaConst.AUDIENCE_NETWORK_PLACEMENT_ID);
}});
TBLUiStyleProperties brandingStyleProperties = new TBLTextStylePropertiesBuilder(ELEMENT_TYPE_BRANDING)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@DanielFrTB - Comments from the previous screen also apply here.

.setFontLightColor(R.color.design_default_color_error)
.setFontDarkColor(R.color.colorPrimary)
.setFontSize(TEXT_FONT_SIZE).
build();
TBLUiStyleProperties titleStyleProperties = new TBLTitleStylePropertiesBuilder()
.setAmountOfSpaceBetweenLines(AMOUNT_OF_LINES_BETWEEN_LINES)
.setLines(NUMBER_OF_LINES)
.setFontLightColor(Color.RED)
.setFontSize(TEXT_FONT_SIZE)
.setFontDarkColor(Color.BLUE)
.build();
TBLUiStyleProperties ctaStyleProperties = new TBLCallToActionButtonStylePropertiesBuilder()
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@DanielFrTB - Here you didn't apply any changes.

.setVisibility(true)
.build();
tblMetaClassicUnit.setMetaNativeUI(MetaConst.DEFAULT_LAYOUT_KEY, brandingStyleProperties, titleStyleProperties, ctaStyleProperties);
adContainer.addView(tblMetaClassicUnit);
tblMetaClassicUnit.fetchContent();
}

}
2 changes: 2 additions & 0 deletions Java/app/src/main/res/values/ids.xml
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@
<item name="std_meta_ad" type="id" />
<item name="std_meta_carousel" type="id" />
<item name="std_meta_classic_unit" type="id" />
<item name="std_meta_ad_UI_customization" type="id" />
<item name="std_meta_tbl_classic_unit_ad_UI_customization" type="id" />
<item name="native_widget" type="id" />
<item name="native_feed" type="id" />

Expand Down
2 changes: 2 additions & 0 deletions Java/app/src/main/res/values/strings.xml
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,8 @@ These will help you remember what the consumer really wants to engage with and w
<string name="std_feed_lazy_loading_rv">Feed Lazy Loading (RecyclerView)</string>
<string name="std_mid_article_with_feed_dark_mode_rv">Feed with Dark Mode (RecyclerView)</string>
<string name="std_meta">Meta Ad Inside ScrollView Fragment</string>
<string name="std_meta_ad_UI_customization">MetaAd UI customization</string>
<string name="std_meta_tbl_classic_unit_ad_UI_customization">MeteTBLClassicUnit UI customization</string>
<string name="std_meta_classic_unit">Meta Ad Above Feed Fragment</string>
<string name="std_meta_carousel">Meta Ad Carousel Fragment</string>
<string name="native_widget">Native Widget</string>
Expand Down
2 changes: 1 addition & 1 deletion Kotlin/app/build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ android {

dependencies {
// Import Taboola SDK
implementation 'com.taboola:android-sdk-beta:meta-unified-1.0.2-615-b6bbebdb0'
implementation 'com.taboola:android-sdk-beta:meta-global-beta-1.0.10-638-5287bf970'

implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
implementation 'androidx.core:core-ktx:1.3.2'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,12 @@ class MetaConst {
const val DEFAULT_LAYOUT_KEY = "default"
const val TEST_LAYOUT_IMAGE_LINK_TYPE = "image_link"
const val TEST_LAYOUT_CAROUSEL_TYPE = "carousel"
const val DARK_MODE = "darkMode"

// UI customizations values
const val ELEMENT_TYPE_BRANDING: String = "branding"
const val TEXT_FONT_SIZE: Float = 20.0f
const val NUMBER_OF_LINES: Int = 2
const val AMOUNT_OF_SPACE_BETWEEN_ELEMENTS: Float = 0.5f
}
}
Loading