【Googleタグマネージャ】ページ内のテキストで判断してタグ配信（DOM要素、ID）

今回はページ内のテキストで判断してタグを出し分けする設定を、DOM要素変数を使って行っていきます。やろうと思えばいろいろできそうですが、ひとまず、ページ内のテキストで判断して、カスタムHTMLタグでCSS上書きしてみようと思います。

※DOM要素の選択方法で「ID」「CSSセレクタ」の2種類ありますが、今回は「ID」の紹介となります。

【「id="○○"」で囲まれた中に「△△」というテキストが含まれている時、CSS上書きする】

このページ（http://ppc-matome.com/lp/）の赤枠のところの要素が「<section id="lp_top">～</section>」なのですが、この「id="lp_top"」で囲まれた中に「ランディングページ」というテキストが含まれているとき、「id="lp_top"」内の文字色を「#fd0000(赤)」にしてみます。

まず、変数の新規作成をします。

変数名はテキトーに「lp_top」にしました。
種類は「DOM要素」を選択し、変数を設定の選択方法は「ID」、要素IDには「id="lp_top"」のid名の「lp_top」を入力して保存します。

※「属性名」のところですが、ここに属性が設定されている場合（imgタグなら「alt」属性など）、この変数の値は DOM 要素の属性の値となります。それ以外の場合、この変数の値は DOM 要素のテキストとなります。

 「属性名」のところに何も入力していないので、「lp_top」変数の値は「id="lp_top"で囲まれたテキスト」となります。具体的にはid="lp_top"で囲まれた中で、さらにidやclassが付いてないところのテキストとなります。

今保存したやつがユーザー定義変数一覧の中に追加されてます。
次に、トリガーの新規作成を行います。

トリガー名はテキトーに「lp_top_トリガー」にしました。
イベントは「ページビュー」を選択し、トリガーのタイプは「DOM Ready」を選択します。

配信するタイミングは「一部のページビュー」を選択し、矢印マークのところ押して、先ほど作成した「lp_top」変数を選択。（この変数の値は「id="lp_top"で囲まれたテキスト」）

今回は「ランディングページというテキストが（変数の値に）含まれている時」としたいので、矢印マークのところ押して「含む」を選択し、「ランディングページ」と入力して、トリガーを保存。

最後に、タグの新規作成を行います。

タグ名はテキトーに「lp_top_タグ」にしました。
プロダクトは「カスタムHTMLタグ」を選択します。今回は「「id="lp_top"」内の文字色を「#fd0000(赤)」」にしたいので、HTMLのところを

<style>
#lp_top{
color:#fd0000;
}
</style>

という感じで入力してます。
配信するタイミングは、「その他」にして、先ほど作成した「lp_top_トリガー」を選択。タグを保存して、公開すると、

こんな感じで、「id="lp_top"」で囲まれた中に「ランディングページ」というテキストが含まれているとき、「id="lp_top"」内の文字色が「#fd0000(赤)」になりました。

以上で終わりですが、例えば、

ログイン中は全ページ上部とかに何かログイン用テキストが常に表示されるのであれば、それをトリガーとして、ログイン計測用のトラッキングIDで計測したりもできると思います。また、この逆のトリガーがログアウトになるので、ログイン/ログアウト中の計測を分けてできるようになれば、いろいろ分析とか面白くなるかもですね。

※GTMに「ファーストパーティ Cookie  」という変数もあるので、ログイン/ログアウト別計測を考える場合は「ファーストパーティ Cookie  」でも調べてみて下さい。

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

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