WordPressにスマートアプリバナーを簡単に追加する方法

多くのアプリ開発者から「WordPressサイトから直接モバイルアプリを宣伝する方法はありますか？」という質問を受けてきました。答えは「はい」であり、あなたが思うよりも簡単です。

これを実現する最も簡単な方法の1つは、スマートアプリバナーを使用することです。これらのバナーは、iPhoneやiPadでウェブサイトを表示した際に画面上部に表示され、訪問者にアプリのダウンロードまたは開封を促します。適切なプラグインを使用すれば、Androidユーザーにもバナーを表示できます。

スマートアプリバナーは、ポップアップのように邪魔になりません。代わりに、サイトに自然に溶け込み、訪問者にアプリのダウンロードまたは開封を優しく促します。その結果、ダウンロード数が増加し、ユーザーエンゲージメントが向上し、よりプロフェッショナルなモバイル体験を提供できます。

WordPressにこれらのバナーを追加するためのさまざまな方法をテストした結果、あらゆるスキルレベルに最適な2つのアプローチを見つけました。

1つ目は簡単なコードスニペットを使用してAppleネイティブのiOSバナーを追加する方法、2つ目はiOSとAndroidデバイスの両方をサポートし、デザインのカスタマイズも可能なプラグインを使用する方法です。両方のオプションについて、ステップバイステップで説明します。

TLDRクイックサマリー: スマートアプリバナーは、Safariに表示され、訪問者にアプリのダウンロードまたは開封を促すネイティブiOSバナーです。WordPressにこれらを追加する最も簡単な方法は、WPCodeという無料プラグインを使用することです。

Androidユーザーにもバナーを表示したい場合は、両方のプラットフォームをサポートし、バナーのデザインを完全にカスタマイズできるMobile Smart App Bannerプラグインを使用できます。

WordPressにスマートアプリバナーを追加する理由

WordPressウェブサイトでスマートアプリバナーを使用すると、モバイルアプリのダウンロード数や購入数を増やすことができます。

多くのウェブサイト所有者は、訪問者がモバイル向けに最適化された方法でコンテンツを閲覧できるコンパニオンモバイルアプリを作成しています。

これらのアプリはモバイルデバイス向けに設計されているため、多くの場合、より優れたユーザーエクスペリエンスを提供します。モバイルプッシュ通知を使用して、リマインダー、パーソナライズされたコンテンツ、オファー、アップデートなどを表示することもできます。これらすべてが、エンゲージメント、コンバージョン、売上の向上につながります。

スマートアプリバナーを使用して、iPhoneおよびiPadユーザーにモバイルアプリのダウンロードを促すことができます。

これは、iOSユーザーがSafariブラウザを使用してサイトにアクセスした際に、画面上部に表示されるバナーです。

訪問者はバナーをクリックしてApp Storeからアプリをダウンロードできます。訪問者がすでにアプリを持っている場合は、バナーが代わりにアプリを開くように促します。このようにして、より多くのアプリのダウンロードとエンゲージメントを獲得できます。

訪問者がApple以外のデバイスまたは別のウェブブラウザを使用している場合、Appleのネイティブスマートアプリバナーは表示されません。

ただし、方法2で説明するように、プラグインを使用してAndroidユーザーや他のブラウザを使用している訪問者にもアプリダウンロードバナーを表示できます。

それでは、WordPressにスマートアプリバナーを追加する方法を見ていきましょう。簡単なリンクを使用して、使用したい方法に直接ジャンプしてください：

方法1：WPCodeを使用する（WordPress全体にスマートアプリバナーを表示する）

WordPressウェブサイトにスマートアプリバナーを追加する最も簡単な方法は、WPCodeを使用することです。この無料プラグインを使用すると、1行のコードで各ページや投稿に同じバナーを表示できます。

WordPressにカスタムコードを追加する際、サイトのfunctions.phpファイルを編集するように指示するガイドもあります。しかし、私たちはこれをお勧めしません。わずかな入力ミスや間違いでも、一般的なWordPressのエラーが発生したり、サイトにアクセスできなくなったりする可能性があります。

