2022/02/12 （最終更新日：2022/09/16）

【GTM】指定したPV数で発火するトリガーの設定方法【Cookieを利用】

GA・GTM

※本サイトはアフィリエイト広告を利用しています。

【GTMでPV数をカウントする方法が知りたい人】

「PV数をカウントして、指定したPV数に達したタイミングで発火させるトリガーの設定方法が知りたいなぁ。」

こういった疑問に答えます。

この記事を書いている僕は、
元エンジニアで、現在はWebマーケ業界で働いています。

こういった職業柄、普段から
GTMを扱う機会が多いのですが、
今回は、最近要望のあった
指定したPV数で発火するトリガー
の設定方法を解説します。

【GTM】指定したPV数で発火するトリガーの設定方法【Cookieを利用】

用意するものは、以下の5つ。

その①：変数（ファーストパーティCookie）
その②：変数（Cookieの詳細情報）
その③：タグ（変数の使用・PV数カウント）
その④：トリガー（CV計測用）
その⑤：タグ（CV計測用）

その①：変数（ファーストパーティCookie）

まずは、ファーストパーティCookie用の変数を作成します。

GTMの左のメニューから[変数]を選択し、
ユーザー定義変数の [新規] をクリック。

GTMで変数の『新規』をクリック

次に、変数のタイプで
②[ファーストパーティ Cookie] を選び
①[変数名] と ③[Cookie名] を入力します。

GTMでファーストパーティCookieの変数を作成

ちなみに、この
[変数名] と [Cookie名] の2つは
後から作成するタグで使用するので
それを意識して命名するようにしてください。

全て入力できたら、
右上の [保存] をクリックして
第一ステップは完了です。

その②：変数（Cookieの詳細情報）

次に、Cookieの詳細情報の作成です。
先ほどと同様、GTMの左メニューから
[変数]を選択し、ユーザー定義変数の [新規] をクリック。

変数のタイプで
[カスタム JavaScript] を選び、
変数名（※後から作成するタグで使用）
と、JavaScriptのコードを入力します。

Cookie用の[カスタムJavaScript]を作成

入力するJavaScriptコードは、以下のとおり。

function() {
  return function (name, value, days) {
    var myDomain = {{Page Hostname}};
    var expires = "";

    if (days) {
      var date = new Date();
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      expires = "; expires=" + date.toUTCString();
    }

    document.cookie = name + "=" + value + expires + "; path=/; domain=."+ myDomain +"; SameSite=Lax";
  }
}

こちらも全て入力を終えたら、右上の [保存] をクリックします。

その③：タグ（変数の使用・PV数カウント）

①、②のステップで設定した
2つの変数を使って、
PV数をカウントするタグを作成します。

GTMの左メニューから
[タグ] を選択し、[新規] をクリック。

タグの新規作成

タグの種類で ②[カスタムHTML] を選び、
以下のように、①タグの名前 と ③コード を入力します。

カスタムHTMLの作成画面

③に入力するコードが、以下のとおり。

<script>
  (function(){
    var cookieName = 'pageViewNum_plus1';　 //その①で作成した[Cookie名] と同じ値を ' 'の間に入力。
    var pageviewCount = {{Cookie-pageViewCount}};　 //その①で作成した[変数名] と同じ値を {{ }}の間に入力。
    var createCookieVar = {{JS-CreateCookie}};　 //その②で作成した[変数名] と同じ値を {{ }}の間に入力。
 
    pageviewCount = parseInt(pageviewCount);
    if(pageviewCount >= 2) {
      createCookieVar(cookieName, pageviewCount+1);
    } else {
      createCookieVar(cookieName, 2);　 //第3引数で『Cookieの保存日数』を指定可能。（※指定しない場合はセッション単位）
    }
  })();
</script>

上記コードの注意点は、緑文字で記載してあります。

すべて入力を終えたら、
④トリガーに [All Pages] を指定し、右上の [保存] をクリックします。