「Android Native Ads SDK8」修訂間的差異

出自TAMedia
跳至導覽 跳至搜尋
imported>Wikiuser
 
(未顯示由 2 位使用者於中間所作的 33 次修訂)
行 1: 行 1:
:您也可以將TWMAdView宣告於佈局XML中,在Kotlin程式內透過findViewById取得TWMAdView
== <b>Native廣告支援內容</b> ==
<androidx.constraintlayout.widget.ConstraintLayout
:<span style="font-size:16px;">TAmedia Native廣告支援下列數種內容:</span>
                android:layout_width="match_parent"
{| class="wikitable" style="width:50%"  
                android:layout_height="wrap_content">
|-
                <!-- 廣告 -->
! 廣告內容 !! 內容細節 !! 資料型別
                <com.taiwanmobile.pt.adp.view.TWMNativeAdView
|-
                    android:id="@+id/nativeAdView"
| align="center"| ShortSubject || align="center"| 短標題 || align="center"| String
                    android:layout_width="match_parent"
|-
                    android:layout_height="wrap_content"
| align="center"| LongSubject || align="center"| 長標題 || align="center"| String
                    app:layout_constraintTop_toTopOf="parent"
|-
                    app:layout_constraintLeft_toLeftOf="parent"
| align="center"| Body || align="center"| 內文 || align="center"| String
                    >
|-
                    <LinearLayout
| align="center"| CTA || align="center"| 行動呼籲 || align="center"| String
                        android:id="@+id/container"
|-
                        android:layout_width="match_parent"
| align="center"| iconRect || align="center"| 小圖 (長) || align="center"| TWMNativeAd.Image
                        android:layout_height="wrap_content"
|-
                        android:layout_gravity="center"
| align="center"| iconSquare || align="center"| 小圖 (方) || align="center"| TWMNativeAd.Image
                        android:minHeight="50dp"
|-
                        android:orientation="vertical"
| align="center"| image960_640 || align="center"| 大圖 (960x640) || align="center"| TWMNativeAd.Image
                        android:paddingLeft="20dp"
|-
                        android:paddingRight="20dp">     
| align="center"| image1200_627 || align="center"| 大圖 (1200x627) || align="center"| TWMNativeAd.Image
                        <ImageView
|-
                            android:id="@+id/iv_icon_square"
| align="center"| mediaContent || align="center"| 多媒體素材(影音或主要圖片) || align="center"| TWMMediaContent
                            android:layout_width="wrap_content"
|}
                            android:layout_height="wrap_content"
<br><br>
                            android:layout_marginTop="10dp"
                            android:contentDescription="@string/test" />
                        <ImageView
                            android:id="@+id/iv_icon_rect"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:contentDescription="@string/test"
                            android:layout_marginTop="10dp" />
                        <TextView
                            android:id="@+id/tv_short_subject"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="10dp" />
                        <TextView
                            android:id="@+id/tv_long_subject"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="10dp"
                            tools:text="long subject" />
                        <TextView
                            android:id="@+id/tv_body"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="10dp"
                            tools:text="body" />
                        <com.taiwanmobile.pt.adp.nativead.TWMMediaView
                            android:id="@+id/ad_media"
                            android:layout_width="300dp"
                            android:layout_height="200dp"
                            android:layout_marginTop="10dp" />
                        <TextView
                            android:id="@+id/tv_call_to_action"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:padding="5dp"
                            android:textSize="20sp"
                            android:textColor="@color/cardview_light_background"
                            />
                    </LinearLayout>
                </com.taiwanmobile.pt.adp.view.TWMNativeAdView>
            </androidx.constraintlayout.widget.ConstraintLayout>


