はじめてでも15分でできる!動画リワード広告SDKの導入と実装方法を解説!

はじめてでも15分でできる!動画リワード広告SDKの導入と実装方法を解説!

はじめまして!アプリソリューション本部コンサルタントのはなしーこと花島です!
FluctSDK導入シリーズ第一弾です。

今回はFluctSDKのご紹介と、そもそもSDKってなに?導入と実装って何が必要?どんなことをするの?という疑問に答えるため、実際にFluct SDKの組み込みにチャレンジしつつ解説いたします。

そもそもSDKってなに?fluctSDKとは?

SDKとは、特定のソフトウェアを開発する際に必要なツールのセット(APIのライブラリ、サンプルプログラム、技術文書などが含まれるもの)です!
Software Development Kitの略称であり、日本語ではソフトウェア開発キットと訳します。
webサイトでは一般的にJavaScript というコードを直接サイト上に貼り付けて広告を実装しますが、アプリでは一般的に動画リワードやバナーで、このSDKを活用して広告を実装します。

fluctSDKの役割についての図

FluctSDKは、DSPとアドネットワークの最適な配信を担うSDKです。

DSPに対して、fluctはリアルタイムオークションを行っています。FluctSDKはオークションに必要な情報(IDFA・Bundleなど)をAPPから取得し、各DSPへ送っています。DSPは多くの広告案件から条件に見合うものを入札、オークション主催者であるfluctは、最も高単価な入札を行ったDSPをオークション勝者とし、FluctSDKを介して該当DSPからの広告を配信します。

また、アドネットワークに対して、FluctSDKは独自のCPM最大化ロジックを活かした最適化配信を行っています。特に動画系フォーマットでは、動画再生プレイヤーを各アドネットワークSDKが担うため、複数のSDK実装が必要です。司令塔であるfluctは、各アドネットワークに対して各SDKを最適に出し分けるメディエーションを行っています。

fluctRTBロジックのイメージ図

fluctは国内で主要なほぼ全てのフォーマットに対応しており、バナー広告、インタースティシャル広告、動画リワード広告、ネイティブ広告の配信が可能です。
対応サイズや導入が必要なSDKについては以下をご覧ください。

また、FluctSDKの詳細についてはこちらのドキュメントをご確認ください。

AdMobとの連携について

AdMobはGoogle社が提供するアプリディベロッパー向けの広告ソリューションです。
アカウントを作成することで誰でも無料で利用することができます。

FluctSDKとAdMobを合わせて配信いただく場合、AdMobのメディエーションという機能をご利用いただくと便利です。FluctSDKとAdMobを競わせて広告配信を行うことができます。
AdMobメディエーション 内でfluctを配信いただくことで、より多くの案件を配信でき、収益を向上させることが可能です。
fluctではAdMobメディエーション 用のカスタムイベントを用意しております!
AdMobをご実装いただいた上で、AdMobメディエーション 用のカスタムイベントを実装し、AdMob管理画面上で簡単な設定を行うことで配信が可能です。

詳細についてはこちらでご確認ください。

動画リワードのSDK導入・実装編

早速ですがSDKを導入していきます!
今回は弊社SDKエンジニア小菅(通称こすさん)にFluctSDK実装について詳しく教えていただきました!もともとディベロッパー側からFluctSDKの開発にジョインしていただき入社してすぐに実装支援やSDK開発をガンガン進めてくださっているすごい方です。
広告実装、こうすると幸せだよ」などのプレゼンで登壇されたり、過去記事の「ナカユビ・コーポレーション様が語る実装支援」でもその活躍ぶりをご紹介しておりますので気になる方はぜひご覧ください!

その前に・・・

動画リワードとは?

ゲーム等のアプリ内でユーザーに対してポイントやアイテムなどの報酬(リワード)を与える代わりに、動画広告を完全視聴してもらうタイプの広告フォーマットです。
従来広告と異なり、動画視聴の意思決定はユーザーが行う形式が一般的です。

ユーザーの操作イメージ

アプリの作成

小菅

今回はテスト用のアプリを作成して導入していきます。まずはXcodeでアプリを作っていきます!

インタビュー担当 株式会社 fluct アプリソリューション本部 花島瑞希
花島

Xcode・・・??

Xcodeとは

・iOS/macOS用統合開発環境

・iOS/macOSアプリを作る際は絶対に必要

・macOSでしか提供されない

・エンジニアはMacBookを買ったらまずはこれを入れる必要がある

・これがないとiOSアプリはbuildできない

・言語はObjective-C or Swift

小菅

Xcodeを理解したところでXcodeでのアプリの作り方はこんな感じ。

  1. Create New Projectをクリック
  2. Single View Appを選択
  3. プロダクトネームを決める(なんでもOK!今回はhanashiapp)
  4. Organization Name を決める(多くの場合ユニークな名前を設定するためドメインの逆順、例えば「fluct.jp」なら「jp.fluct」にするらしい!なるほど)
  5. デスクトップ(他の場所でもOK!)にクリエイト
  6. これでプロジェクトのでき上がり!
  7. 機器選択(自分のデバイスを選ぶ、今回はiPhone6)
  8. プレイボタンを押してビルドアップ
  9. 花島の携帯にアプリが登場!(すごい!!)
勉強会の様子はこんな感じでした

SDKの導入

小菅

FluctSDKと各アドネットワーク のSDKを導入いくよー。
iOSの組み込みではfluctで推奨している「CocoaPods」を利用します。

