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

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

これを行う最も簡単な方法の1つは、スマートアプリバナーを使用することです。これらの洗練された小さなバナーは、iPhoneやiPadで表示されたときにウェブサイトの上部にシームレスに表示されます。

ポップアップのように邪魔ではなく、サイトに自然に溶け込み、訪問者にアプリのダウンロードまたはオープンを優しく促します。その結果?より多くのダウンロード、より良いユーザーエンゲージメント、そしてよりプロフェッショナルなモバイル体験が得られます。

WordPressにこれらのバナーを追加するためのさまざまな方法をテストした結果、あらゆるスキルレベルに完全に機能する2つのアプローチが見つかりました。プラグインを使用したい場合でも、簡単なコードを追加したい場合でも、両方のオプションをステップバイステップで説明します。

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

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

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

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

⭐まだモバイルアプリをお持ちでない場合は、WordPressウェブサイトをモバイルアプリに変換する方法に関する完全なガイドをご覧ください。

スマートアプリバナーを使用して、iPhoneおよびiPadユーザーにモバイルアプリをダウンロードするように促すことができます。これは、iOSユーザーがSafariブラウザを使用してサイトにアクセスしたときに画面の上部に表示されるバナーです。

WordPressウェブサイトでのスマートアプリバナーの例

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

訪問者がApple以外のデバイスまたは異なるWebブラウザを使用している場合、WordPressは自動的にバナーを非表示にします。

例えば、次の画像はChromeモバイルブラウザで同じウェブサイトを表示したものです。

非表示のスマートアプリバナー。

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

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

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

これを踏まえると、単一のiOSアプリケーションを宣伝したい場合はWPCodeが最適です。ただし、ページごとに異なるバナーを表示したい場合は、代わりに方法2を使用することをお勧めします。

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

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

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

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

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

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

WPCodeで「HTMLスニペット」を選択

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

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

WPCodeを使用してAppleアプリバナーを作成する

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

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

アプリマーケティングツールウェブサイト

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

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

iPhoneまたはiPadのiOSアプリのアプリIDを取得する

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

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

AppleアプリID

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

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

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

WordPressテーマヘッダーにカスタムコードを追加する

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

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

WordPressへのスマートアプリバナーの公開

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

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

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

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

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

Google Chromeのインスペクトツール

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

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

WordPressヘッダー内のAppleアプリコード

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

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

Appleスマートアプリバナーコードのテスト

方法2:Smart App Bannerの使用(特定のページや投稿にバナーを追加する)

特定のページや投稿でのみアプリを宣伝したい場合があります。

この場合、Smart App Banner プラグインの使用をお勧めします。このプラグインを使用すると、異なるウェブページに異なるバナーを表示したり、バナーにアフィリエイトデータを追加したりできます。これらの機能により、アフィリエイトマーケターにとって優れたプラグインとなります。

⚠️ 執筆時点では、スマートアプリバナーはWordPressの最新3つのメジャーリリースでテストされていません。そのため、可能な限りWPCodeの使用をお勧めします。

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

有効化すると、特定のページや投稿、WordPressホームページ、またはウェブサイト全体にアプリバナーを追加できます。

まず、アプリの設定を見てみましょう。ここで、すべてのページや投稿にバナーを追加したり、コンバージョン率の高いランディングページにのみスマートアプリバナーを追加したりできます。

開始するには、設定 » スマートアプリバナー に移動し、アプリケーションの値を「アプリID」フィールドに入力します。

WordPressプラグインにアプリIDを追加する

この情報は、方法1で説明されているのと同じ手順に従うことで取得できます。

ブログでアフィリエイトマーケティングでお金を稼ぐ場合、アフィリエイトトークンを「アフィリエイトデータ」フィールドに入力できます。情報は異なる場合があるため、アフィリエイトポータルにログインするか、パートナーに問い合わせて正しいトークンを取得する必要がある場合があります。

その後、「すべてのページに表示」ボックスをチェックするか、チェックしないままにすることができます。ボックスをチェックしないままにすると、アプリバナーはホームページにのみ表示されます。

WordPressブログまたはウェブサイト全体にスマートアプリバナーを表示する

バナーの設定方法に満足したら、[変更を保存]ボタンをクリックして公開してください。

代わりに特定のページや投稿にスマートアプリバナーを追加したいですか?これにより、バナーが表示される場所をウェブサイト上で正確に制御できます。

例えば、アフィリエイトマーケターであれば、ページごとに異なるアプリを宣伝し、Google Analyticsを使用してどのバナーが最も多くのコンバージョンを獲得しているかを確認できます。

これを行うには、バナーを追加したいページまたは投稿を開くだけです。次に、WordPressコンテンツエディターで新しい「スマートアプリバナー」セクションを見つけます。

WordPressのページまたは投稿にスマートアプリバナーを追加する

ここで、上記のプロセスと同じように、アプリIDとオプションのアフィリエイト情報を追加するだけです。

入力した情報に満足したら、「更新」または「公開」をクリックして変更をライブにします。

WordPressブログまたはウェブサイトでのスマートアプリバナーの例

次に、これらの手順を繰り返すだけで、他のランディングページにスマートアプリバナーを追加できます。

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をクリアする、または設定をリセットするために他のアクションを実行する必要がある場合があります。

このチュートリアルでWordPressにスマートアプリバナーを追加する方法を学べたことを願っています。また、CTA(コールトゥアクション)のベストプラクティスや、コンバージョンを急増させるための最高のWordPressリードマグネットツールに関するガイドも参照してください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterFacebookでもフォローできます。

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです!

読者とのインタラクション

6 CommentsLeave a Reply

  1. WPCodeは私が最も役立つと感じたセクションでした。テーマファイルを編集せずに、iOSアプリを持つクライアントを宣伝する方法を探していました。明確な手順をありがとうございます。これにより、彼のアプリを宣伝する時間が大幅に節約できます。

  2. Androidデバイスの所有者にも同様のオプションがありますか、それともAppleストアのみですか?私はAndroidをトピックにした記事を書いており、これは非常に役立ちます。

      • 申し訳ありませんが、私の記事はほとんどAndroidに関するものです。しかし、ご返信ありがとうございます。AndroidとGoogle Playの同等のプラグインを探してみます。

  3. 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.

返信する

コメントを残していただきありがとうございます。すべてのコメントは、当社のコメントポリシーに従ってモデレーションされますので、ご了承ください。メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。