WPCodeを使用すると、リスクなしでカスタムコードをWordPressテーマファイルに追加できます。コードスニペットはボタンをクリックするだけで有効化および無効化できます。

まず、無料のWPCodeプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関する初心者向けガイドをご覧ください。

有効化したら、コードスニペット » スニペットを追加 に移動します。「カスタムコードを追加 (新規スニペット)」オプションの下にある「+ カスタムスニペットを追加」ボタンをクリックします。

次に、画面に表示されるオプションのリストから、コードの種類として「HTMLスニペット」を選択する必要があります。

これで、「カスタムスニペットの作成」ページに移動し、コードスニペットの名前を入力できます。

これは参考用ですので、好きなものを使用できます。

次のステップでは、アプリケーションのIDを知る必要があります。

この情報を取得するには、新しいブラウザタブを開き、Apple Services Marketing Toolsページにアクセスしてください。ここで、プロモートしたいアプリケーションの名前を入力し、「検索」アイコンをクリックします。

検索語句に一致するすべてのiOSアプリを表示するには、単に「アプリ」セクションまでスクロールしてください。

ここで、プロモーションしたいアプリを見つけてクリックします。

画面の下部には、「コンテンツリンク」が表示されます。

アプリIDは、idと?の間の値です。次のステップでこの情報が必要になるため、このタブを開いたままにするか、アプリIDをメモしておいてください。

アプリIDを取得したら、WordPressダッシュボードに戻ります。

次のスニペットをコードエディターに追加し、前のステップで取得した情報でアプリIDを置き換えることができます。

<meta name="apple-itunes-app" content="app-id=12345678">

それが完了したら、「挿入」ボックスまでスクロールします。

まだ選択されていない場合は、「自動挿入」をクリックし、ドロップダウンメニューから「サイト全体ヘッダー」を選択します。

準備ができたら、ページの上部までスクロールし、「非アクティブ」スイッチを「アクティブ」に切り替えます。

最後に、[スニペットを保存]ボタンをクリックして変更を保存します。

これで、スマートアプリバナーがWordPressウェブサイトに表示されます。

特定のページや投稿に異なるバナーを表示する方法

ご覧のとおり、WPCodeを使用してWordPressにスマートバナーを簡単に追加できます。

しかし、異なるページで異なるアプリを宣伝したい場合はどうでしょうか？

例えば、ライフスタイルブログを運営していて、食品関連の投稿で宣伝したいレシピアプリがあるとします。同時に、ワークアウトページで宣伝したいフィットネスアプリがあるかもしれません。

その場合、WPCode Premium（年間49ドルから）へのアップグレードをお勧めします。このプラグインには、各コードスニペットをどこで実行するかを正確に制御できるスマート条件ロジックが搭載されています。これにより、複数のスマートアプリバナーを作成し、任意のページまたは投稿に表示できます。 

まず、WPCodeのウェブサイトにアクセスしてサブスクリプションを購入してください。その後、他のWordPressプラグインと同様にインストールできます。

その後、WordPressダッシュボードのWPCode » 設定に移動し、ライセンスキーを入力してください。

この情報は、WPCodeのウェブサイトでアカウントにログインするか、WPCodeを購入した際に受信した購入確認メールを確認することで見つけることができます。 

それが完了したら、WordPressダッシュボードのコードスニペット » スニペットを追加に移動します。ここで、「カスタムコードを追加」セクションにカーソルを合わせます。

表示されたら、「カスタムスニペットを追加」を選択します。

次のパネルで、「HTMLスニペット」をクリックします。

次に、スニペットにわかりやすい名前を付けて、どのアプリを宣伝しているかを簡単に識別できるようにします。

たとえば、「スマートアプリバナー – レシピアプリ」と名前を付けることができます。

コードエディタで、最初のアプリアイコンのメタタグを追加します。