インタビュー担当 株式会社 fluct アプリソリューション本部 花島瑞希
花島

CocoaPods?? 耳にしたことはあるけど具体的にどんなものかはちょっと・・・。
詳しくお願いします!

CocoaPodsとは

iOS/Mac向けのライブラリ管理ツール

外部ライブラリ(Pod)を利用する際にプロジェクトに自動で必要なライブラリのダウンロードをおこなってくれ、さらにバージョンの管理までおこなってくれる便利なツールです(なんて素敵な♡)

これがないと手動で1つずつのSDKをDLしてバージョンを管理して…と作業が多くなってしまうのでぜひCocoaPodsのご利用をおすすめ致します!

小菅

それではSDKを導入していきますー!

利用するプロジェクトで

pod “FluctSDK
pod “FluctSDK-MediationAdapter

を入力し保存(赤枠)

Podfile.lock が追加されたのが確認できる(Pods内に全部入った)(赤枠)

完成!!簡単ですね!

動画リワード実装の環境準備

小菅

次は環境の準備です。
実際のアプリだと「動画を見てみて続きを読む」とか、「CMをみて体力を回復」のやつですね。今回は広告を表示するための簡易的なボタンを作っていきますー。

インタビュー担当 株式会社 fluct アプリソリューション本部 花島瑞希
花島

いよいよ目に見える形になりますね!楽しみ♪

広告を読み込みするボタンと動画を再生するボタンを中央に配置します!

ボタンが押された時に処理が実行されるように ViewController.swift に以下の記述を追加します。

Main.storyboardに移動して Received Action のセクションを見ると loadshow が現れるのでこれをボタンのアクションに紐付けます。
ボタンのイベントは押された後にアクションを実装したいので、 Touch Up Inside を選択しました!

SDK実装

小菅

ラストスパート!本題のSDK導入をしていきます。
SDKを実装して実際に動画リワードを再生してみます。

インタビュー担当 株式会社 fluct アプリソリューション本部 花島瑞希
花島

いよいよ導入ですね!わくわく♪

  • View Controller.swift画面で import UIKit 下に import FluctSDK を入力
    (FluctSDK使いますよという宣言です)
  • load(読み込み)の記述を追加
    (このIDの広告を読み込んでねと言う意味)
    {の中にFSSRewardedVideo.shared.load(withGroupID: “String”, unitID “String”)
    Group IDと Unit IDにはコンサルタントから納品させていただく広告IDをお使いください!
    (今回はテスト用IDを使用しています)
  • show(表示)の記述を追加
    (1)hasAdAvailable(在庫の確認)
    {の中にif FSSRewardedVideo.chared.hadAdAvailable
    (forGroupID….上と同様に対応)
    (2)presentAd(広告の表示)の記述を追加
    {の中に、FSSRewardedVideo.shared.presentAd
    (for GroupID…同様, from: self)

広告が再生されました!!ちょっと感動!!

報酬ゲット※ご自由にご設定ください

FluctSDKから「動画広告が表示された」「報酬が発生した」「広告閉じた」などのイベントを教えてもらうことができます。
そちらの中の「報酬が発生した」イベントを受け取って、ユーザーに報酬としてポイントやアイテムなどを渡す処理を加えます。
今回は再生までの実装だったので、報酬に関しては割愛しました。

fluctの開発サポート機能について

小菅

導入や実装がうまくいかない?エラーが起きてしまう??
最後にそんな時に知っておくとお得なFluctSDKの豆知識を紹介しますー。

もしもうまくいかないなぁというときも大丈夫!
FluctSDKにはトラブルの際に調査に大変便利な機能をご用意しております。
配信ログを元に調査を行うことのできる機能や、特定のアドネットワーク のみ選択して表示確認が行えるアドネットワーク 個別配信機能、テストモード、デバックモードなどをご用意しております。

そのほか調査に必要な情報(問題発生時間・端末OS・バージョン・IDFA/ADID・bundleID・症状・エンドカードのキャプチャ・エラーコード)などをいただきましたら社内にて可能な限り調査を進めさせていただきます。

まとめ

小菅

今回はPCを貸したのとアドバイスをしただけで実装は全てはなしーさんがやりました!
導入から実装、広告の再生まで知るために実際に触ってみるのが一番だと思い今回の企画にチャレンジしてみましたが、楽しく進める事が出来ました!

インタビュー担当 株式会社 fluct アプリソリューション本部 花島瑞希
花島

今回の記事作成のため初めてコードに触れ、初めてSDKの導入にチャレンジしました。
その中で今まで業務の中でFluctSDKをご提案していましたが、私自身の感じていた疑問やハードルが解消できました。
本記事の読者さまにも、「FluctSDKとはどんなものか」という理解の助けや、「こんなに簡単なら自分達でも実装できるかも!」と少しでも思っていただける記事になっていればと思います。

今回の記事を通して、fluctにご興味を持っていただいた方(嬉しい!)やfluctを利用してみたい(最高です!)という方がいらっしゃいましたら以下よりfluctへお申し込みください!

お申し込みから実装までは、次の4ステップで完了します!

  • fluctへ申込み(規約をご確認・ご承認も含む)
  • 媒体審査・広告IDの発行
  • SDKの取得(Github等から)
  • 導入・実装!

最後になりましたが、SNSでの記事のシェアもぜひお願いできますと幸いです!
またTwitterでのお問い合わせもお待ちしております!

ご拝読いただきありがとうございました。