忍者Admaxのスマートフォン向けカスタマイズ広告の作り方

忍者Admaxのカスタムネイティブ広告のカスタマイズ方法を解説します。カスタマイズにはある程度のJS、CSSの知識が必要です。ブログでhtmlを使ってるからできるだろう程度の知識では無理だと思います(数か月前の私)。

ちなみにAdmax の運営側が最低限の資料を公開しています。ただ、今回は仕組みから読み解くことを目標にやっていくので運営の推奨するやり方を無視していきます。めちゃくちゃなやり方を嫌っている方はブラウザバック必須です！

まずは仕様を見るためにテンプレートリテラル(ここでは変数)がどのように使われているのかを確認します。以下のコードをデフォルトで記述されているコードの直下に張り付けます。

<p>CLICK_URL:${CLICK_URL}</p>
<p>IMAGE_URL:${IMAGE_URL}</p>
<p>TITLE:${TITLE}</p>
<p>DESCRIPTION:${DESCRIPTION}</p>
<p>OPTOUT_URL:${OPTOUT_URL}</p>

出力結果はこんな感じ(ユーザを特定できそうなタグはモザイクにしました)

f:id:asakanow:20200724084501j:plain


  • CLICK_URL:広告クリック後の遷移先(要はクリック検知のURL)
  • IMAGE_URL:画像のURL
  • TITLE:文字部分のタイトル
  • DESCRIPTION:説明文
  • OPTOUT_URL:広告のプライバシー情報


カスタマイズ広告なので自由に設定できると思いきや以外にも制約があるそうです。

f:id:asakanow:20200724122645j:plain

DESCRIPTIONとIMAGE_URL、TITLE こそはコメントアウトで無効にできたもののOPTOUT_URLとCLICK_URLはアンカータグ内に入れても無効にできませんでした。JSのdisplayを使えば無効にできるかもしれません(もはや広告でない)。

結局、フリー画像サイトに張ることになったのはこれ。

<a href="${CLICK_URL}">
<div align="center"><img style="width:75%;height:auto;" src="${IMAGE_URL}"/></div>
<p class="p">${TITLE}</p>
<p class="p">${DESCRIPTION}</p>
</a>
<div align="right"><a id="Id" href="${OPTOUT_URL}">[広告]　　</a></div>
<style>
.p{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>

f:id:asakanow:20200816231221j:plain

問題ないですね。文字のサイズなどの最低限の事項を設定していないので実用性はないですが予想通りの動きを見せてくれました。


以上