グーグルタグマネージャーとクッキーの魔法

公開: 2021-08-16

更新日：2020年10月30日。CookieはWebの非常に重要な部分です。 それらがない世界を想像してみてください。FacebookやTwitterを使用することはできません。 これらは、ユーザーがWebページにアクセスしている間、データを保持するのに役立ちます。したがって、当然、これらはWeb分析の重要なコンポーネントでもあります。

デフォルトでは、Google Analyticsおよびその他の分析ツールは、Webサイトでのユーザーの行動を追跡するためにCookieを使用します。 残念ながら、（GTMを使用している）多くのマーケターが、リピーターのためにタグを起動できないことや、4ページビューした後などに苦しんでいるのを今でも見ています。

ただし、Google Tag Managerを使用して、かなり簡単な方法でCookieからデータを設定および取得できるため、これは問題にはなりません。 このブログ投稿では、Google Tag ManagerでCookieを簡単に利用し、Webトラッキングを次のレベルに引き上げる方法を紹介します。

GTMを学び始めたばかりの時のことを覚えています。 開発者の助けがなくてもCookieを設定して読み取ることができることに気付いたとき、それは私にとって大きな飛躍でした。 それは私のタグ管理にはるかに多くの柔軟性と自由を追加しました。

訪問者が最初にアドワーズ広告から私のウェブサイトにアクセスし、すでに5ページを表示した場合、特定のポップアップを起動する必要がある場合はどうなりますか？ 問題ない！

続行する前に：このトピックは、中級GTMコースでも詳しく説明されています。

ブログ投稿よりもビデオコンテンツを好む場合は、間違いなく私の中級Googleタグマネージャーコースへの登録を検討する必要があります。 その中で、私は中間ユーザーがしばしば見逃している多くのGTM機能/ヒント/トリックを明らかにします。 また、GTMで次のレベルに進むのに役立ついくつかの技術トピックを適切に紹介します。

中級Googleタグマネージャーコースに登録する

なぜあなたはクッキーを気にする必要があるのですか？ いくつかの例

Google Tag ManagerでCookieを設定して読み取ることにより、次のような非常に洗練されたトリガーの作成を開始できます。

  • 訪問者は5ページを閲覧しました。 特別オファー付きのポップアップを彼に見せましょう！
  • 訪問者は実際にはSaaS（サービスとしてのソフトウェア）のユーザーですが、現在ログインせずに閲覧しています。それでも、訪問者はトリガーの条件として使用できる値「registeredUser = true」のCookieを持っています。
  • 訪問者がアフィリエイトリンクを介してあなたのウェブサイトにアクセスしました。 各ページビューで、訪問者のCookieにアフィリエイトIDを保存できます。 これを行う方法の完全なガイドは次のとおりです。
  • 価格計算機付きの価格ページはありますか？ その特定の訪問者に計算機の結果（価格）を添付しましょう。 このようにして、さまざまな価格帯の訪問者がサイトでどのように行動しているかを確認できます。

かなりきちんとしていますね

それで、計画は何ですか？

  1. まず、誰かがクッキーを設定する必要があります。 それはあなた（Google Tag Managerの助けを借りて）か開発者のどちらかかもしれません。
  2. 次に、GTMでファーストパーティのCookie変数を作成する必要があります。 特定の名前のCookieを探し、その値をデータレイヤーで利用できるようにします。 また、Googleタグマネージャーのプレビューおよびデバッグモードで表示することもできます。
  3. 条件に前述のファーストパーティのCookie変数が含まれるトリガーを作成します。
  4. 箇条書き3からのトリガーに基づいてタグを発射します。
  5. 利益。

GoogleタグマネージャーでCookieを設定する

Cookieを設定するには、カスタムHTMLタグを作成する必要があります。 これには、Cookieの名前、有効期限などを定義するJavascriptコードが含まれています。

 <スクリプト>
 
 var cookieName = "visitorFromAdwords"; //クッキーの名前
 var cookieValue = "true"; //クッキーの価値
 var expireTime = 2592000; // 1か月（秒）
 有効期限=有効期限* 1000; //有効期限をミリ秒に変換します
 var date = new Date（）; 
 var dateTimeNow = date.getTime（）; 

 date.setTime（dateTimeNow + expireTime）; //有効期限を設定します（現在の時間+ 1か月）
 var date = date.toUTCString（）; //ミリ秒をUTC時間文字列に変換します
 document.cookie = cookieName + "=" + cookieValue + "; SameSite = None; Secure; expires =" + date + "; path = /; domain =。" + location.hostname.replace（/ ^ www \ ./ i、 ""）; //すべてのサブドメインにCookieを設定します

