WordPressサイトからモバイルアプリを直接宣伝する方法はありますか？答えはイエスで、思ったより簡単です。
これを実現する最もシンプルな方法のひとつが、スマートアプリバナーです。これらの洗練された小さなバナーは、iPhoneやiPadで表示されたときに、あなたのサイトの上部にシームレスに表示され、訪問者にアプリをダウンロードするか、すでにアプリを持っている場合はそれを開くように優しく促します。
スマートアプリバナーは、ダウンロードを促進し、ユーザーを引きつけ、シームレスなモバイル体験を提供する素晴らしい方法です。さらに詳しく知りたい方は、WordPressサイトにバナーを追加する2つの簡単な方法をご覧ください。
なぜWordPressにスマート・アプリ・バナーを追加するのか？
多くのサイトオーナーは、訪問者がモバイルに最適化された方法でコンテンツを閲覧できるコンパニオンモバイルアプリを作成しています。
これらのアプリはモバイル端末向けに設計されているため、多くの場合、より優れたユーザー体験を提供します。また、モバイルプッシュ通知を使って、リマインダー、パーソナライズされたコンテンツ、オファー、更新などを表示することもできます。これらはすべて、エンゲージメント、コンバージョン、売上の増加を意味します。
モバイルアプリをすでにお持ちでない場合は、WordPressサイトをモバイルアプリに変換する方法についての完全ガイドをご覧ください。
スマートアプリバナーを使って、iPhoneやiPadユーザーにモバイルアプリのダウンロードを促すことができます。これは、iOSユーザーがSafariブラウザを使ってサイトにアクセスすると、画面上部に表示されるバナーです。
訪問者はバナーをクリックしてApp Storeからアプリをダウンロードすることができます。訪問者がすでにアプリを持っている場合は、バナーが代わりにアプリを開くように促します。このようにして、アプリのダウンロード数とエンゲージメントを増やすことができます。
訪問者がアップル以外の端末やウェブブラウザを使用している場合、WordPressは自動的にバナーを非表示にします。
例えば、次の画像は同じサイトをクロームのモバイルブラウザで表示したものです。
それでは、WordPressでスマートアプリのバナーを追加する方法を見ていきましょう。以下のクイックリンクから、使いたい方法にジャンプしてください：
方法1：WPCodeを使う（WordPress全体にスマートアプリのバナーを表示する）
WordPressサイトにスマートアプリのバナーを追加する最も簡単な方法は、WPCodeを使用することです。この無料プラグインを使用すると、1行のコードを使用して、すべてのページと投稿に同じバナーを表示することができます。
WPCodeは、個別iOSアプリケーションを宣伝したい場合に最適です。しかし、異なるページで異なるバナーを表示したい場合は、代わりに方法2を使用することをお勧めします。
WordPressにカスタマイザーのコードを追加する際、サイトのfunctions.phpファイルを編集するように指示するガイドもあります。小さなタイプミスやミスがWordPressの一般的なエラーを引き起こしたり、サイトにアクセスできなくなったりする可能性があります。
WPCodeを使用することで、リスクなくWordPressテーマファイルにカスタムコードを追加することができます。また、ボタンをクリックするだけで、コードスニペットを有効化・無効化することができます。
まず、無料のWPCodeプラグインをインストールし、有効化する必要があります。詳しくは、初心者向けWordPressプラグインのインストール方法をご覧ください。
有効化したら、Code Snippets ” Add Snippetにアクセスしてください。次に、「カスタムコードを追加する（新規スニペット）」設定の下にある「スニペットを使用する」ボタンをクリックします。
カスタムスニペットの作成」ページが表示されますので、コードタイプ名を入力してください。これは参考用ですので、お好きな名前をお使いください。
その後、「コードタイプ」ドロップダウンを開き、「HTMLスニペット」を選択する。
次のステップでは、アプリケーションのIDを知る必要があります。
この情報を得るには、新しいブラウザータブを開き、Apple Services Marketing Toolsのページにアクセスします。ここで、宣伝したいアプリケーションの名前を入力し、「検索」アイコンをクリックします。
検索キーワードに一致するiOSアプリをすべて表示するには、「Apps」セクションまでスクロールするだけです。
ここで、宣伝したいアプリを見つけてクリックします。
画面の下に「コンテンツリンク」が表示されます。
アプリIDはidと?の間の値です。この情報は次のステップで必要になるので、このタブを開いたままにしておくか、アプリIDをメモしておきましょう。
アプリIDを取得したら、WordPressダッシュボードに戻ります。次のスニペットをコードエディターに追加し、アプリIDを前のステップで取得した情報に置き換えてください：
<meta name="apple-itunes-app" content="app-id=12345678">
そうしたら、「インサーター」ボックスまでスクロールしてください。すでに選択されていない場合は、「自動挿入」をクリックし、ドロップダウンメニューから「サイトワイドヘッダー」を選択します。
準備ができたら、ページを一番上までスクロールし、「Inactive」スイッチを「Active」に切り替える。
最後に、’Save Snippet’ボタンをクリックして変更を保存します。
これで、WordPressサイトにスマートアプリのバナーが表示されます。
WordPressでスマートアプリのバナーコードをテストする方法
スマートアプリバナーをテストする最善の方法は、Safariモバイルアプリを使ってiOS端末でサイトにアクセスすることです。実際、デスクトップからWordPressサイトのモバイル版を表示しようとしても、スマートアプリバナーは表示されません。
コード・スニペットが機能しているかどうかを素早くチェックする必要がある場合、ブラウザーにあるInspect ツールを使用するのもひとつの方法です。これにより、<meta name>コードがサイトの<head> セクションに挿入されているかどうかを確認できます。
これを行うには、WordPressブログの任意のページまたは投稿に移動します。次に、ページ上の任意の場所で右クリックし、「検査」を選択します。
新しいパネルが開き、サイトのコードがすべて表示されます。
<head>セクションを見つけ、矢印をクリックして展開する。
ここで、前のステップで追加した<meta name="apple-itunes-app">のコードを探します。
このコードが表示されれば、iOS端末にスマートアプリのバナーが表示されるはずです。
方法2：スマートアプリバナーを使う（特定のページや投稿にバナーを追加する）
特定のページや投稿日のみアプリを宣伝したい場合もあるでしょう。
この場合、Smart App Bannerプラグインの使用をお勧めします。このプラグインを使用すると、異なるウェブページに異なるバナーを表示し、それらのバナーにアフィリエイトデータを含めることができます。これらの機能により、アフィリエイトマーケッターには最適なプラグインです。
まず、Smart App Bannerプラグインをインストールして有効化する必要があります。WordPressプラグインのインストール方法については、こちらをご覧ください。
有効化した後、特定のページや投稿、WordPressのトップページ、またはサイト全体にアプリバナーを追加できます。
手始めに、アプリの設定を見てみよう。ここでは、すべてのページや投稿にバナーを追加したり、コンバージョンの高いランディングページのみにスマートアプリのバナーを追加したりすることができます。
開始するには、設定 ” スマートアプリバナーに 行き、アプリケーションの値を「アプリID」フィールドに入力します。
この情報は、方法1で説明したのと同じ手順で入手できる。
アフィリエイト・マーケティングを利用してブログを書いている場合は、アフィリエイト・トークンを「アフィリエイト・データ」フィールドに入力します。情報は様々なので、正しいトークンを取得するには、アフィリエイト・ポータルにログインするか、パートナーに相談する必要があるかもしれません。
その後、「すべてのページに表示」ボックスにチェックを入れるか、チェックを外したままにします。チェックボックスをオフにした場合、アプリのバナーはホームページにのみ表示されます。
バナーの設定に満足したら、「変更を保存」ボタンをクリックするだけで、バナーが有効になります。
スマートアプリのバナーを特定のページや投稿に追加したいですか？これにより、サイト上のどこにバナーを表示するかを正確にコントロールできます。
例えば、あなたがアフィリエイトマーケターなら、異なるページで異なるアプリを宣伝し、Googleアナリティクスを使ってどのバナーが最もコンバージョンを獲得したかを確認するかもしれない。
これを行うには、バナーを追加したいページまたは投稿を開くだけです。WordPressのコンテンツエディターで、新しい「Smart App Banner」セクションを見つけてください。
ここで、アプリIDとオプションのアフィリエイト情報を上記と同じ手順で追加するだけです。
入力した情報に問題がなければ、「更新」または「公開する」をクリックするだけで、変更が反映されます。
あとは、この手順を繰り返すだけで、他のランディングページにもスマートアプリのバナーを追加することができます。
WordPressでスマートアプリのバナーを追加するFAQ
WordPressサイトにスマートバナーを追加する方法について、よくある質問をまとめました。
スマートアプリのバナーとは？
スマートアプリのバナーはSafariウェブブラウザの上部に外観表示され、アプリユーザーにアプリを開くか、Apple App Storeからダウンロードするかのオプションを提供する。
スマートアプリのバナーはアップル社によって作成されたため、多くのiOSユーザーが認識する一貫したデザインを持っています。このバナーは、iOS 6以上を搭載したiPhoneやiPadを使用している人にのみ外観が表示されます。
デスクトップにスマート・アプリのバナーが表示されないのはなぜですか？
スマートアプリのバナーは、サイトのモバイル版を表示しても、デスクトップコンピューターには表示されません。
このバナーを実際に見るには、iPhoneまたはiPadでSafariモバイルアプリを使ってサイトにアクセスする必要があります。
iPhoneやiPadでスマート・アプリのバナーが表示されないのはなぜですか？
スマートアプリのバナーは、iOS 6以上を搭載した端末でSafariモバイルアプリを使用している場合にのみ表示されます。スマートアプリのバナーが表示されない場合は、iOSとSafariモバイルアプリの両方が最新バージョンであることを確認することから始めてください。
スマートアプリのバナーは、端末がアプリをサポートできるかどうか、アプリが現在地で利用可能かどうかも検出します。スマートアプリのバナーが表示されない場合は、端末がこれらのチェックに失敗している可能性があります。
Safariでスマートアプリのバナーが消えたのはなぜですか？
x’ボタンをクリックしてバナーの外観を消せば、初期設定では二度と表示されません。
お使いの端末によっては、設定をリセットするために、プライベートブラウザタブを開いたり、キャッシュやCookieをクリアしたり、その他の操作が必要になる場合があります。
このチュートリアルで、WordPressでスマートアプリのバナーを追加する方法を学んでいただけたら幸いです。また、コールトゥアクションのベストプラクティスに関するガイド、またはコンバージョンを急上昇させるWordPressリードマグネットツールのエキスパートピックもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Jiří Vaněk
Is there a similar option for Android device owners, or is it only for the Apple store? I write articles on the topic of Android and this would really come in handy.
WPBeginner Support
We do not have a method we would recommend at the moment for Android users.
管理者
Jiří Vaněk
I’m sorry because my articles are mostly about Android. But thank you for your response, and I’ll try to find an equivalent plugin for Android and Google Play.
Ralph
I didn’t know such thing… is a thing
I have technical blog and often get offers of promoting apps for money in my articles and this is great way to do this. Especially that we get more and more mobile traffic. I used to have 60% mobile 40% desktop, but now it is 75% mobile and still growing trend.
WPBeginner Support
Mobile is definitely a growing way that sites are being viewed
管理者