ウェブ埋め込みを管理する

Optimizelyマニュアル｜訪問者のエンゲージメントとデータ収集のために、Optimizely Data PlatformでWeb埋め込みを管理する方法を説明します。

注記

2023 年 4 月より前にキャンペーンにアクセスしていた場合、Optimizely はタブ名を [キャンペーン]から[アクティベーション]に更新しました。 すべての機能は同じままです。

Web 埋め込みを使用して、訪問者や顧客に関する貴重な情報を収集します。 サイトのコンテンツに Web 埋め込みを含めるには、次の手順に従います。

• 対象ページにOptimizely Data Platform (ODP) JavaScript タグをインストールします。

• ターゲット ページのサブドメインを、 JavaScript タグの詳細オプションで設定されたCookie ドメインと照合します。

Web 埋め込みを作成する

1. [アクティベーション] > [エンゲージ] > [新しいキャンペーンの作成]に移動します。

2. [ウェブ]を選択します。

3. Web キャンペーンのレシピを選択するか、 「最初から作成」をクリックします。

4. キャンペーン名を入力します。

5. [登録]セクションはデフォルトで[すべての訪問者]に設定されています。 このキャンペーンのオーディエンスとしてリアルタイム セグメントを使用する場合は、リストから 1 つ選択します。

6. タッチポイントを編集し、 [Web Embed]を選択して、コンテンツの設計と構成を開始します。

Web 埋め込みターゲットを構成する

[ターゲット]セクションで、サイト上のコンテンツを表示する場所を選択します。

• ページ URL –展開して、ターゲットの場所のページ URL 、 UTMパラメータ、またはカスタム クエリ パラメータを選択します。

• 含む– 展開して、含む、等しい、含まない、または等しくないを選択して、指定された場所をどのようにターゲットにするかを決定します。

• URL スニペットまたはパス– ターゲットとする URL スニペットまたはパスを入力します。

• または– OR演算子を使用して、より多くのページまたはパラメータをターゲットにすることができます。

• And – AND演算子を使用して、より多くのページまたはパラメータをターゲットにすることができます。

• セレクター名– セレクターは、Web 埋め込みがターゲット ページ上のどこに表示されるかを決定します。 コンテンツに必要なセレクターを見つける方法については、以下の「セレクターの検索」セクションを参照してください。

• セレクターの位置– Web 埋め込みを、指定されたセレクターの後、内側、または前に配置します。

• 削除– 定義したターゲットを削除する場合は、ターゲット行の上にカーソルを置き、「削除」アイコンをクリックします。

セレクターを見つける

サイト コンテンツの特定のセクションの後、内部、または前に Web 埋め込みを表示するには、そのセクションに関連付けられたセレクターを特定します。

1. Web サイト上の目的のページに移動します。

2. Web 埋め込みを後、内側、または前に配置するセクションを見つけます。

3. セクション内で右クリックし、 「検査」を選択します。