</ script>

上記のスクリプトでは、編集する必要のある3つの変数があります。

  • COOKIENAME -あなたはそれを意味のあるタイトル、例えばvisitorFromAdwords、affiliateID、pageviewCountなどを与える必要があります
  • cookievalueは- visitorFromAdwordsの場合、可能な値は、trueまたはfalseです。 affiliateID cookieの値は2385437であり、 pageviewCount cookieの値は–5です。
  • expireTimeは、Cookieの有効期限が切れる時期を定義します。 2592000は、30日を秒に変換したものです（30日* 24時間* 60分* 60秒* 1000ミリ秒）。 セッションが終了した後（ブラウザウィンドウが閉じたとき）にCookieを期限切れにする場合は、 expires =” + date +”;を削除します。 スクリプトの最後から。 ブラウザウィンドウを閉じても、Google Chromeはバックグラウンドで実行されるため、Cookieの「存続期間」が長くなることに注意してください。

次に、そのCookieをいつ設定するかを決定する必要があります。 この「Cookieの設定」スクリプトは、URLに？gclid = （訪問者がAdWordsキャンペーンを介してアクセスしたことを意味します）が含まれている場合に起動する必要がありますか？

たとえば、Googleアドワーズ広告でウェブサイトを見つけた訪問者にCookieを設定したいとします。 その場合、以下の設定でトリガーを作成する必要があります。

トリガー-アドワーズ広告からの訪問者

ユーザーがGoogle広告をクリックすると、リンク先URLに？gclid = XXXXXXが含まれます。 これが、このトリガーの状態の背後にある理由です。

クッキーをテストする

Cookie設定スクリプトとそのトリガーを使用してカスタムHTMLタグを作成したら、次に行うべきことは、プレビューモードとデバッグモードで実装をテストすることです。 URLに？gclid =が含まれている場合にのみ、タグが起動することを確認してください。 プレビューモードとデバッグモードを初めて使用する場合は、この包括的なガイドをお読みください。

それでは、Cookieが正しく設定されているかどうかを確認しましょう。 Cookieを確認するには、主に2つの方法があります。ブラウザの組み込み機能（開発者ツール）またはプラグインです。

個人的には、EditThisCookie（Operaユーザーも利用可能）と呼ばれるChromeプラグインを使用しています。 この非常にシンプルで直感的な拡張機能により、現在使用されているCookieと、Cookieに含まれているデータをすばやく確認できます。

まだインストールしていない場合は、ここからダウンロードしてください。 別のブラウザを使用している場合は、自分で何かを見つける必要があります。

とにかく、EditThisCookieに戻りましょう。 この拡張機能をインストールすると、メニューアイコン（Chromeの場合）の横にCookieアイコンが表示されます。

EditThisCookieアイコン

現在作業中のWebサイトに移動し、[EditThisCookie]アイコンをクリックすると、そのWebサイトで現在使用されているすべてのCookieの拡張リストが表示されます。 visitorFromAdwordsという名前のCookieを探します。 この小さなデータは、このブログ投稿の以降の章で魔法をかけるのに役立ちます。

展開されたこのCookieを編集します

クッキーを読む

次に、Google Tag ManagerにCookieの読み取りを「教え」、変数として使用できるようにする必要があります。 GTMアカウントに移動し、変数のリストを開いて、次の設定で新しいユーザー定義変数を作成します。

cookie変数-visitorFromAdwords

この変数は、 visitorFromAdwordsというタイトルのCookieを検索します。 1つを検出すると、GTMはその値を読み取り、プレビューおよびデバッグコンソールの[変数]タブで使用できるようにします。

プレビューおよびデバッグモードのCookie変数

これにより、次の例のように、任意のGTMタグまたはトリガーでvisitorFromAdwords変数を使用できます。

クッキーでトリガー

例–3ページ目のビューでタグを起動する

これは、Google TagManagerでのCookieの最も一般的な使用例の1つです。 便宜上、ページビューの数をカウントし、3の後にトリガーを起動する既製のスクリプトを使用して、GTMレシピを用意しました。ただし、詳細を理解したい場合は、読み続けてください。

