この記事では、Webメッセージで基準の要素に指定するCSSセレクターの取得方法について記載します。
Webメッセージの 基準の要素 とは、「吹き出し」もしくは「埋め込み」テンプレートにてメッセージを配信する場合、必要となる設定項目です。
基準の要素として、要素のCSSセレクターを指定することで、サイト内任意の箇所にメッセージを表示できます。
例:タイトル要素(Repro-demo)を基準の要素として、「吹き出し」テンプレートのメッセージを表示
それでは、実際にWebメッセージを表示するため、サイト内要素のCSSセレクターを取得する方法を説明していきます。
この記事では、Google Chromeブラウザを利用し、CSSセレクターの取得はChrome デベロッパーツールを用いて解説します。
キャンペーンの設定にあたり必要な手順を記載しますが、この記事ではCSSセレクター自体の詳細な説明は行いません。
利用に際してはHTMLとCSSの知識がある人が操作を行ってください。
次の3つの手順で説明します。
1. Chrome デベロッパーツールの起動
要素のCSSセレクターを取得したいページにアクセスしてください。
Ctrl
+ Shift
+ I
キー(Windows)、 Cmd
+ Opt
+ I
キー(Mac)をクリックしてください。
もしくは、ページ上にて 右クリック > [検証] でChrome デベロッパーツールが開きます。
2. 要素の確認
Chrome デベロッパーツールの左上にあるアイコンをクリックしてください。
サイト上のCSSセレクターとして取得したい要素をクリックしてください。この例では「Repro-demo」と表示されているタイトル要素をクリックします。
クリックした要素がElementsタブのDOM上でハイライトされます。
Webサイトは複数の要素が重なり合って構成されるため、クリックした要素が取得したい要素と異なることがあります。その場合、DOM上でハイライトされた要素の周辺をマウスオーバーしてください。
マウスオーバーした要素がページ上で強調されます。ページ上で強調された要素を確認しつつ、取得したい要素をDOM上で探す必要があります。
下記の例では、「Repro-demo」と表示されているタイトル要素よりも広い範囲の要素を選択しています。
※ 画像赤枠が本説明にて取得する要素で、画像青枠がマウスオーバーにより確認した別の要素を示します。
3. CSSセレクターを取得
ハイライトされた箇所にカーソルを合わせてください。
右クリック > [Copy] > [Copy selector] を選択してCSSセレクターをコピーしてください。
4. Webメッセージの基準の要素を設定
コピーしたCSSセレクターをWebメッセージ作成画面の基準の要素の項目に貼り付けてください。
実際にWebメッセージを配信する前にプレビュー機能を利用し、意図通りの箇所に表示されているか確認してください。
Webメッセージで基準の要素に指定するCSSセレクターの取得をすることで、マーケターの方でも簡単に、あたかもサイトの要素かのような施策を配信することができます。
「吹き出し」のテンプレートを利用し、CV達成のためのサイトの導線上にポップアップを表示することでCVポイントへ誘導したり、「埋め込み」のテンプレートを利用し、タイムセールなどのメッセージを表示することで訴求効果が期待できますのでぜひご利用ください。