コンテンツを消すテストがしたい – DLPOヘルプセンター

質問

コンテンツを消すテストがしたい

回答

クリエイティブの設定にてコンテンツを消すことは可能です。
以下にクリエイティブの設定方法をご紹介いたします。
作成したクリエイティブを使用したABテスト(キャンペーン)の設定方法は「ABテストの設定チュートリアル」をご覧ください。

設定方法

下図のLPにおいて、「デフォルト表示のAパターン」「緑色の部分を消したBパターン」でABテストを行う際の設定として、3つの設定方法をご紹介します。

図１：ABテスト施策パターン

1．標準エディターを使用して、対象要素の中身を書き換える

デフォルト表示をクリエイティブとして登録する際は、標準エディターまたはHTMLエディターにて「空クリエイティブ」を作成してください。
DLPOタグのエリアは<body>直下に出力されるので、空クリエイティブを作成することで、Aパターンとしてデフォルト表示の配信が可能です。

標準エディターの場合は、ボタンにて要素を削除し、登録してください。

図２－１：Aパターンのクリエイティブ登録（標準エディター）

HTMLエディターを使用する場合は、コメントアウトなど表示に影響のないタグを入力し、登録してください。
HTMLエディターにて、何も記載せずにデフォルト表示のまま登録することで、「空クリエイティブ」として作成されます。

図２－２：Aパターンのクリエイティブ登録（HTMLエディター）

Bパターンは、標準エディターを使用して、対象要素を指定し、空のソースコードで中身を書き換えるクリエイティブを登録します。
このクリエイティブを配信することで、対象要素のソースを空にし、表示を消すことができます。

図２－３：Bパターンのクリエイティブ登録（対象要素の中身を書き換える）

2．styleタグによるコンテンツ非表示

styleタグを使用してCSSを変更することで、テストを行うことも可能です。

Aパターンは先述の通り、空クリエイティブを登録してください。
詳細は「1．標準エディターを使用して、対象要素の中身を書き換える」を参照してください。

Bパターンはstyleタグを用いて、対象要素をCSSで非表示にするクリエイティブを登録してください。
ページ内に同じclassを使用した要素がある場合は、もれなくその要素の表示も消えてしまいますので、その際は要素名＋class名の指定やJavaScriptにて対象要素を特定してください。

図３：Bパターンのクリエイティブ登録（styleタグによるコンテンツ非表示）

例）class名「point」を非表示

<style type="text/css">
.point{
   display: none;
}
</style>

3．スクリプトによるコンテンツ非表示

JavaScriptまたはjQueryを使用して、対象要素を消すことも可能です。

Bパターンは、標準エディターの「JavaScriptを配信する」もしくはHTMLエディターを使用して、対象要素の表示を消すスクリプトを登録してください。
ページ内に同じclassを使用した要素がある場合は、もれなくその要素の表示も消えてしまいますので、その際は要素名＋class名の指定やJavaScriptにて対象要素を特定してください。

図４：Bパターンのクリエイティブ登録（スクリプトによるコンテンツ非表示）

例）JavaScriptにて、class名「point」を非表示

document.querySelector(".point").style.display = "none";

例）jQueryにて、class名「point」を非表示

$(".point").hide();

上記いずれかの方法にてクリエイティブを作成したら、キャンペーンで設定します。
ABテストのキャンペーンの設定方法については「ABテストの設定チュートリアル」をご参考ください。