このGTMレシピをダウンロードする

ページビューを数えましょう

まず、ページビューをカウントするカスタムHTMLタグを作成する必要があります。 ページが更新されるたびに、このスクリプトはcookie pageviewCountを検索し、その値を1ずつ増やします。

 <script> function setCookie（name、value、expires）{
 var cookie = name + "=" + value + "; path = /; domain =。" + location.hostname.replace（/ ^ www \ ./ i、 ""）;

 if（typeofが期限切れになります！== "undefined"）{
 var now = new Date（）;
 now.setTime（now.getTime（）+期限切れ* 24 * 60 * 60 * 1000）;
 cookie + = "; expires =" + now.toUTCString（）;
 }

 document.cookie = cookie;
}

関数getCookie（name）{
 varcookies = document.cookie.split（ ";"）、
 toReturn;

 for（var i = 0; i <cookies.length; i ++）{
 var cookie = cookies [i] .trim（）;
 if（cookie.indexOf（name + "="）=== 0）{
 toReturn = cookie.substring（（name + "="）。length、cookie.length）;
 }
 }

 Return toReturn;
}

（関数（） {
 var pageviewCount = getCookie（ "pageviewCount"）;

 if（typeof pageviewCount === "undefined"）{
 pageviewCount = 1;
 } そうしないと {
 pageviewCount ++;
 }

 setCookie（ "pageviewCount"、pageviewCount、30）;

}）（）;
</ script>

Cookie（このJavascriptで設定）は30日後に期限切れになります。 setCookie（“ pageviewCount”、pageviewCount、30）を編集することで、その期間を簡単に変更できます。

このカスタムHTMLをすべてのページで起動するように設定します。 プレビューモードとデバッグモードを更新し、EditThisCookieプラグインを開いて、Cookieが正常に保存されたかどうかを確認します。 次に、ページを更新します。 Cookieの値は2に増加するはずです。

pageviewCount cookie

このCookieをその場合にのみ有効にする場合 ビジターセッション、これが変更されたスクリプトです（有効期限に関連するすべての部分を削除しました）。 Chromeは（他のブラウザと比較して）Cookieの処理が少し異なることに注意してください。 タブまたはウィンドウを閉じても、Chromeはバックグラウンドで実行され続ける可能性があるため、セッションCookieは引き続き有効である可能性があります。

 <script> function setCookie（name、value）{
 var cookie = name + "=" + value + "; path = /; domain =。" + location.hostname.replace（/ ^ www \ ./ i、 ""）;

 document.cookie = cookie;
}

関数getCookie（name）{
 varcookies = document.cookie.split（ ";"）、
 toReturn;

 for（var i = 0; i <cookies.length; i ++）{
 var cookie = cookies [i] .trim（）;
 if（cookie.indexOf（name + "="）=== 0）{
 toReturn = cookie.substring（（name + "="）。length、cookie.length）;
 }
 }

 Return toReturn;
}

（関数（） {
 var pageviewCount = getCookie（ "pageviewCount"）;

 if（typeof pageviewCount === "undefined"）{
 pageviewCount = 1;
 } そうしないと {
 pageviewCount ++;
 }

 setCookie（ "pageviewCount"、pageviewCount）;

}）（）;
</ script>

GoogleタグマネージャーのCookie変数とトリガー

pageviewCount Cookieを作成したので、今度はGoogle Tag ManagerにCookieの読み取りを「教え」、変数として使用できるようにします。 GTMアカウントに移動し、変数のリストを開きます。 次の設定で新しいユーザー定義変数を作成します。

GoogleタグマネージャーのpageviewCountcookie変数

次に、[トリガー]に移動し、次の設定で新しいページビュートリガーを作成します。

クッキーでトリガー

このトリガーは、Cookieの値が3以上の場合に起動します。

それでおしまい！ ポップアップタグやGoogleAnalyticsイベントタグなど、任意のタグにこのトリガーを割り当てることができるようになりました。 それはあなたの想像力次第です。

スポンジボブイマジネーショングーグルタグマネージャー

クッキーを削除する

特定のファーストパーティCookieを削除する場合は、有効期限を過去の日付（1970年1月1日など）に設定する必要があります。 このようなCookieは存在できないため、すぐに期限切れになります。

使用する必要のあるスクリプトは次のとおりです。

 <スクリプト>