アプリIDを、お使いのアプリケーションの正しいものに置き換えるようにしてください。

<meta name="apple-itunes-app" content="app-id=YOUR_FIRST_APP_ID">

次に、「挿入」セクションまでスクロールし、「自動挿入」が選択されていない場合は選択します。

その後、「場所」ドロップダウンを開き、「サイト全体ヘッダー」を選択します。

次に、さらに下にスクロールして「スマート条件ロジック」セクションに移動します。 

ここで、「ロジックを有効にする」設定をクリックしてアクティブにします。

これで、スマート条件ロジックルールを作成する準備ができました。

まず、「条件」ドロップダウンを開き、「表示」を選択します。次に、「新しいグループを追加」をクリックします。

その後、最初のドロップダウン（デフォルトで「ログイン済み」と表示されている）をクリックします。

これにより、まったく新しいセクションが追加されます。

左側のメニューで、「どこ」を選択します。

次に、「投稿/ページ」を選択します。

それが完了したら、2番目のドロップダウンをクリックし、「いずれか」が選択されていない場合は選択します。

最後に、3番目のフィールドをクリックして、このアプリバナーを表示したい特定のページまたは投稿を検索します。

複数のページまたは投稿にこのバナーを表示したいですか？ その場合は、「新しいグループを追加」をクリックするだけです。

これで、これらの手順を繰り返して、追加の投稿またはページを選択できます。

このスニペットの設定が完了したら、ページの上部までスクロールし、「非アクティブ」スイッチを「アクティブ」に切り替えます。最後に、「スニペットを保存」ボタンをクリックして変更を保存します。

次に、宣伝したい追加のアプリごとにこのプロセスを繰り返します。 

WPCodeは、訪問者が現在表示しているページまたは投稿に基づいて、適切なスマートアプリバナーを表示します。

WordPressでSmart App Bannerコードをテストする方法

スマートアプリバナーをテストする最良の方法は、Safariモバイルアプリを使用してiOSデバイスでウェブサイトにアクセスすることです。実際、デスクトップからWordPressサイトのモバイルバージョンを表示しようとしても、スマートアプリバナーは表示されません。

コードスニペットが機能しているかどうかをすばやく確認する必要がある場合は、ブラウザのInspectツールを使用する回避策があります。これにより、<meta name>コードがサイトの<head>セクションに挿入されているかどうかを確認でき、期待どおりに機能していることが示唆されます。

これを行うには、WordPressブログの任意のページまたは投稿に移動します。次に、ページ上の任意の場所を右クリックして「Inspect」を選択します。

新しいパネルが開き、サイトのすべてのコードが表示されます。

単純に<head>セクションを見つけて、その矢印をクリックして展開します。

次に、前のステップで追加した<meta name="apple-itunes-app">コードを探します。

このコードが表示された場合、スマートアプリバナーはiOSデバイスに表示されるはずです。

方法2: Mobile Smart App Bannerを使用する (iOSおよびAndroid向けバナーを追加)

iOSとAndroidの両方のユーザーをサポートするプラグインが必要な場合は、Mobile Smart App Bannerプラグインの使用をお勧めします。

これは無料のプラグインで、訪問者のデバイスを自動的に検出し、適切なアプリストアリンクを表示します。 

バナーには、訪問者がバナーを非表示にできる組み込みの「閉じる」ボタンが含まれており、クッキーを使用してこの決定を記憶します。

バナーは非表示にされてから7日間表示されないことに注意してください。

まず、Mobile Smart App Bannerプラグインをインストールして有効にする必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドを参照してください。

有効化したら、WordPressダッシュボードの設定 » Mobile Smart App Bannerに移動します。

ここで、「アプリバナーを有効にする」オプションの横にあるチェックボックスをオンにして、サイトでバナーを有効にします。 

それが完了したら、「アップロード」ボタンをクリックします。

次に、アプリのアイコンとして使用したい画像を選択します（512x512pxの画像の使用をお勧めします）。

