はじめに
DLPOのクリエイティブにはJavaScriptの記述ができます。
これを利用したjQueryスクリプトのサンプルを紹介します。
■jQueryをクリエイティブとして登録する方法
クリエイティブにJavaScriptを登録するには以下のとおりscriptタグを利用します。
※jQueryライブラリは<head>タグの中で先に読み込んでおきます。
【scriptタグ】
<script>
$(function () {
// ここにHTMLが読み込まれたあとに行う処理を書きます
});
</script>
■セレクタについて
以降のサンプルでは冒頭に $("#dlpo").～～～という記述のものが続きます。
これはid属性の値が「dlpo」であるものに対する処理という意味合いです。
"#dlpo"の部分をセレクタといい、どの箇所に対する処理を行うかを指定する部分となります。
代表的なセレクタには以下のようなものがあります。
$("a") すべてのaタグが対象となります。
$("#dlpo") id属性の値がdlpoのタグが対象となります。
$(".dlpo") class属性の値がdlpoのタグが対象となります。
■ワンコードタグ/エリアタグの設置方法
ワンコード設定にて、JavaScriptをクリエイティブとして配信する場合、ワンコードタグを設置する必要があります。詳細は「ワンコード実装」をご覧ください。
ダイレクトコード設定にて、JavaScriptをクリエイティブとして配信する場合、以下のようにエリアタグの中身は空で設置します。詳細は「ダイレクトコード実装」をご覧ください。
設置場所は<body>から</body>の中であればどこでも構いませんが、<body>の直後を推奨します。
【エリアタグ】
<div class='ADLPODefault'>
</div>
<script type='text/javascript'>adlpoMain('js_sample','lc=os','ch=UTF-8');</script>
サンプル集
以下にjQueryを利用したクリエイティブのサンプルを紹介します。サンプル例のあとにデモサイトを使用した実例を紹介します。デモサイトのデフォルト表示は https://dlpo.jp/demo/js_sample/です。クリエイティブの配信による表示イメージは、各項にプレビューURLをリンクしていますのでそちらから参照してください。
※サンプルはクリエイティブ個別登録のHTMLエディターの使用を想定しております。ワンコード設定によりワンコード実装用エディターを利用する場合は、記述方法が異なりますのでご留意ください。
クリエイティブ個別登録の詳細は「クリエイティブ個別登録」をご覧ください。
■特定のclass属性の値があるタグの中身を書き換える
<script>
$(function () {
$(".dlpo").html('～書き換えたあとのHTML～'');
});
</script>
上記のスクリプトはセレクタでclass属性がdlpoのタグを指定し、そのタグの中のHTMLをhtml()で括られたもので置き換えます。
以下はデモサイトを使用した実例です。デフォルト表示にある3つの申込みボタンを囲っている<div>タグはclass属性にBtnが設定されています。この中身を変えることによってボタンをテキストに書き換えることができます。
【配信しているクリエイティブ】
<script>
$(function() {
$(".Btn").html('<a href="form.html">まずは説明会に参加！ ※説明会は無料です。</a>');
});
</script>
このように同じ内容が表示される箇所に共通のclass属性を指定しておくと、一括して表示を変えることができます。
■特定のclass属性の値があるタグの前後にhtmlを追加する
<script>
$(function () {
$(".dlpo").after('～後に追加するHTML～');
});
</script>
上記のスクリプトはセレクタでclass属性がdlpoのタグの後にafter()で括られたHTMLを追加します。
<script>
$(function () {
$(".dlpo").before('～前に追加するHTML～');
});
</script>
上記のスクリプトはセレクタでclass属性がdlpoのタグの後にbefore()で括られたHTMLを追加します。
以下はデモサイトを使用した実例です。前項でテキストに置き換えた3つの申込みボタンについて、その前後にテキストを追加してみます。
【配信しているクリエイティブ】
<script>
$(function() {
$(".Btn").after('<div>DLPO英会話で誰でも英会話マスター！</div>');
});
</script>
【配信しているクリエイティブ】
<script>
$(function() {
$(".Btn").before('<div>DLPO英会話で誰でも英会話マスター！</div>');
});
</script>
先に記した書き換えのスクリプトを含め、エリアタグの位置に依らず任意の位置へ修正が効くようになるのがクリエイティブでjQueryを利用するメリットです。テスト箇所の変更に伴う大幅なタグの修正が不要となります。
■imgタグの画像ソースを差し替える
<script>
$(function () {
$("img[src='dlpo.jpg']").attr("src","da.jpg");
});
</script>
上記のスクリプトはdlpo.jpgが読み込まれているimgタグの画像をda.jpgに書き換えます。
以下はデモサイトを使用した実例です。3つの申込みボタンを青色のボタンに変更します。imgタグに指定されている画像パスが元のオレンジのボタンは images/button01.png 、青色のボタンの画像パスは images/button02.png です。
【配信しているクリエイティブ】
<script>
$(function() {
$("img[src='images/button01.png']").attr("src","images/button02.png");
});
</script>
また画像ソースだけでなくaltテキストや縦横の幅を指定する必要がある場合は以下のようにすると対応できます。
<script>
$(function() {
$("img[src='images/button01.png']").attr({
src: 'images/button02.png',
alt: 'まずは説明会に参加！ ※説明会は無料です。',
witdh : '574',
height : '113'
});
});
</script>
このようなクリエイティブを使えば、申込みボタンを変更したい場合にボタンのある箇所すべてへエリアタグを置く必要がなくなります。
■ページを開いたときに特定の箇所をクリックした状態にする
<script>
$(function () {
$('#dlpo').trigger("click");
});
</script>
上記のスクリプトはページを開いたときにid属性がdlpoのタグの箇所をクリックした状態にします。
以下はデモサイトを使用した実例です。デモサイトの「DLPO英会話が優れている3つのポイント」と「お近くのDLPO英会話にお越しください！」と表示された箇所はクリックすると、その下の詳細が消えるようになっています。また、再度クリックすると詳細が表示されます。
そこでページを読み込んだときにクリックしたのと同じ状態にすれば、最初から表示がされない状態になります。「DLPO英会話が優れている3つのポイント」にはclass属性にtitle01が設定されていますので、これをクリックしたのと同じ状態を実現します。
【配信しているクリエイティブ】
<script>
$(function() {
$('.title01').trigger("click");
});
</script>
表示切替結果(「DLPO英会話が優れている3つのポイント」がクリックされた状態にする)
スマートフォン用サイトのアコーディオンをあらかじめクリックしたのと同じ状態で表示する、などの用途に利用することができます。