4. [要素]タブで、コード内の強調表示されたセクションを見つけます。
5. 識別されたクラスまたは ID 名をコピーして、ODP のセレクター名フィールドに貼り付けます。

   • 名前の前にピリオド (.) を付けてクラスを入力します (例: .section-one)。

   • 名前の前にポンド記号 (#) を付けて ID を入力します (#section-one など)。

Web 埋め込み制約を構成する

「制約」セクションで、このコンテンツを表示する頻度を選択します。

• 訪問者ごとに [期間] ごとに最大 [回数] 回表示– 顧客が 1 つの期間内に大量のコンテンツを頻繁に表示しないように制限します (たとえば、週に 1 回)。

• 訪問者ごとに合計 [回数] 回まで表示– 指定された合計回数 (たとえば、合計 3 回) を超えて顧客がコンテンツを閲覧できないように制限します。

訪問者がいつでも Web 埋め込みを利用できるようにするには、[埋め込みコンテンツを常に表示する] チェックボックスをオンにします。

Web 埋め込みをデザインする

新しいデザインを開始する前に、[テンプレートの読み込み] ドロップダウン リストをクリックして、チームがテンプレートツールを使用して作成した事前に作成された Web 埋め込みから選択します。 さらにカスタマイズしたり、名前を変更したりできます。 既製のデザインがない場合は、新しいコンテンツの名前を入力します。

Web 埋め込み要素

レイアウト

レイアウトからビルダーにドラッグ アンド ドロップして、Web 埋め込みの全体的な構造を作成します。 これらの要素の書式設定とデザインは、 [詳細]タブで編集できます。

• セクション– コンテンツを保持するスペース。 新しいセクションを配置して、ヘッダーやテキストなどの新しいタイプのコンテンツを配置します。 すべての列とグリッドには個別のセクションが含まれます。

• レスポンシブ列– モバイルデバイス上で応答またはラップする列。 詳細内で、列が左から右などに応答する方法を選択できます。

• グループ化された列– モバイル上で折り返されない列のセット。 折り返す代わりに縮小したいテキストベースの列には、グループ化された列を使用します。

• グリッド– 特定の数の列と行。

• ナビゲーション– 顧客を追加コンテンツに誘導するために使用できる編集可能なリンク。

基本的な内容

次の要素は、Web 埋め込みにコンテンツを追加します。 これらの要素をドラッグ アンド ドロップして、Web 埋め込み内の目的の場所に配置します。 埋め込みデザイン内の要素をクリックして[詳細]タブを使用し、形式、間隔、リンク、その他の設定を変更します。

• ヘッダー– H1 ヘッダー領域。 タイトルのみなど、控えめに使用してください。

• テキスト– リッチ テキスト領域。

• 画像– 画像領域。

• ボタン– ボタン。 ハイパーリンクを追加して行動喚起を作成し、顧客を別のアクションや追加コンテンツに誘導します。

• ディバイダー– コンテンツのセクション間の分割線。

• スペーサー– コンテンツのセクション間のスペース。

• ソーシャル– ソーシャル メディアのアイコン。

• Raw HTML – コンテンツを詳細に制御するための HTML 領域。 ただし、プレビューと顧客に表示される Web コンテンツには違いが見られる場合があります。 これは、HTML マークアップ言語に精通している場合にのみお勧めします。

フォーム

Web 埋め込みフォームを作成して、コンテンツに関する情報を収集します。 要素をドラッグ アンド ドロップして Web 埋め込み内の目的の場所に配置し、埋め込み内の要素をクリックして [詳細]タブを使用して形式、間隔、リンク、その他の設定を変更します。 これらのオプションを使用して、特定のフィールドを必須にし、フィールドがフォーム送信に含まれるときに更新されるプロファイル属性を選択します。

• テキスト ボックス– 電子メール アドレスや名前などの顧客情報を入力するための 1 行のテキスト フィールド。

• チェックボックス– メーリング リストに参加するか、個々のプロファイル属性を更新するためのチェックボックス フィールド。 顧客は複数の値を選択できます。

• 送信ボタン– 顧客がフォームを送信できるようにします。 フォームに追加できる送信ボタンは 1 つだけです。

• ラジオ ボタン– オプションのグループを表示し、関連するプロファイル属性を更新するためのラジオ ボタン フィールド。 顧客は 1 つの値のみを選択できます。

• ドロップダウン– オプションのグループを表示し、関連するプロファイル属性を更新するためのドロップダウン リスト。 顧客は値を 1 つだけ選択できます。

Web コンテンツにフォーム要素が含まれている場合、ODP は電子メール、オプトイン、および送信ボタンのフィールドを自動的に検証します。 これらのフィールドを追加していない場合、 Web サイトにはフォームが表示されません。

ウェブ埋め込みの詳細

設定を変更してコンテンツ全体に影響を与えることもできます。 詳細にアクセスするには、パンくずリストの[コンテナ]オプションをクリックするか、Web コンテンツの背景をクリックします。

コンテナのプロパティ

• 背景色– Web 埋め込みの色。

• コンテンツの幅– Web 埋め込みの幅（ピクセル単位）。

• コンテンツの高さ– Web 埋め込みの高さ。 このプロパティはデフォルトでautoに設定されています。 トグルをオンにして、特定の高さをピクセル単位で設定します。

テキストのプロパティ

• フォント ファミリー– Web 埋め込みで使用されるフォント。

• フォントのウェイト– Web 埋め込みで使用されるフォントのウェイト。

• フォントの色– Web 埋め込みのフォントの色。

• フォント サイズ– Web 埋め込みで使用されるフォントのサイズ。

リンクのプロパティ

• リンクの色– Web 埋め込みに含まれるリンクの色。

• リンクの下線– リンクを下線でスタイル設定するオプション。

コンテンツ設定

• 重複した製品を削除– 有効にすると、重複した製品が製品グリッドに表示されなくなります。

パディング

Web 埋め込み内のコンテンツに適用するパディングの量を決定します。 パディングを増やしてコンテンツを中心に向かって移動します。 パディングを減らしてコンテンツを端に向かって移動します。

[その他のオプション]を有効にして、特定の方向からパディングを適用します。

国境

• 境界線– [その他のオプション] を有効にして、ポップアップまたはフォームの各辺の境界線のサイズとスタイルを個別に決定します。

• すべての面– このオプションを使用して、コンテンツに境界線を追加します。 増やすと線が太くなります。 小さくすると線が細くなります。

境界半径

このオプションを使用して、Web 埋め込みの境界線を丸くします。 正方形のような鋭いエッジを持たせるには0を使用します。 数値を大きくすると境界線が丸くなります。

[その他のオプション]を有効にして、 Web 埋め込みの各辺の境界線の半径を個別に決定します。

メインデザインと確認デザインを設定する

コンテンツに、送信ボタンの成功アクションによって別のページにリダイレクトされないフォームが含まれている場合は、メイン デザインと確認デザインを切り替えることができます。 メインのデザインを切り替えて、コンテンツが最初に表示されたときに顧客に何が表示されるかを確認します。 確認デザインを切り替えて、顧客がフォームを正常に送信した後に表示される内容を確認します。

Web 埋め込みをプレビューする

デスクトップビューとモバイルビューに加えて、Web サイト ページの 1 つで Web 埋め込みをプレビューできます。 プレビューにはすべてのトリガーが表示されますが、すべての制約は無視されます。

1. プレビューをクリックします。
2. プレビューに使用するページの URL を入力します。 ODP は、選択したページを「ターゲット」セクションで設定したルールと照合してチェックするため、それが有効なページであることを確認します。

3. [プレビューの生成]を選択します。

Web 埋め込みをアクティブ化する

Web サイト訪問者が Web 埋め込みを利用できるようにするには:

1. 「保存」をクリックします。

2. パンくずリストからキャンペーンの名前を選択します。

3. [ライブ配信]をクリックします。