「バナー位置」ドロップダウンを開き、リストからオプションを選択することで、画面上のバナーの表示場所を選択することもできます。

画面の下部にバナーを配置すると、より邪魔にならず、エンゲージメントが高くなることが多いことがわかりました。

その後、「アプリ名」フィールドにアプリ名を入力し、「アプリのサブタイトル」ボックスに短い説明を入力できます。 

次に、アプリストアのリンクとPlayストアのリンクを正しいフィールドに入力します。

バナーの外観を変更したい場合は、「カラー設定」セクションまでスクロールしてください。 

ここでは、さまざまな設定を使用して、背景色、ボタンの色、ボタンのテキストの色などを変更できます。

リアルタイムプレビューもあるため、さまざまな設定を簡単に試して、最適なものを確認できます。 

または、「iOSスマートアプリバナーを有効にする」の横にあるチェックボックスをオフにすることで、SafariのAppleネイティブスマートアプリバナーを使用することもできます。

次に、メソッド1で説明されているのと同じプロセスを使用して見つけることができるアプリストアIDを入力する必要があります。 

これが有効になっている場合、SafariユーザーはネイティブのAppleバナーを表示し、Chrome、Firefox、その他のiOSブラウザのユーザーは代わりにカスタムバナーを表示します。

それが完了したら、画面の下部までスクロールし、「変更を保存」をクリックしてバナーを公開します。

WordPressでスマートアプリバナーを追加することに関するFAQ

それでも質問がある場合は、WordPressウェブサイトにスマートバナーを追加する方法に関するトップFAQをご覧ください。

スマートアプリバナーとは何ですか？

スマートアプリバナーはSafariウェブブラウザの上部に表示され、アプリユーザーにアプリを開くか、Apple App Storeからダウンロードするオプションを提供します。

Appleによって作成されたため、スマートアプリバナーは多くのiOSユーザーが認識する一貫したデザインを持っています。これらは、iOS 6以降を実行しているiPhoneおよびiPadを使用しているユーザーにのみ表示されます。

デスクトップでスマートアプリバナーが表示されないのはなぜですか？

スマートアプリバナーは、サイトのモバイルバージョンを表示している場合でも、デスクトップコンピューターには表示されません。

バナーがどのように表示されるかを確認するには、Safariモバイルアプリを使用してiPhoneまたはiPadでサイトにアクセスする必要があります。

iPhoneまたはiPadでスマートアプリバナーが表示されないのはなぜですか？

スマートアプリバナーは、Safariモバイルアプリを使用している場合にのみ、iOS 6以降を実行しているデバイスに表示されます。スマートアプリバナーが表示されない場合は、まずiOSとSafariモバイルアプリの両方の最新バージョンを確認してください。

スマートアプリバナーは、デバイスがアプリをサポートできるかどうか、およびアプリがお住まいの地域で利用可能かどうかを検出します。スマートアプリバナーが表示されない場合は、デバイスがこれらのチェックのいずれかに失敗した可能性があります。

Safariでスマートアプリバナーが表示されなくなったのはなぜですか？

「x」ボタンをクリックしてバナーを閉じた場合、デフォルトでは再度表示されません。

モバイルデバイスによっては、プライベートブラウザタブを開く、キャッシュまたはCookieをクリアする、または設定をリセットするために他のアクションを実行する必要がある場合があります。

スマートアプリバナーはAndroidデバイスで機能しますか？

いいえ、Appleのネイティブスマートアプリバナーは、Safariブラウザを使用するiOSデバイス専用です。Androidには組み込みの同等のものはありません。

ただし、Mobile Smart App BannerのようなWordPressプラグインを使用して、Android訪問者にカスタムアプリダウンロードバナーを表示できます。

このチュートリアルがお役に立ち、WordPress でスマートアプリバナーを追加する方法を学べたことを願っています。また、行動喚起のベストプラクティスに関するガイドや、コンバージョンを急増させるための最高の WordPress リードマグネットツールの専門家による選び方もご覧ください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。