📢

Mapbox 地図にMapbox広告を表示してみよう Android編

2022/12/21に公開・約10,700字

Android

この記事は Mapbox Advent Calendar 2022 の 22日目の記事です。

はじめに

本記事はMapbox地図の上にMapbox広告を表示してみよう！という内容です。もしまだMapbox地図を使ったことがないという方は、下記の記事を参考に地図を表示するところから挑戦してみいただければと思います！

Mapbox広告とは

広告の表示方法の前に簡単にMapbox広告について紹介させていただきたいと思います。

Mapbox広告とは、現在マップボックス・ジャパン合同会社が主導して開発を進めている、デジタル地図上に広告を配信することができる、新しい形の広告プラットフォームです。

https://www.mapbox.jp/ads

現在Mapbox広告として採用しているのは「プロモーテッド・ピン」という種類の広告になります。プロモーテッド・ピンは、地図上に広告主任意のデザインの広告ピンを表示でき、アプリユーザがピンをタップすると広告カードが表示されます。

広告カードには、基本情報はもちろん、動画バナーやお得なニュース、商品情報、写真などが表示されます。（表示内容は広告掲載プランによって異なります。広告について詳しくはこちらからお願いします）

このように広告主のピンやカードを表示することで、地図を利用したサービスでも簡単にマネタイズにつなげることが可能です。（マネタイズの詳細についてもこちらにお願いします）

地図に広告を表示してみよう

Mapbox広告を利用するには、Mapbox Ads SDKを使うことで簡単に実装が可能になっています。

Mapbox Ads SDK for Android の入手方法

早速試してみたい！と思われた方大変申し訳ありません。Mapbox Ads SDK for Android は現在まだ非公開のSDKとなっておりますので、まずはこちらからご連絡をお願いします。

今後の開発予定にモジュールの公開と、ソースコードのOSS化も検討しています。

準備

さて、SDKを入手された方は以下より先に進んで頂ければと思います。まずは、入手したSDKをAndroid Studioで使えるようにしていきましょう。SDKは、.aarという拡張子となっております。こちらのファイルを Android Studio上のlibsフォルダにドラッグアンドドロップします。

続いて、以下のように追加したSDKをプロジェクトに読み込ませる設定を追加します。

最後に、Gradle Syncボタンを押しライブラリを読み込ませます。

以下にようになれば完了です。

導入その1

SDKのインストールが完了したので、広告を表示するソースコードを記載していきます。
まずは、SDK本体となる MapboxPromotionManager を以下のように初期化します。初期化するタイミングは、必ず地図画面が表示される画面が初期化されるタイミングで行うようにしてください。

FirstFragment.kt

...
import com.mapbox.promoted.MapboxPromotionManager

class FirstFragment : Fragment() {
+ private val promotionManager = MapboxPromotionManager(lifecycle)
  ....
}

導入その2

続いて、MapboxPromotionCallbackを実装してSDKからの必要なコールバックを記述していきます。これらは、広告ピンが表示され、アプリのユーザがピンをタップした際に表示される広告カードの表示やユーザアクションのコールバックをアプリ側へ通知されるために使用されます。各インタフェースメソッドの解説はこちらをご確認ください。

FirstFragment.kt

 private fun promotedCallback() = object : MapboxPromotionCallback {
        override fun onPromotionShowAttribution(view: MapboxAdsAttributionView) {
            view.attach(
                parent = binding.mapView,
                animated = true
            )
        }

        override fun onPromotionDismissAttribution(view: MapboxAdsAttributionView) {
            view.detach(
                parent = binding.mapView,
                animated = true
            )
        }

        override fun onPromotionDidSelect(
            view: MapboxPromotedMBPCardView,
            promotion: MapboxPromotion
        ) {
            view.attach(binding.mapView)
        }

        override fun onPromotionDidDeselect(view: MapboxPromotedMBPCardView) {
            view.detach(binding.mapView)
        }

        override fun onPromotionDidTranslateCard(
            translation: MapboxPromotionCallback.MapboxPromotedMBPCardTranslation
        ) {
            // カードの状態が変わった際になにか処理を追加したい場合はこちらに記述します
        }

        // MapboxPromotedPOICardViewの各種ボタンがタップされた際に呼び出されます。
        override fun onPromotionDidTapCardAction(
            action: MapboxPromotionCallback.MapboxPromotedMBPCardTapAction,
            promotion: MapboxPromotion
        ) {
            // MapboxPromotedPOICardViewの各種ボタンがタップされた際に呼び出されます。
        }
    }

