【Googleタグマネージャ】ショッピングカート内の商品数で判断してタグ配信

DOM要素変数を使って「ショッピングカート内の商品数で判断してタグ配信」を行っていきます。DOM要素変数については、前に書いたこちらの記事を一度ご確認ください。

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

【Googleタグマネージャ】ページ内のテキストで判断してタグ配信（DOM要素、CSSセレクタ） - 勝手にスマホサイトまとめ（ブログ）

 こんなサンプルページを用意しました。

商品を押すと、ショッピングカートページに遷移して、右上のカートに商品数が入る感じです。

今回は、このサンプルページとGTMのDOM要素変数などを使って、「カート内の商品数が1の時、ショッピングカートページ内にテキスト表示」をやってみたいと思います。

まず変数の作成を行います。

変数名は「cart_count」にしました。
種類は「DOM要素」、選択方法は「ID」、要素IDは「count」を入力して保存。

※サンプルページのカートアイコンの商品数のところですが、

<span id="count">0</span>

という感じで、id名を「count」にしているので、変数設定時の選択方法は「ID」、要素IDは「count」を入力しています。

次に、トリガーを作成していきます。

トリガー名は「cart_count「1」の時」にしました。トリガーのタイプは「ウィンドウの読み込み」。

また「カート内の商品数が1の時」にタグ配信したいので、配信するタイミングは先ほどの変数を使って「cart_count、等しい、１」にしてます。
あと、ショッピングカートページでタグ配信したいので、「url、含む、ショッピングカートページのURL」も追加しています。

※トリガーのタイプについて

「ページビュー」はページ読み込み時、「DOM Ready」はDOM読み込み時、「ウィンドウの読み込み」はページ読み込み完了時のタイミングでタグ配信されます。配信の早さは「ページビュー」「DOM Ready」「ウィンドウの読み込み」の順。

 今回は一応ページ読み込み完了した時くらいにしてからタグ配信しようと思いましたので「ウィンドウの読み込み」を選択しました。ここはいろいろ調整してみてください。

最後に、タグを作成していきます。

今回の「カート内の商品数が1の時、ショッピングカートページ内にテキスト表示」のテキストですが、「あと1個買うと「送料無料」になります！」というテキストにしようと思います。
表示場所は、サンプルページのh1タグで囲んだ「ショッピングカート」文字下に赤色で出そうと思います。

タグ名は「cartページにテキスト」にしました。

「カスタムHTMLタグ」を選択し、タグ設定の「HTML」のところには、「h1タグのすぐ後に赤文字で、あと1個買うと「送料無料」になります！を挿入する」といった内容を入力しています。

配信するタイミングは、「その他」の中の先ほど作成したトリガー「cart_count「1」の時」にして、保存、公開。

実際に確認すると、

このように、「カート内の商品数が1の時、ショッピングカートページ内にテキスト表示」できました。
「1」以外のときは表示されません。

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

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