== <b>SDK Document</b> ==
[http://wiki.tamedia.com.tw/androidDoc/library/com.taiwanmobile.pt.adp.view/-t-w-m-native-ad-view/index.html NativeAd]
<br><br>


:*宣告原生性廣告版位
== <b>實作方式</b> ==
TWMNativeAd以簡單且單純的方式, 提供廣告內容供開發商使用,可在收到onReceivedAd()呼叫nativeAdContent()取得原生廣告內容, 並解析


<source lang="java" collapse="false" title="Native Ad">
:步驟1
  // 第一個參數為Activity or Context, 第二個參數請輸入您的版位ID
: 產生一個TWMNativeAd物件, 設定廣告版位adUnitId, 並呼叫load()請求原生廣告
  var twmNativeAd: TWMNativeAd = TWMNativeAd(this, AD_UNIT_ID);
: 監聽TWMAdListener, 透過onReceivedAd()取得原生廣告資訊TWMNativeAd.nativeAdContent
  twmNativeAd.setAdListener(object : TWMAdViewListener {
<source>
    override fun onReceiveAd(paramTWMAd: TWMAd) {
        // Native ad assets.
         // 表示本次請求收到廣告,
        var body: String? = null
         // 呼叫getNativeAdContent()取得廣告內容
        var shortSubject: String? = null
    }
        var longSubject: String? = null
        var callToAction:String? = null
        var iconRect: TWMNativeAd.Image? = null
        var iconSquare: TWMNativeAd.Image? = null
        var image960x640: TWMNativeAd.Image? = null
         var image1200x627: TWMNativeAd.Image? = null
         var mediaContent: TWMMediaContent? = null


    override fun onFailedToReceiveAd(paramTWMAd: TWMAd?, paramErrorCode: ErrorCode?) {
        fun loadAd(context: Context,
        // 表示本次請求發生錯誤, 並沒有廣告內容可供使用
                  adUnitId: String) {
    }
            nativeAd = TWMNativeAd(context, adUnitId)
            nativeAd?.setAdListener(this)
            nativeAd?.loadAd(TWMAdRequest())
        }


    override fun onPresentScreen(paramTWMAd: TWMAd) {
        override fun onReceiveAd(ad: TWMAd) {
         // native ad 並不使用本介面功能
            this.body = nativeAd?.nativeAdContent?.body
    }
            this.shortSubject = nativeAd?.nativeAdContent?.shortSubject
            this.longSubject = nativeAd?.nativeAdContent?.longSubject
            this.callToAction = nativeAd?.nativeAdContent?.callToAction
            this.iconRect = nativeAd?.nativeAdContent?.iconRect
            this.iconSquare = nativeAd?.nativeAdContent?.iconSquare
            this.image960x640 = nativeAd?.nativeAdContent?.image960_640
            this.image1200x627 = nativeAd?.nativeAdContent?.image1200_627
            this.mediaContent = nativeAd?.nativeAdContent?.mediaContent
         }
</source>


    override fun onDismissScreen(paramTWMAd: TWMAd) {
:步驟2
        // native ad 並不使用本介面功能
: 使用TWMNativeAdView作為廣告佈局容器, 開發者可在容器中可自行排列文字(TextView)圖形(ImageView)甚至影片(TWMMediaView)等原生廣告
    }
: 下面以短標題, 小圖 (長), Call To Action, 及多媒體素材當範例
<source>
<?xml version="1.0" encoding="utf-8"?>
<com.taiwanmobile.pt.adp.view.TWMNativeAdView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/nativeAdView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@android:color/holo_orange_light">


    override fun onLeaveApplication(paramTWMAd: TWMAd) {
    <LinearLayout
         // native ad 並不使用本介面功能
        android:id="@+id/container"
    }
        android:layout_width="match_parent"
  })
         android:layout_height="wrap_content"
// 透過TWMAdRequest載入廣告
        android:layout_gravity="center"
twmNativeAd.loadAd(TWMAdRequest())
        android:minHeight="50dp"
</source>
        android:orientation="vertical"
        android:paddingLeft="20dp"
        android:paddingRight="20dp">


(Optional) 在載入廣告前,可以透過TWMAdRequest設置使用者生日,讓您的APP獲得更多元的廣告內容<br>
        <TextView
{| class="wikitable"
            android:id="@+id/tv_short_subject"
|-
            android:layout_width="wrap_content"
! 使用Date !! 使用Calendar
            android:layout_height="wrap_content"
|-
            android:layout_marginTop="10dp" />
| style="width:60%; padding:1%;"|
  val adRequest = TWMAdRequest()
  try {
  <b>//定義好時間字串的格式</b>
  val sdf = SimpleDateFormat("yyyy/MM/dd", Locale.getDefault())
  <b>//將字串轉成Date型</b>
  val birthDate: Date = sdf.parse("1992/01/01")
  <b>// 將生日加入request</b>
  request.setBirthday(birthDate)
  }catch (e: Exception) {}
 
  <b>// 透過TWMAdRequest載入廣告</b>
  twmNativeAd.loadAd(request)
| style="width:40%; padding: 1%;"|
  <b>// 創建Calerdar並設定生日 (注意! 月份的編號是由0至11)</b>
  val birthDate = Calendar.getInstance()
  <b>// 設定生日為1992/01/01</b>
  birthDate[1992, 0] = 1
 
  <b>// 將生日加入request</b>
  val request = TWMAdRequest()
  request.setBirthday(birthDate)
 
  <b>// 透過TWMAdRequest載入廣告</b>
  twmNativeAd.loadAd(request)
|}


onReceiveAd(載入廣告完成)後,透過nativeAdContent取得的內容如下 :
        <ImageView
<source>
            android:id="@+id/iv_icon_rect"
/*
            android:layout_width="wrap_content"
  "LONGSUBJECT": "長標題 long subject ,※預設值為空字串",
            android:layout_height="wrap_content"
  "SHORTSUBJECT": "短標題 short subject ,※預設值為空字串",
            android:layout_marginTop="10dp"/>
  "BODY": "內文 body ,※預設值為空字串",
  "ICONSQUARE": "小圖示 方 icon square ,※預設值為空字串",
  "ICONRECTANGLE": "小圖示 長 icon rectangle,※預設值為空字串",
  "VIDEO": "影片 mediaContent,※預設值為空字串",
  "IMAGE960X640": "大圖 960x640,※預設值為空字串",
  "IMAGE1200X627": "大圖 1200x627,※預設值為空字串"
*/


private var twmNativeAd: TWMNativeAd? = null
        <TextView
            android:id="@+id/tv_call_to_action"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp" />


override fun onReceiveAd(ad: TWMAd) {
        <com.taiwanmobile.pt.adp.nativead.TWMMediaView
            android:id="@+id/ad_media"
            android:layout_width="150dp"
            android:layout_height="120dp"
            android:layout_marginTop="10dp"/>


        val nAd: TWMNativeAdContent? = twmNativeAd?.nativeAdContent
    </LinearLayout>
</com.taiwanmobile.pt.adp.view.TWMNativeAdView>


        nAd?.longSubject.let { longSubject ->
</source>
            mTextViewLongTitle?.text = longSubject
 
            mNativeView?.setLongSubjectView(mTextViewLongTitle)
:步驟3
         }
: 將TWMNativeAd.nativeAdContent的廣告資訊套用在上述廣告佈局中
: 並於TWMNativeAdView進行填充(ex. setShortSubjectView()), 賦予點擊後開啟廣告之功能
<source>
         val adContent: TWMNativeAdContent? = ad?.nativeAdContent


         nAd?.shortSubject.let { ShortSubject ->
         // shortSubject
             mTextViewShortTitle?.text = ShortSubject
        adContent?.shortSubject.let { subject ->
             mNativeView?.setLongSubjectView(mTextViewShortTitle)
             // 顯示短標題於TextView之中
            vb.tvShortSubject.text = subject
             // 於TWMNativeAdView進行填充, 賦予點擊後開啟廣告之功能
            vb.nativeAdView.setShortSubjectView(vb.tvShortSubject)
         }
         }


         nAd?.body.let { body ->
         // rect icon
             mTextViewContent?.text = body
        adContent?.iconRect?.getDrawable().let { rectDrawable ->
             mNativeView?.setBodyView(mTextViewContent)
             // 顯示小圖 (長)於ImageView之中
            vb.ivIconRect.setImageDrawable(rectDrawable)
            vb.ivIconRect.adjustViewBounds = true
             // 於TWMNativeAdView進行填充, 賦予點擊後開啟廣告之功能
            vb.nativeAdView.setRectangleIconView(vb.ivIconRect)
         }
         }


         nAd?.iconSquare?.getDrawable().let{ squareDrawable ->
         // call to action
             mImageView120x120?.setImageDrawable(squareDrawable)
        adContent?.callToAction?.let { cta ->
             mNativeView?.setSquareIconView(mImageView120x120)
             // 顯示行動呼籲於TextView之中
            vb.tvCallToAction.text = cta
            // 於TWMNativeAdView進行填充, 賦予點擊後開啟廣告之功能
             vb.nativeAdView.setCallToActionView(vb.tvCallToAction)
         }
         }


        nAd?.iconRect?.getDrawable().let{ rectDrawable ->
</source>
            mImageView96x64?.setImageDrawable(rectDrawable)
            mNativeView?.setRectangleIconView(mImageView96x64)
        }


         nAd?.callToAction.let{ mCTA ->
:步驟4
             mTextViewCTA?.text = mCTA
: 如欲顯示影片廣告, 將mediaContent指派給TWMMediaView, 用TWMMediaView來顯示影片
             mNativeView?.setCallToActionView(mTextViewCTA)
<source>
         // MediaContent
        adContent?.mediaContent?.let { content ->
             // 顯示TWMMediaContent於TWMMediaView
            vb.adMedia.setMediaContent(content)
             // 於TWMNativeAdView進行填充, 賦予點擊後開啟廣告之功能(前往了解)
            vb.nativeAdView.setMediaView(vb.adMedia)
         }
         }


        nAd?.mediaContent?.let{ content ->
</source>
            when(mAdMediaPreferImageSizeBig) {
                true ->  {content.setMainImageSize(TWMMediaContent.ImageSize.BIG)}
                false -> {content.setMainImageSize(TWMMediaContent.ImageSize.SMALL)}
            }
            mVideo?.setMediaContent(content)
            mNativeView?.setMediaView(mVideo)
        }


         mNativeView?.setNativeAd(twmNativeAd)
:步驟5
    }
: 完成上述後, TWMNativeAd物件指派給TWMNativeAdView, 啟動原生廣告顯示 (重要!!!)
<source>
         // nativeAd
        vb.nativeAdView.setNativeAd(nativeAd)
</source>
</source>


<br>
<br>
== <b>TWMNativeAdOptions</b> ==
TWMAdRequest.setNativeAdOptions()供開發者相關功能, 調整原生廣告屬性<br>
:<span style="font-size:16px;">TAmedia Native廣告支援下列數種內容:</span>
{| class="wikitable" style="width:50%"
|-
! 廣告內容 !! 內容細節
|-
| align="center"| DISABLE_IMAGE_LOADING || align="center"| TWMNativeAdContent.Image不含Drawable物件, 加速廣告下載速度
|-
| align="center"| VIDEO_START_UNMUTED || align="center"| TWMMediaView影片初始為有聲音, 預設為靜音
|-
| align="center"| VIDEO_CUSTOM_CONTROLS_REQUESTED || align="center"| TWMMediaView不提供影片控制項, 預設為提供
|-
| align="center"| MEDIA_PREFER_IMAGE || align="center"| TWMMediaView總是顯示圖片, 預設為影片
|}
: 下面例子為影片初始即有聲音
<source>
    val adRequest = TWMAdRequest()
    adRequest.setNativeAdOptions(arrayOf(TWMNativeAdOptions.VIDEO_START_UNMUTED))
    nativeAd?.loadAd(adRequest)
</source>


<br>
<br>


<b><span style="color:#ff0000">(SDK5以上) 請在Activity的生命週期中加入下述的呼叫, 以正確release twmNativeAd</span></b>
== <b>釋放廣告</b> ==
<b><span style="color:#ff0000">請在Activity的生命週期中加入下述的呼叫, 正確釋放TWMNativeAd物件</span></b>
   override fun onDestroy() {
   override fun onDestroy() {
        twmNativeAd?.destroy()
         super.onDestroy()
         super.onDestroy()
        nativeAd?.destroy()
   }
   }




原生性廣告內容與廣告版位關係表
<br><br>
 
== <b>廣告畫面展示</b> ==
{| border="1"
|-
| align="center" | 文字
| align="center" | 影片
|-
| align="center" | [[image:SDK8 nativead1.png | 300px]]
| align="center" | [[image:SDK8 nativead2.png | 300px]]
|}
 
<br>
<br>
 
== <b>進階. 客製化影片撥放元件(選擇性實作, 非必要)</b> ==
當TWMAdRequest.setNativeAdOptions()使用VIDEO_CUSTOM_CONTROLS_REQUESTED
TWMVideoController / TWMMediaContent包含了下列功能, 提供影片相關資訊, 提供開發者客製化自己的影片控制項
<br>
<br>
<b><span style="color:#ff0000">※重要, 下表所描述的廣告素材有可能因廣告主未提供素材, 而以空字串提供, 使用上請特別留意</span></b>
 
{| width="100%" border="1"
{| class="wikitable" style="width:50%"  
|-
! 函式名稱 !! 功能
|-
| align="center"| TWMVideoController.isMuted() || align="center"| 影片是否靜音中
|-
|-
| align="center" | 素材 \  版位
| align="center"| TWMVideoController.mute(boolean)|| align="center"| 影片靜音
| align="center" | 限制條件
| align="center" | 條列式
| align="center" | 圖片式 (橫 16:9)
| align="center" | 圖片式 (橫 3:2)
| align="center" | 小圖式
| align="center" | 影音式
|-
|-
| align="center" | 長標題<br/>(LONGSUBJECT)
| align="center"| TWMVideoController.setVideoLifecycleCallback(callback) || align="center"| 影片生命週期(VideoLifecycleCallback)
| align="center" | 25字內
| align="center" | V
| align="center" | V
| align="center" | V
| align="center" |
| align="center" | V
|-
|-
| align="center" | 短標題<br/>(SHORTSUBJECT)
| align="center"| TWMMediaContent.getCurrentTime() || align="center"| 取得目前撥放進度
| align="center" | 10字內
| align="center" | V
| align="center" | V
| align="center" | V
| align="center" | V
| align="center" |  
|-
|-
| align="center" | 內文<br/>(BODY)
| align="center"| TWMMediaContent.getDuration() || align="center"| 取得影片長度
| align="center" | 70字內
|}
| align="center" | V
 
| align="center" | V
== <b>進階. TWMMediaView 預設UI項目客製化(選擇性實作, 非必要)</b> ==
| align="center" | V
SDK8支援TWMMediaView UI項目客製化
| align="center" |
<br>
| align="center" | V
開發者可透過TWMMediaView下列函式對預設UI控制項進行客製化
<br>
{| class="wikitable" style="width:50%"  
|-
|-
| align="center" | 小圖 (方)<br/>(ICONSQUARE)
! 函式名稱 !! 功能
| align="center" | 120x120<br/>jpg/png
| align="center" | V
| align="center" |
| align="center" |
| align="center" | V
| align="center" | V
|-
|-
| align="center" | 小圖 ()<br/>(ICONRECTANGLE)
| align="center"| TWMMediaView.setCTAVisible(visible: Boolean) || align="center"| 設定CTA是否顯示
| align="center" | 96x64<br/>jpg/png
| align="center" | V
| align="center" |
| align="center" |
| align="center" |  
| align="center" | V
|-
|-
| align="center" | 影片<br/>(VIDEO)
| align="center"| TWMMediaView.setCTATextSize(textSize: Float)|| align="center"| 設定CTA文字大小
| align="center" | MP4, 10mb
| align="center" |
| align="center" |
| align="center" |
| align="center" |
| align="center" | V
|-
|-
| align="center" | 大圖 (橫 3:2)<br/>(IMAGE960X640)
| align="center"| TWMMediaView.setVideoCountdownTextSize(textSize: Float) || align="center"| 設定影片倒數文字大小
| align="center" | 960x640<br/>jpg/png
| align="center" |
| align="center" |
| align="center" | V
| align="center" |  
| align="center" | V
|-
|-
| align="center" | 大圖<br/>(IMAGE1200X627)
| align="center"| TWMMediaView.setVolumeImageSize(imageSize: Int) || align="center"| 設定靜音圖示大小
| align="center" | 1200x627<br/>jpg/png
| align="center" | V
| align="center" | V
| align="center" | V
| align="center" | V
| align="center" | V
|}
|}
[[image:TWMMediaView_CustomUI_Demo.png | 300px]]
== <b>進階. 支援Open-Measurement友善障礙物(選擇性實作, 非必要)</b> ==
SDK8支援Open-Measurement友善障礙物事件處理
<br>
https://interactiveadvertisingbureau.github.io/Open-Measurement-SDKAndroid/


<br><br>
開發者可透過TWMNativeAdView.addFriendlyObstruction(view, purpose)將與原生廣告相關的控制元件設定為友善障礙物
[[Android SDK Developer Guide 2 | 回首頁]]
<br>
下面以FloatingActionButton為例子, 按鈕本身為影片靜音設定,使用FriendlyObstructionPurpose.VIDEO_CONTROLS為障礙物目的
<br>
於TWMNativeAd.setNativeAd()之前完成障礙物添加
 
<source>
        // friendlyObstruction
        vb.nativeAdView.addFriendlyObstruction(vb.fab, TWMNativeAdView.FriendlyObstructionPurpose.VIDEO_CONTROLS)
        vb.fab.setOnClickListener {
            adContent?.mediaContent?.getVideoController()?.let { videoController ->
                val isMute = videoController.isMuted()
                // 設定影片靜音
                videoController.mute(!isMute)
                when (videoController.isMuted()) {
                    true -> { vb.fab.setImageResource(R.drawable.ic_baseline_volume_up_24) }
                    false -> { vb.fab.setImageResource(R.drawable.ic_baseline_volume_mute_24) }
                }
            }
        }
 
        // nativeAd
        vb.nativeAdView.setNativeAd(nativeAd)
 
</source>
 
{| class="wikitable" style="width:50%"
|-
! 元件總類 !! 描述
|-
| align="center"| FriendlyObstructionPurpose.VIDEO_CONTROLS || align="center"| 影音控制項
|-
| align="center"| FriendlyObstructionPurpose.CLOSE_AD || align="center"| 關閉廣告
|-
| align="center"| FriendlyObstructionPurpose.NOT_VISIBLE || align="center"| 透明元件
|-
| align="center"| FriendlyObstructionPurpose.OTHER || align="center"| 非上述三種類別
|}
 
== <b>將應用程式的廣告請求標記為兒童導向內容(13 歲以下)</b> ==
<br>
[http://wiki.tamedia.com.tw/androidDoc/library/com.taiwanmobile.pt.adp.view/-t-w-m-ad-request/index.html TWMAdRequest]
<br>
<br>
 
:請於廣告請求時透過TWMAdRequest.setChildDirectedTreatment()告知SDK該廣告標記為兒童導向內容
:Android裝置的Google廣告ID (AAID) 於此模式時不會被存取與紀錄
 
<source>
    val nativeAd: TWMNativeAd = TWMNativeAd(context, adUnitId)
    nativeAd.setAdListener(this)
    nativeAd.loadAd(TWMAdRequest().apply {
        setChildDirectedTreatment(true)
    })
</source>
 
[[SDK8_Android_SDK_Developer_Guide | 回首頁]]

於 2022年4月29日 (五) 22:24 的最新修訂

Native廣告支援內容

TAmedia Native廣告支援下列數種內容:
廣告內容 內容細節 資料型別
ShortSubject 短標題 String
LongSubject 長標題 String
Body 內文 String
CTA 行動呼籲 String
iconRect 小圖 (長) TWMNativeAd.Image
iconSquare 小圖 (方) TWMNativeAd.Image
image960_640 大圖 (960x640) TWMNativeAd.Image
image1200_627 大圖 (1200x627) TWMNativeAd.Image
mediaContent 多媒體素材(影音或主要圖片) TWMMediaContent



SDK Document

NativeAd

實作方式

步驟1
產生一個TWMNativeAd物件, 設定廣告版位adUnitId, 並呼叫load()請求原生廣告
監聽TWMAdListener, 透過onReceivedAd()取得原生廣告資訊TWMNativeAd.nativeAdContent
        // Native ad assets.
        var body: String? = null
        var shortSubject: String? = null
        var longSubject: String? = null
        var callToAction:String? = null
        var iconRect: TWMNativeAd.Image? = null
        var iconSquare: TWMNativeAd.Image? = null
        var image960x640: TWMNativeAd.Image? = null
        var image1200x627: TWMNativeAd.Image? = null
        var mediaContent: TWMMediaContent? = null

        fun loadAd(context: Context,
                   adUnitId: String) {
            nativeAd = TWMNativeAd(context, adUnitId)
            nativeAd?.setAdListener(this)
            nativeAd?.loadAd(TWMAdRequest())
        }

        override fun onReceiveAd(ad: TWMAd) {
            this.body = nativeAd?.nativeAdContent?.body
            this.shortSubject = nativeAd?.nativeAdContent?.shortSubject
            this.longSubject = nativeAd?.nativeAdContent?.longSubject
            this.callToAction = nativeAd?.nativeAdContent?.callToAction
            this.iconRect = nativeAd?.nativeAdContent?.iconRect
            this.iconSquare = nativeAd?.nativeAdContent?.iconSquare
            this.image960x640 = nativeAd?.nativeAdContent?.image960_640
            this.image1200x627 = nativeAd?.nativeAdContent?.image1200_627
            this.mediaContent = nativeAd?.nativeAdContent?.mediaContent
        }
步驟2
使用TWMNativeAdView作為廣告佈局容器, 開發者可在容器中可自行排列文字(TextView)圖形(ImageView)甚至影片(TWMMediaView)等原生廣告
下面以短標題, 小圖 (長), Call To Action, 及多媒體素材當範例
<?xml version="1.0" encoding="utf-8"?>
<com.taiwanmobile.pt.adp.view.TWMNativeAdView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/nativeAdView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@android:color/holo_orange_light">

    <LinearLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:minHeight="50dp"
        android:orientation="vertical"
        android:paddingLeft="20dp"
        android:paddingRight="20dp">

        <TextView
            android:id="@+id/tv_short_subject"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp" />

        <ImageView
            android:id="@+id/iv_icon_rect"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"/>

        <TextView
            android:id="@+id/tv_call_to_action"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp" />

        <com.taiwanmobile.pt.adp.nativead.TWMMediaView
            android:id="@+id/ad_media"
            android:layout_width="150dp"
            android:layout_height="120dp"
            android:layout_marginTop="10dp"/>

    </LinearLayout>
</com.taiwanmobile.pt.adp.view.TWMNativeAdView>
步驟3
將TWMNativeAd.nativeAdContent的廣告資訊套用在上述廣告佈局中
並於TWMNativeAdView進行填充(ex. setShortSubjectView()), 賦予點擊後開啟廣告之功能
        val adContent: TWMNativeAdContent? = ad?.nativeAdContent

        // shortSubject
        adContent?.shortSubject.let { subject ->
            // 顯示短標題於TextView之中
            vb.tvShortSubject.text = subject
            // 於TWMNativeAdView進行填充, 賦予點擊後開啟廣告之功能
            vb.nativeAdView.setShortSubjectView(vb.tvShortSubject)
        }

        // rect icon
        adContent?.iconRect?.getDrawable().let { rectDrawable ->
            // 顯示小圖 (長)於ImageView之中
            vb.ivIconRect.setImageDrawable(rectDrawable)
            vb.ivIconRect.adjustViewBounds = true
            // 於TWMNativeAdView進行填充, 賦予點擊後開啟廣告之功能
            vb.nativeAdView.setRectangleIconView(vb.ivIconRect)
        }

        // call to action
        adContent?.callToAction?.let { cta ->
            // 顯示行動呼籲於TextView之中
            vb.tvCallToAction.text = cta
            // 於TWMNativeAdView進行填充, 賦予點擊後開啟廣告之功能
            vb.nativeAdView.setCallToActionView(vb.tvCallToAction)
        }
步驟4
如欲顯示影片廣告, 將mediaContent指派給TWMMediaView, 用TWMMediaView來顯示影片
        // MediaContent
        adContent?.mediaContent?.let { content ->
            // 顯示TWMMediaContent於TWMMediaView
            vb.adMedia.setMediaContent(content)
            // 於TWMNativeAdView進行填充, 賦予點擊後開啟廣告之功能(前往了解)
            vb.nativeAdView.setMediaView(vb.adMedia)
        }
步驟5
完成上述後, TWMNativeAd物件指派給TWMNativeAdView, 啟動原生廣告顯示 (重要!!!)
        // nativeAd
        vb.nativeAdView.setNativeAd(nativeAd)



TWMNativeAdOptions

TWMAdRequest.setNativeAdOptions()供開發者相關功能, 調整原生廣告屬性

TAmedia Native廣告支援下列數種內容:
廣告內容 內容細節
DISABLE_IMAGE_LOADING TWMNativeAdContent.Image不含Drawable物件, 加速廣告下載速度
VIDEO_START_UNMUTED TWMMediaView影片初始為有聲音, 預設為靜音
VIDEO_CUSTOM_CONTROLS_REQUESTED TWMMediaView不提供影片控制項, 預設為提供
MEDIA_PREFER_IMAGE TWMMediaView總是顯示圖片, 預設為影片


下面例子為影片初始即有聲音
    val adRequest = TWMAdRequest()
    adRequest.setNativeAdOptions(arrayOf(TWMNativeAdOptions.VIDEO_START_UNMUTED))
    nativeAd?.loadAd(adRequest)



釋放廣告

請在Activity的生命週期中加入下述的呼叫, 正確釋放TWMNativeAd物件

 override fun onDestroy() {
       super.onDestroy()
       nativeAd?.destroy()
 }




廣告畫面展示

文字 影片
SDK8 nativead1.png SDK8 nativead2.png



進階. 客製化影片撥放元件(選擇性實作, 非必要)

當TWMAdRequest.setNativeAdOptions()使用VIDEO_CUSTOM_CONTROLS_REQUESTED TWMVideoController / TWMMediaContent包含了下列功能, 提供影片相關資訊, 提供開發者客製化自己的影片控制項

函式名稱 功能
TWMVideoController.isMuted() 影片是否靜音中
TWMVideoController.mute(boolean) 影片靜音
TWMVideoController.setVideoLifecycleCallback(callback) 影片生命週期(VideoLifecycleCallback)
TWMMediaContent.getCurrentTime() 取得目前撥放進度
TWMMediaContent.getDuration() 取得影片長度

進階. TWMMediaView 預設UI項目客製化(選擇性實作, 非必要)

SDK8支援TWMMediaView UI項目客製化
開發者可透過TWMMediaView下列函式對預設UI控制項進行客製化

函式名稱 功能
TWMMediaView.setCTAVisible(visible: Boolean) 設定CTA是否顯示
TWMMediaView.setCTATextSize(textSize: Float) 設定CTA文字大小
TWMMediaView.setVideoCountdownTextSize(textSize: Float) 設定影片倒數文字大小
TWMMediaView.setVolumeImageSize(imageSize: Int) 設定靜音圖示大小

TWMMediaView CustomUI Demo.png

進階. 支援Open-Measurement友善障礙物(選擇性實作, 非必要)

SDK8支援Open-Measurement友善障礙物事件處理
https://interactiveadvertisingbureau.github.io/Open-Measurement-SDKAndroid/

開發者可透過TWMNativeAdView.addFriendlyObstruction(view, purpose)將與原生廣告相關的控制元件設定為友善障礙物
下面以FloatingActionButton為例子, 按鈕本身為影片靜音設定,使用FriendlyObstructionPurpose.VIDEO_CONTROLS為障礙物目的
於TWMNativeAd.setNativeAd()之前完成障礙物添加

        // friendlyObstruction
        vb.nativeAdView.addFriendlyObstruction(vb.fab, TWMNativeAdView.FriendlyObstructionPurpose.VIDEO_CONTROLS)
        vb.fab.setOnClickListener {
            adContent?.mediaContent?.getVideoController()?.let { videoController ->
                val isMute = videoController.isMuted()
                // 設定影片靜音
                videoController.mute(!isMute)
                when (videoController.isMuted()) {
                    true -> { vb.fab.setImageResource(R.drawable.ic_baseline_volume_up_24) }
                    false -> { vb.fab.setImageResource(R.drawable.ic_baseline_volume_mute_24) }
                }
            }
        }

        // nativeAd
        vb.nativeAdView.setNativeAd(nativeAd)
元件總類 描述
FriendlyObstructionPurpose.VIDEO_CONTROLS 影音控制項
FriendlyObstructionPurpose.CLOSE_AD 關閉廣告
FriendlyObstructionPurpose.NOT_VISIBLE 透明元件
FriendlyObstructionPurpose.OTHER 非上述三種類別

將應用程式的廣告請求標記為兒童導向內容(13 歲以下)


TWMAdRequest

請於廣告請求時透過TWMAdRequest.setChildDirectedTreatment()告知SDK該廣告標記為兒童導向內容
Android裝置的Google廣告ID (AAID) 於此模式時不會被存取與紀錄
    val nativeAd: TWMNativeAd = TWMNativeAd(context, adUnitId)
    nativeAd.setAdListener(this)
    nativeAd.loadAd(TWMAdRequest().apply {
        setChildDirectedTreatment(true)
    })

回首頁