導入その3

ここまでくればもうすぐ完了です。Mapのロードが完了したタイミング(addOnMapLoadedListener)で、loadPromotions を呼び出して広告のロードしましょう。その際、必ず .staging 環境を指定しましょう。

FirstFragment.kt

   ...
   override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
+        binding.mapView.getMapboxMap().apply {
+            loadStyleUri(Style.MAPBOX_STREETS)
+            addOnMapLoadedListener {
+                promotionManager.callback = promotedCallback()
+                promotionManager.loadPromotions(
+                    mapView = binding.mapView,
+                    configuration = MapboxPromotionConfiguration.staging
+                )
+            }
+        }
    }
    ...

実行結果

実行結果は以下のようになります。Staging環境のため表示されているピンや広告カードの内容は仮のものになります。

広告ピン	広告カード1	広告カード2

コード全体

最後に ViewController.swift のコード全体は以下になります

FirstFragment.kt

package com.example.mapboxdemo

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import com.example.mapboxdemo.databinding.FragmentFirstBinding
import com.mapbox.maps.Style
import com.mapbox.promoted.MapboxPromotionCallback
import com.mapbox.promoted.MapboxPromotionManager
import com.mapbox.promoted.config.MapboxPromotionConfiguration
import com.mapbox.promoted.model.MapboxPromotion
import com.mapbox.promoted.view.MapboxAdsAttributionView
import com.mapbox.promoted.view.mbp.MapboxPromotedMBPCardView

class FirstFragment : Fragment() {

    private lateinit var binding: FragmentFirstBinding
    private val promotionManager = MapboxPromotionManager(lifecycle)

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        binding = FragmentFirstBinding.inflate(inflater, container, false)
        return binding.root
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        promotionManager.debug = true
        binding.mapView.getMapboxMap().apply {
            loadStyleUri(Style.MAPBOX_STREETS)
            addOnMapLoadedListener {
                promotionManager.callback = promotedCallback()
                promotionManager.loadPromotions(
                    mapView = binding.mapView,
                    configuration = MapboxPromotionConfiguration.staging
                )
            }
        }
    }

    private fun promotedCallback() = object : MapboxPromotionCallback {
        override fun onPromotionShowAttribution(view: MapboxAdsAttributionView) {
            view.attach(
                parent = binding.mapView,
                animated = true
            )
        }

        override fun onPromotionDismissAttribution(view: MapboxAdsAttributionView) {
            view.detach(
                parent = binding.mapView,
                animated = true
            )
        }

        override fun onPromotionDidSelect(
            view: MapboxPromotedMBPCardView,
            promotion: MapboxPromotion
        ) {
            view.attach(binding.mapView)
        }

        override fun onPromotionDidDeselect(view: MapboxPromotedMBPCardView) {
            view.detach(binding.mapView)
        }

        override fun onPromotionDidTranslateCard(
            translation: MapboxPromotionCallback.MapboxPromotedMBPCardTranslation
        ) {
            // カードの状態が変わった際になにか処理を追加したい場合はこちらに記述します
        }

        // MapboxPromotedPOICardViewの各種ボタンがタップされた際に呼び出されます。
        override fun onPromotionDidTapCardAction(
            action: MapboxPromotionCallback.MapboxPromotedMBPCardTapAction,
            promotion: MapboxPromotion
        ) {
            // MapboxPromotedPOICardViewの各種ボタンがタップされた際に呼び出されます。
        }
    }
}

最後に

いかがでしょうか？思ったよりも簡単に表示できるなと感じていただけたのではないでしょうか？
まだ未公開な部分もありますが、順次公開に向けて進めております。もし地図サービスのマネタイズに興味のある方、地図上に広告を出してみたい方は下記から問い合わせをお願いします！

https://www.mapbox.jp/contact

各インタフェースメソッドについての解説

MapboxPromotionCallbackのデリゲートメソッドについての解説です。

