ページ埋め込みクリエイティブ

ページ埋め込みクリエイティブを利用することで、ページ内の任意の位置にクリエイティブを「埋め込む」ようにして表示させることができます。

ページ上に独立したコンテンツを表示するポップアップ型のクリエイティブと異なり、ページのコンテンツの一部として表示されるため、ユーザーに対して自然にコンテンツを提供することが可能です。

作成方法

ページ埋め込みクリエイティブは、サムネイル下に「ページ埋込」表示があるテンプレートから作成します。

ページ埋め込みクリエイティブを編集する際、プレビュー用ページの設定が必要です。設定がまだの場合は設定ダイアログが表示されます。

埋め込みに関する設定

どのように対象ページにクリエイティブを埋め込むかについては、編集画面の「表示」タブにある「ターゲット要素」「埋め込み方法」の２つの設定項目によって指定します。

ポップアップ型のクリエイティブとは異なり、表示位置や閉じるボタン、アニメーションの設定をすることはできません。また、表示されるタイミングは即時となります。

ターゲット要素

「ターゲット要素」はクリエイティブを埋め込む基準となる DOM 要素の位置を CSS セレクタで指定します。

上の画像では「body」と指定されています。これは、<body> 要素を基準位置とする指定です。例えば「ページ内で 2 番目に現れる <h2> 要素を指定する」なら h2:nth-child(2) となります。

ターゲット要素の CSS セレクタは直接入力することも、「プレビューから追加」ボタンを押してプレビュー画面からマウスで選択することもできます。

上の画像では、マウスで選択した要素を指定する CSS セレクタ #js-home-cover が自動入力されています。

複数の要素がマッチする CSS セレクタを設定した場合、最初の要素が対象となります。
不正な CSS セレクタを指定するとエラーとなりますが、「要素が見つからない CSS セレクタ」を指定した場合にはエラーとならないためご注意ください。要素が見つからない CSS セレクタを指定した場合、実際の接客実行時に埋め込みクリエイティブが表示されません。
Javascript によって動的に追加される DOM 要素を指定した場合、「CODE Marketing cloud」の計測タグが実行されるより前に対象の DOM 要素がドキュメントに追加されている必要があります。
CSS セレクタはブラウザによって対応状況が異なります。

埋め込み方法

ターゲット要素で指定した DOM 要素に対し、クリエイティブの埋め込み方法を「置き換え」「指定要素の前に追加」「指定要素の後に追加」「指定要素の最初の子として追加」「指定要素の最後の子として追加」の 5 つから選択することができます。

「置き換え」を利用すると、ユーザーには対象の要素が一度表示された後に置き換わるように見えてしまう場合があります。セキュリティ上の要請からコンテンツを「隠す」目的で埋め込みクリエイティブを利用しないでください。
「指定要素の最初の子として追加」「指定要素の最後の子として追加」を利用する場合、ターゲット要素として <img> や <br> など子要素を持つことができない要素を指定すると適切に表示されません。

設定例と動作イメージ

例 1 子要素として追加

対象 HTML

<div id="embed-target">
  <div> content </div>
</div>

埋め込み設定

ターゲット要素 div#embed-target
埋め込み方法 指定要素の最初の子として追加

埋め込まれた結果

<div id="embed-target">
  <div> content </div>
  <div class="code-mc-container">
    埋め込まれた要素
  </div>
</div>

例 2 指定要素を置き換え

対象 HTML

<div id="embed-target">
  <div> content </div>
</div>

埋め込み設定

ターゲット要素 div#embed-target > div
埋め込み方法 置き換え

埋め込まれた結果

<div id="embed-target">
  <div class="code-mc-container">
    埋め込まれた要素
  </div>
</div>

例 3 指定要素を削除してスクリプトを実行

対象 HTML

<div id="embed-target">
  <div> content </div>
</div>

埋め込み設定

ターゲット要素 div#embed-target > div
埋め込み方法 置き換え

埋め込まれた結果

<div id="embed-target">
  <div class="code-mc-container">
    <style>
      #embed-target > .code-mc-container { display:none }
    </style>
    <script>
      console.log("It is embedded creative!");
    </script>
  </div>
</div>

※ 任意の CSS、スクリプトの指定については「HTML 直接編集」の項目を参照ください。