単体クリエイティブのモバイル最適化
このページの内容
ヒント：このページで説明する機能にアクセスできない場合は、営業担当にお問い合わせください。デジタルフィードバックとCustomerXM for Digitalの違いの詳細については、デジタルフィードバックとCustomerXM for Digitalを参照してください。
クリエイティブのモバイル最適化について
ガイド付きの新しいクリエイティブは、最初からモバイル最適化を含むように作られているため、モバイルデバイスで使用するための設定が少なくて済む。これらのモバイルフレンドリーなクリエイティブには、レスポンシブなダイアログ、フィードバックボタン、テンプレート化された埋め込みフィードバックが含まれます。
しかし、デスクトップではきれいに見えるが、モバイル画面では大きすぎるスタンドアローンのクリエイティブもある。これは、古いクリエイティブにはモバイル最適化が組み込まれておらず、モバイル画面でうまく機能させるために特別な設定が必要なためです。このページでは、ポップオーバー、情報バー、スライダーなどのスタンドアローンクリエイティブをモバイルブラウジングエクスペリエンス向けに最適化する方法について説明します。
Qtip:モバイルサイトではなく、モバイルアプリのフィードバックを集めたいのですか？代わりに埋め込みアプリのフィードバックページをご覧ください。
画面の解像度
デバイスタイプに基づいてインターセプトまたはアクションセットを表示できます。しかし、モバイルデバイスにはさまざまなサイズがあるため、クリエイティブにはデスクトップ版とモバイル版の2つ以上が必要になる場合があります。一部のタブレットの場合、デスクトップで最もよく見えるクリエイティブがタブレットでも問題なく使えるかもしれない。
表示ロジックをDevice Typeで決めるのではなく、異なるサイズのクリエイティブを生成し、インターセプトのロジックをScreen Sizeで決める方が良い。
画面解像度ロジック
インターセプト論理またはアクションセット論理を画面解像度に基づかせることができます。例えば、500px未満のスクリーンにはクリエイティブを、500px以上のスクリーンには別のクリエイティブを使用することもできます。
リンク先のサポートページをクリックすると、ステップバイステップの手順と一般的な画面サイズのリストが表示されます。
プロジェクトセットアップ
埋め込みターゲットの書式設定
埋め込みターゲットは、通常のターゲットのような単なるリンクではなく、クリエイティブ上に埋め込みウィンドウを表示し、そこにターゲットサイトやアンケートを表示します。
クリエイティブに埋め込まれたアンケートは、スクロールバーがない方がいいという人がたくさんいます。埋め込みターゲットの書式設定ページでは、これを実現するためのアンケート調査の変更について説明します。
FAQs
インターセプトを有効化しましたが、サイトに表示されません。なぜですか？
インターセプトを有効化しましたが、サイトに表示されません。なぜですか？
- ロジック：インターセプトのターゲティングロジックとアクションセットロジックは、サイト訪問者にインターセプトを表示するために満たす必要のある条件です。このロジックを確認すると、インターセプトがページに表示されない理由を特定するのに役立ちます。
- 「次を含む」を使用するロジックセット：「次を含む」の使用は、ロジックエラーの一般的な原因です。です。条件が「次を含む」とは、ロジックの基準となるパラメーター(現在のURLなど)に、指定した値が他の情報とともに追加で含まれることを意味します。例えば、「現在のURLに「qualtrics」が含まれる」というロジックがあった場合、URLに「qualtrics」という単語が含まれていれば、どのURLでもインターセプトが表示されることになります。もう1つのオプションは、現在のURLが[URL]であるという条件を使用することです。この条件は、訪問したURLが完全に一致しているかどうかに基づきます。相違点や追加の文字があると、インターセプトのロジックがパスしなくなります。
- インターセプトのリビジョン：インターセプトを編集する際、インターセプトが公開されるまで変更は反映されません。インターセプトを公開すると、そのインターセプトのバージョン、つまり「リビジョン」が保存されます。加えられた変更を確認することは、インターセプトが突然表示されなくなった原因となりうる変更を特定するのに非常に役立ちます。
- デバッグウィンドウ：デバッグウィンドウは、特定のページでインターセプトが表示されない理由をテストするための非常に便利なツールです。
2019年3月より前にデプロイメントコードが実装されたインターセプトの場合、デバッグウィンドウを有効にするには、Q_DEBUGというクエリ文字列を任意のURLに追加します。次のように、先頭に「?」または「&」を付ける必要があります。例：https://www.qualtrics.com?Q_DEBUG、https://www.qualtrics.com/blog?item=value&Q_DEBUG
2019年3月以降にデプロイメントコードが実装されたインターセプトについては、ウェブページのコンソールで次のJavaScriptスニペットを実行してください。
QSI.API.unload();
QSI.isDebug = true;
QSI.API.load();
QSI.API.run();ヒント：コードがタグマネージャーを使用して実装されている場合、ウェブサイトインサイトのデバッガーは機能しません。また、URLに「?」を含むクエリ文字列が既にある場合、デバッガーでは代わりに「&」が必要になります。
- ネットワークリクエスト：ほとんどのブラウザには、サイトのソースコード、リソース、Cookie、ネットワークコールを確認できる開発者ツールメニューがあります。ウェブサイトインサイトは、これらのツールのネットワークセクションで明確な存在感を示しています。これらのスクリプトが実行されているか確認するには、開発者ツールを開き、[ネットワーク]セクションに移動します。この画面でウェブページを再読み込みすると、ウェブサイトが行っているすべてのネットワークリクエストがメニューに表示され始めます。Website Insightsのコードを特定するには、?Q_ZIDまたは?Q_SIDで始まるコールを探します。これは、表示ロジックのチェックを実行しているコード自体です。この形式に一致するものが見つからない場合は、プロジェクトコードの実装に問題があります。コードを配置するのに最適な場所に関するアドバイスについては、実装に関するサポートページをご参照ください。
- コンテンツセキュリティポリシーの問題：コンテンツセキュリティポリシーに違反するコンソールログが表示される場合、ウェブサイト上の制限によってクアルトリクスのインターセプトの展開がブロックされている可能性が高いです。解決するには、貴社のウェブ開発チームにご連絡いただくことをお勧めします。インターセプトが機能するように、通常、コンテンツセキュリティポリシーヘッダーで以下の項目を許可リストに登録することをお勧めします。
- connect-src https://*.qualtrics.com
- frame-src https://*.qualtrics.com
- img-src https://siteintercept.qualtrics.com
- script-src https://*.qualtrics.com
- SPA URLの処理：サイトでシングルページアプリケーション(SPA)フレームワークを使用している場合は、ビュー間を移動する際にコードがhistory.pushState()をトリガーするようにしてください。一部のフレームワークでは、新しい履歴エントリをプッシュせずにURLの再レンダリングや更新を行う場合があり、これによりインターセプトが実行されないことがあります。useEffectまたは同様のlifecycleフックを使用している場合は、インターセプトのロジックがナビゲーションの完了後に実行されるようにしてください。
インターセプトを作成しましたが、有効化する前にテストしたいです。どうすればよいですか？
インターセプトを作成しましたが、有効化する前にテストしたいです。どうすればよいですか？
モバイル端末でクリエイティブを小さく表示させる方法を教えてください。
モバイル端末でクリエイティブを小さく表示させる方法を教えてください。
もし、ポップオーバーや古いクリエイティブを作ることにした場合は、ここでマルチアクションセット を使うことになります。モバイル端末用とデスクトップ用で異なるアクションセットを用意することになります。また、デスクトップ用とモバイル用の2種類のクリエイティブを用意します。
素晴らしい！ フィードバックありがとうございます！
フィードバックありがとうございます！