Maccle

WebサイトにiOSアプリ宣伝用のSmart App Bannerを表示する方法とランダム表示

約 6 分
WebサイトにiOSアプリ宣伝用のSmart App Bannerを表示する方法とランダム表示

iOSのアプリ開発者も、アプリのアフィリエイターにも自分のWebサイトがあるならこれはやっといて損はありません!

iOS 6のMobile Safariでは、次のmetaタグをHTMLのheadタグ内に設置するだけでiPhoneやiPadでサイトにアクセスすると、ブラウザの最上部に指定したアプリの宣伝用バナー(Smart App Banner)を表示すること(iTunesやApp Storeへリダイレクト)ができるようになっています。
※OS Xではバナーは表示されません。

これを、HTMLの <head>~</head> 内にただ挿入するだけでいいんです!

じゃ、このmetaタグのパラメータを一つずつみていきましょう。

(複数のSmart App Bannerをランダムに表示する方法はこちら)

app-id (必須項目)
アプリに割り当てられている固有の9桁のApp ID。
URLでいうと、以下の青字の部分が App ID ですね。
“https://itunes.apple.com/jp/app/some-app-name/idmyAppStoreID?mt=8″

https://itunes.apple.com/jp/app/some-app-name/id123456789?mt=8
だったら、”123456789″ がApp IDです。
PRしたいアプリのApp IDが分からない場合は、iTunes Link Maker からアプリ名などで検索してiTunesストアのURLをチェックしてみてください!

affiliate-data (オプション項目)
iTunesストアのアフィリエイトプログラム(LinkShare)に関する情報を指定して、アフィリエイトリンクとしてバナーを設置できます。

具体的には、以下の値を指定することでアフィリエイトバナーとして設置できます。

partnerId=30&siteID=###########

LinkShareの場合、ピンクの “partnerId“の値は “30” で固定です。
青字の”siteID” の値は、LinkShareでのサイトIDを指定しますがハッシュ値で指定することに注意が必要です(※通常の数字からなるサイトIDではありません)。

まずはLinkShareにログインして適当なiTunesストアのURLでアフィリエイトリンクを作ってみてください。
リンクシェア アフィリエイト紹介プログラム
以下のようなアフィリエイトリンクが生成されたとします。

http://click.linksynergy.com/fs-bin/click?id=UkOLawSuc90&subid=&offerid=94348.1&type=10&tmpid=3910&RD_PARM1=https%3A%2F%2Fitunes.apple.com%2Fjp%2Fapp%2Fdropbox%2Fid327630330%3Fmt%3D8

この場合、上記の11文字の “UkOLawSuc90” の部分がここで指定するサイトIDのハッシュ値です!

以上を踏まえて、この場合のパラメータの指定は以下のようになります!

affiliate-data=partnerId=30&siteID=UkOLawSuc90
app-argument (オプション項目)
表示しているバナーをタップした際に、ネイティブアプリに渡すコンテキスト(URL)です。

Smart App Bannerで表示されているアプリが既にインストール済みの場合はアプリを直接起動しますが、このパラメータが指定されている場合は、それをアプリ側で判定してバナーをタップしてアプリに切り替わったときもブラウザでアクセスしていたサービスを継続して引き継ぐといったことができます。

例えば、TwitterをMobile Safariで開いてみるとSmart App Bannerが表示されますが、HTMLソースをみると以下のようになっています。

”twitter://timeline” ということはブラウザでTwitterにログインしていて、Smart App Banner をタップしたらTwitterアプリが起動してさらに自分のタイムラインを表示させる、といったことをしていますね!

という機能なので大抵の場合はディベロッパーもアフィリエイターも使う機会はないかと…

【応用】アクセスするたびにSmart App Bannerを変更してみる-PHP編

さて、HTMLのheadタグ内のmetaタグとしてSmart App Banner用のコードを1行入れるだけで任意のアプリやデジタルコンテンツのApp(iTunes)ストアへのバナーが表示できましたが、毎回表示されるバナーは1種類というのも少なすぎますよね?

そんなときは、以下の関数を用意して、HTMLのheadタグ内でその関数を呼び出してあげればランダムで表示する Smart App Bannerを表示できます。

displaySABMetaTag関数

App ID1, App ID2,…は表示したいアプリの数だけApp IDをカンマ(,)で区切って配列に追加してください。

やってることはとても簡単。バナーに表示するアプリのApp IDを配列に入れてその数を上限にランダムで選んでmetaタグに組み込んでるだけです。

WordPressでもランダムにSmart App Bannerを表示してみる

では、先ほどの複数の Smart App Banner をランダムに表示させる関数を利用して、WordPressのテーマに組み込んでみましょう!

まず、”functions.php” に先ほどの「displaySABMetaTag」関数をごっそり貼付けます。
あとは、”header.php” にある <head>~</head> 内に以下の1行を貼り付けてこの関数を呼び出すだけ!

アフィリエイトバナーにするなら、引数にLinkShareのサイトID(ハッシュ値)を渡します。

こんな感じでアクセスのたびにランダムに表示されます!
sab-rand2sab-rand1

[Promoting Apps with Smart App Banners]

この記事を書いたひと

某IT系なんちゃってエンジニアヨーダ
Apple好きだけど盲目マカーは気持ち悪いと思ってる中道だと思い込んでるしがないダメダメエンジニア。

今もってるApple製品↓
Macbook Pro 15 inch, iMac 27 inch (Late 2009), iPhone 6 Plus, iPad (初代! いらない!)
Follow :

コメントはこちら

*

COMMENT ON FACEBOOK