【Googleタグマネージャ】ページ内のテキストで判断してタグ配信（DOM要素、CSSセレクタ）
【Googleタグマネージャ】ページ内のテキストで判断してタグ設定（DOM要素、ID） - 勝手にスマホサイトまとめ（ブログ）
前回は、DOM要素の選択方法を「ID」にしましたが、今回は「CSSセレクタ」の紹介となります。
「ID」の時は「id="○○"のテキストが△△の時」という感じで、そのidしか指定できませんでした。「CSSセレクタ」の場合は「id="aaa"の中のclass="bbb"が付いたh2のテキストが△△の時」というように、より細かくピンポイントで指定できるようになります。
例えば、こんなページを用意し、
赤枠部分のコードはこんな感じの時、
<div id="content">
<h2 class="title_a">タイトルA</h2>
<p class="txt_1">テスト1</p>
<p class="txt_2">テスト2</p>
<h2 class="title_b">タイトルB</h2>
<img src="img.png" alt="イメージ広告">
<img src="lp.png" alt="ランディングページ">
<p class="txt_3">テスト3</p>
</div>
- 「#content h2.title_b」が「タイトルB」というテキストの時、「#content h2.title_b」の「タイトルB」を赤色にする。
- 「#content img」の「src」属性の値が「img.png」の時、アラートを表示する。
という感じのやつを、GTMのDOM要素の選択方法「CSSセレクタ」を使ってやってみます。
（1）「#content h2.title_b」が「タイトルB」というテキストの時、「#content h2.title_b」の「タイトルB」を赤色にする。
まず、新規変数を作成していきます。
変数名はテキトーに「css_selector_1」にしてます。
種類は「DOM変数」、選択方法は「CSSセレクタ」、要素セレクタは「#content h2.title_b」を入力し保存。
選択方法「CSSセレクタ」ですが、「Internet Explorer 7」ではサポートされていません。「Internet Explorer 8」では「CSS 2.1」セレクタのみがサポートされています。
次に新規トリガー作成していきます。
トリガー名はテキトーに「css_selector_1_トリガー」にしてます。
イベントは「ページビュー」、タイプは「DOM Ready」、配信するタイミングは先ほど作成した「css_selector_1」変数にして、この値が「タイトルB」というテキストと「等しい」時という感じで入力し保存。
次に新規タグ作成していきます。
「カスタムHTMLタグ」にして、「HTML」には
<style>
#content h2.title_b{
color:#ff0000;
}
</style>
を入力し、文字を赤色にします。
配信するタイミングは「その他」を選択し、先ほど作成した「css_selector_1_トリガー」にします。タグを保存し、公開すると、
「#content h2.title_b」の「タイトルB」が赤色になりました。
（2）「#content img」の「src」属性の値が「img.png」の時、アラートを表示する。
流れとしては(1)と同じで、変数・トリガー・タグを作成していくかたちです。
「属性名」をimgタグの「src」属性にしていますので、今回のページだとこの値は「img.png」と「lp.png」になりそうですが、こういう感じで値が2つ以上になりそうな時は、（コードの上から見ていった時に）最初に一致したものが使われますので、「css_selector_2」変数の値は「img.png」となります。
配信するタイミングは先ほど作成した「css_selector_2」変数を選択し、「img.png」を入力して「等しい」にします。
※一応「lp.png」と入力して試してみましたが何も起こらず。やはり最初に一致するものを入力する必要があります。
<script>
alert("レッドブル飲みたい");
</script>
と入力してアラートを表示するようにしてます。配信タイミングは先ほど作成した「css_selector_2_トリガー」にします。
公開すると、
アラートが表示されました。
そんな感じでいろいろ試してみて下さい。
