読者です 読者をやめる 読者になる 読者になる

【Googleタグマネージャ】ページ内のテキストで判断してタグ配信(DOM要素、CSSセレクタ)

Googleタグマネージャ

【Googleタグマネージャ】ページ内のテキストで判断してタグ設定(DOM要素、ID) - 勝手にスマホサイトまとめ(ブログ)

 

前回は、DOM要素の選択方法を「ID」にしましたが、今回は「CSSセレクタ」の紹介となります。
「ID」の時は「id="○○"のテキストが△△の時」という感じで、そのidしか指定できませんでした。「CSSセレクタ」の場合は「id="aaa"の中のclass="bbb"が付いたh2のテキストが△△の時」というように、より細かくピンポイントで指定できるようになります。

例えば、こんなページを用意し、

f:id:sumaho-design:20151005015941j:plain

赤枠部分のコードはこんな感じの時、

<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>

という感じのやつを、GTMのDOM要素の選択方法「CSSセレクタ」を使ってやってみます。

 

まず、新規変数を作成していきます。

f:id:sumaho-design:20151005014052j:plain

変数名はテキトーに「css_selector_1」にしてます。
種類は「DOM変数」、選択方法は「CSSセレクタ」、要素セレクタは「#content h2.title_b」を入力し保存。

選択方法「CSSセレクタ」ですが、「Internet Explorer 7」ではサポートされていません。「Internet Explorer 8」では「CSS 2.1」セレクタのみがサポートされています。

次に新規トリガー作成していきます。

 

f:id:sumaho-design:20151005014228j:plain

トリガー名はテキトーに「css_selector_1_トリガー」にしてます。
イベントは「ページビュー」、タイプは「DOM Ready」、配信するタイミングは先ほど作成した「css_selector_1」変数にして、この値が「タイトルB」というテキストと「等しい」時という感じで入力し保存。

次に新規タグ作成していきます。

 

f:id:sumaho-design:20151005014330j:plain

「カスタムHTMLタグ」にして、「HTML」には

<style>
#content h2.title_b{
color:#ff0000;
}
</style>

を入力し、文字を赤色にします。

配信するタイミングは「その他」を選択し、先ほど作成した「css_selector_1_トリガー」にします。タグを保存し、公開すると、

 

f:id:sumaho-design:20151005014605j:plain

「#content h2.title_b」の「タイトルB」が赤色になりました。

 

 

流れとしては(1)と同じで、変数・トリガー・タグを作成していくかたちです。

 

f:id:sumaho-design:20151005014715j:plain

「属性名」をimgタグの「src」属性にしていますので、今回のページだとこの値は「img.png」と「lp.png」になりそうですが、こういう感じで値が2つ以上になりそうな時は、(コードの上から見ていった時に)最初に一致したものが使われますので、「css_selector_2」変数の値は「img.png」となります。

 

f:id:sumaho-design:20151005014845j:plain

配信するタイミングは先ほど作成した「css_selector_2」変数を選択し、「img.png」を入力して「等しい」にします。

※一応「lp.png」と入力して試してみましたが何も起こらず。やはり最初に一致するものを入力する必要があります。

 

f:id:sumaho-design:20151005014934j:plain

<script>
alert("レッドブル飲みたい");
</script>

と入力してアラートを表示するようにしてます。配信タイミングは先ほど作成した「css_selector_2_トリガー」にします。
公開すると、

 

f:id:sumaho-design:20151005015047j:plain

アラートが表示されました。
そんな感じでいろいろ試してみて下さい。

 

勝手にスマホサイトまとめ|スマホサイトとjQueryMobileのまとめ

勝手にリスティング広告まとめ|テキスト・イメージ広告、ランディングページまとめ