（関数（） {
    var name = 'yourCookieName'; // yourCookieNameを削除したいCookieの名前に置き換えます
    var path = ''; //必要に応じて、これを置き換えます
    var domain = ''; //必要に応じて、これを置き換えます
    document.cookie = name + "=" +
		（（パス）？ ";パス=" +パス： ""）+
		（（ドメイン）？ "; domain =" +ドメイン： ""）+
		"; expires = Thu、01 Jan 1970 00:00:01 GMT";
    }）（）;
</ script>

コードの3行目で、 yourCookieNameを削除するCookieの名前に変更します。 このコードは、GTMカスタムHTMLタグを介して実装し、Cookieを削除する必要があるときはいつでも起動する必要があります（たとえば、変換後、オプトアウト後など）。

また、Cookieに指定されたドメインとパスがある場合は、（JavaScriptコードの）「path」変数と「domain」変数に値を挿入します。 ただし、これらのフィールド（4行目と5行目）を空のままにして、機能するかどうかを確認することから始めることができます。

いくつかのアイデア

マーケティングスタックでCookieを活用する方法がまだわからない場合は、ここで検討してください。 これらの例があなたが氷を壊すのに役立つことを願っています：

  • アフィリエイトプログラムを実行している場合、訪問者がアフィリエイトリンク（一意のアフィリエイトIDを含む）を介してサイトにアクセスすることをすでに知っています。 そのデータをURLから取得し、Cookieとして設定して、カスタムディメンションとしてGoogleアナリティクスに送信できます。 このようにあなたはあなたがどれだけよく/ひどいアフィリエイトトラフィックが変換しているかを見るでしょう。 また、どのアフィリエイトパートナーが最もエンゲージメントの高いトラフィックを促進しているかを特定できます。
  • 誰かがあなたのサイトで購入した場合は、この事実をCookieとして保存してください。 次に、ポップアップをブロックするページビュートリガーを作成します（最近の購入者とは関係ありません）。
  • SaaSビジネスを運営している場合は、開発者にユーザーに関するさまざまなデータをCookieに設定するように依頼してください。 ユーザーがログアウトしている場合でも、Webサイト/ブログなどにアクセスしているユーザーを特定できます。 そのデータをカスタムディメンションとしてGoogleアナリティクスに送信します。 ただし、PIIの制限に注意してください。

すべてのファーストパーティCookieをGoogleタグマネージャーで読み取ることができるわけではありません

実際、これはGTMだけでなく、クライアント側のJavaScript全般にも当てはまります。 すでにCookieに精通している場合は、ブラウザの開発者ツールにアクセスすると、すべてのCookie（そのページに設定されている）を表示できることをご存知でしょう。 私はChromeを使用しているため、その部分へのフルパスはChromeのメニュー>その他のツール>開発ツール>アプリケーション> Cookieです。

次に、ドメインを選択します。 次のようなものが表示されます。

これらは、Google TagManagerで使用できる可能性のあるファーストパーティのCookieです。 サイトのさまざまなスクリプトやその他の機能により、これらのCookieが訪問者のブラウザに設定されます。 ただし、ブラウザ（GTMを含む）のJavaScriptですべてにアクセスできるわけではありません。

CookieのHttpOnly列にチェックボックスがある場合、GTMはその値にアクセスできません。 これは、ファーストパーティのCookie変数が未定義を返すことを意味します。

CookieとGoogleタグマネージャーの操作：最後の言葉

だからあなたはそれを持っています。 Google TagManagerを使用してCookieを管理するのは非常に簡単であることがわかりました。 まず、特定の値でCookieを設定するカスタムHTMLタグを起動する必要があります。 次に、GTM内にファーストパーティのCookie変数を作成する必要があります。

この変数の値は、他のツール（Google Analyticsなど）に転送したり、トリガー内の起動条件として使用したりできます。

3ページの表示後に特定のタグを起動する方法を探している場合、または特定のページにアクセスした訪問者のために、Cookieを選択する必要があります。 別の解決策はブラウザストレージ（ localStorageとsessionStorage ）ですが、それはまた別のトピックです。

Google Tag ManagerでCookieを使用する方法に関するその他の秘訣を知っていますか？ コメントで教えてください。

ちなみに、「Google Tag ManagerはデフォルトでCookieを使用していますか？」という質問をする人がいます。 彼らはさまざまなプライバシー規制について心配しています。 これに答えるために、私はブログ投稿を公開しました。