メソッド	解説
onPromotionDidSelect	広告のピンをタップした際に呼び出されます。サンプルのように`MapboxPromotedMBPCardView#attach`を使用してviewを渡すことで、広告カードを表示させることができます。
onPromotionDidDeselect	広告カードが表示されている状態で、地図エリアがタップされた際など広告カードを閉じる必要がある際に呼び出されます。`MapboxPromotedMBPCardView#detach`を呼び広告カードを閉じることができます。
onPromotionShowAttribution	広告カード内にある「広告」ボタンがタップされた際に呼び出されます。広告に関する説明Viewとして`MapboxAdsAttributionView`の表示ができます。
onPromotionDismissAttribution	広告に関する説明View内にある「完了」ボタンがタップされたら呼び出されます。`MapboxAdsAttributionView`の非表示できます。
onPromotionDidTapCardAction	広告カード内にあるその他各種ボタン(詳細はこちら)がタップされたら呼び出されます。下記の詳細を参考に各ボタンタップの際に追加で処理を行いたい場合は追加できます。なお、MapboxPromotedMBPCardTapActionオブジェクトが `externalLink`の場合はURL情報が内包されていますので、基本的外部ブラウザ等で表示することが可能です。
onPromotionDidTranslateCard	広告カードの状態が変更になった際に呼び出されます。全画面表示(expanded), 画面下部表示(collapsed), 非表示(closed)の状態が通知されます。

各種タップイベントの種類

MapboxPromotionCallbackの各イベントについての解説です。

タイプ	説明
route	カード内の「経路」ボタンをタップ時に呼ばれます。ルート検索画面を表示してください。
navigation	カード内のナビゲーション表示のアクション時に呼ばれます。ナビゲーション画面を表示してください。(現在ナビゲーションボタンは非表示になっています)
businessHours	カード内の営業時間の項目をタップした時に呼ばれます。営業時間の項目が開閉されます。特に実装の必要はありません。
address	カード内の住所の項目をタップした時に呼ばれます。特に実装の必要はありません。
externalLink	カード内の各種外部リンクボタンをタップ時に呼ばれます。下記を参考に、外部ブラウザ/内部ブラウザへの遷移を行なってください。

カード内の各種外部リンクボタンの種類

MapboxPromotedMBPCardTapActionイベントがexternalLink場合のMapboxPromotedMBPCardLinkTypeについての解説です。

タイプ	説明	備考
CALL	カード内の「電話」ボタン/「電話」の項目をタップ時に呼ばれます。外部ブラウザへの遷移を行なってください。	e.g. tel:03-0000-0000
BANNER	カード内のバーナー画像・動画をタップ時に呼ばれます。外部ブラウザ/内部ブラウザへの遷移を行なってください。	e.g. https://www.mapbox.jp/ads
DETAIL_SITE	カード内の「公式サイト」ボタン/公式サイトの項目をタップ時に呼ばれます。外部ブラウザ/内部ブラウザへの遷移を行なってください。	e.g. https://www.mapbox.jp/ads
ATTRIBUTION	カード内の「この広告について」の画面「Mapbox広告ページへ」をタップ時に呼ばれます。外部ブラウザ/内部ブラウザへの遷移を行なってください。	e.g. https://www.mapbox.jp/ads
LINE	カード内の「公式LINE」ボタンをタップ時に呼ばれます。外部ブラウザ/内部ブラウザへの遷移を行なってください。	e.g. https://line.me/R/
PLAY_STORE	カード内の「Play Store」ボタンをタップ時に呼ばれます。外部ブラウザ/内部ブラウザへの遷移を行なってください。	e.g. https://apps.apple.com/app-name
TWITTER	カード内の「Twitter」ボタンをタップ時に呼ばれます。外部ブラウザ/内部ブラウザへの遷移を行なってください。	e.g. https://twitter.com/page
FACEBOOK	カード内の「Facebook」ボタンをタップ時に呼ばれます。外部ブラウザ/内部ブラウザへの遷移を行なってください。	e.g. https://facebook.com/page
INSTAGRAM	カード内の「Instagram」ボタンをタップ時に呼ばれます。外部ブラウザ/内部ブラウザへの遷移を行なってください。	e.g. https://instagram.com/page

Discussion

ログインするとコメントできます

はじめに

Mapbox広告とは

地図に広告を表示してみよう

Mapbox Ads SDK for Android の 入手方法

準備

導入 その1

導入 その2

導入 その3

実行結果

コード全体

最後に

各インタフェースメソッドについての解説

各種タップイベントの種類

カード内の各種外部リンクボタンの種類

Discussion

Mapbox Ads SDK for Android の入手方法

導入その1

導入その2

導入その3