Google Cloud Platform

Server-side GTM を Google AppEngine にデプロイする

こんにちは、エクスチュアの権泳東(權泳東/コン・ヨンドン)です。

Twitter: @exturekwon

Google Tag Managerのサーバーサイド版がベータリリースされたので、早速私個人が備忘メモ代わりに書いてるブログに導入しました。

二代目俺のメモ

以下、インストール手順を説明します。

 

1. 準備するもの

Server-side tagging  |  Google Tag Manager – Server-Side

Server-side GTMはGoogle Cloud Platform (GCP) にデプロイして使います。
具体的にはGCPのAppEngine (GAE) というPaaSを使います。

また、GAEはカスタムドメイン機能を使って独自ドメインのサブドメインにAレコードを割り当てて使う事が出来ます。
ぜひ独自ドメインも用意して使ってください。

 

2. GTMコンテナを作る

GTMにログインして、新しいコンテナを作ります。

そしてコンテナタイプを「Server」にします。

Serverを選択

続いてGTMをGAEにインストールする方法で「自動」か「手動」を選ぶのですが、せっかくの機会なのでここは手動でじっくり進むことにしましたw

手動を選択

手動を選ぶとGCP側のセットアップに必要な「設定キー」が表示されるので、これをコピペしてメモっときます。

続いてGCPの設定。

 

3. GAEをセットアップ

App Engine Setup Guide  |  Google Tag Manager – Server-Side

GCPコンソールから、「Cloud Shell」を起動します。
そしてまずは正しいプロジェクトIDを設定してから、インストールスクリプトを実行します。

$ gcloud config set project [プロジェクトID]
$ bash -c "$(curl -fsSL https://googletagmanager.com/static/serverjs/setup.sh)"

すると以下のような対話型インストーラが起動するので、質問に答えて行きます。

Container Config (Required): XXXXXXXXXX #設定キーを入力
Policy Script URL (Optional): #何も入れずEnter
Deployment Type (testing/production): testing #テスト用

Do you wish to continue? (y/N): y #yで継続
As you wish.
#中略

Please choose the region where you want your App Engine application
located:

 [1] asia-east2    (supports standard and flexible)
 [2] asia-northeast1 (supports standard and flexible)
 [3] asia-northeast2 (supports standard and flexible)
 [4] asia-northeast3 (supports standard and flexible)
 [5] asia-south1   (supports standard and flexible)
 [6] asia-southeast2 (supports standard and flexible)
 [7] australia-southeast1 (supports standard and flexible)
 [8] europe-west   (supports standard and flexible)
 [9] europe-west2  (supports standard and flexible)
 [10] europe-west3  (supports standard and flexible)
 [11] europe-west6  (supports standard and flexible)
 [12] northamerica-northeast1 (supports standard and flexible)
 [13] southamerica-east1 (supports standard and flexible)
 [14] us-central    (supports standard and flexible)
 [15] us-east1      (supports standard and flexible)
 [16] us-east4      (supports standard and flexible)
 [17] us-west2      (supports standard and flexible)
 [18] us-west3      (supports standard and flexible)
 [19] us-west4      (supports standard and flexible)
 [20] cancel

Please enter your numeric choice: 2 #東京リージョンの2を選択

Creating App Engine application in project [exture-kwon-gtm-env] and region [asia-northeast1]....done.
#中略
Do you want to continue (Y/n)? y #yで継続

しばらくするとサーバーサイドGTMのデプロイが完了します。

 

4. GAEカスタムドメインの設定

Custom domain configuration  |  Google Tag Manager – Server-Side

※独自ドメインを使わない場合はこのステップは省略してOKです。

GAEの[設定]>[カスタムドメイン]を開いて、独自ドメインを追加します。

はじめてカスタムドメインを使う場合はDNSにTXTレコードを追加してドメイン所有権を確認する必要があります。
ドメイン所有権が確認出来たら、Server-side GTMに割り当てるサブドメインをここで登録します。

サブドメインを登録後、今度はDNSに登録するレコードが表示されます。
ドキュメントによると、ここで使うのは下記のAレコードとAAAAレコード(IPv6)だけです。
CNAMEは不要です。

AレコードとAAAAレコード(IPv6)だけ使う

このIPアドレスをサブドメインのAレコード/AAAAレコードとしてDNSに登録します。
私のブログはGCPの「Cloud DNS」を使ってるので、このように登録しました。

DNSにレコードを登録

GAEのカスタムドメインはSSL証明書も自動で配置・更新してくれるので便利ですね!

 

5. Server-side GTMの設定

再びGTMに戻ります。
Server-side GTMを開いて、[管理]>[コンテナの設定]に進みます。
[タグ設定サーバーの URL]に、DNSに追加したサブドメインを入力します。

カスタムドメインを登録

続いて「タグ」を追加します。
現在追加出来るタグの種類は以下の3つです。

タグの種類

少なっ!w

ベータ版ですからね。
という訳でGAユニバーサルアナリティクスを追加します。

で、設定ですが今回はほとんど何もいじりません。

ほぼデフォルト

トリガーは、[追加]から[カスタムイベント]をえらび、「Request Path」に「/collect」を含むという条件にします。
analytics.jsのビーコン全てを転送対象にしておきます。

/collectに来たビーコンのみ転送

なぜかというと、Server-side GTMはWebサイトからのGAビーコンを受け取ってGAサーバーに転送するためのリバースプロキシなので、細かい設定は「Webサイト用GTM」側で行います。

ここまで設定して保存したら「プレビュー」ボタンをクリックします。
すると、以下のような空のデバッグウィンドウが開きます。

プレビューが開けばOK

URLが先程登録したサブドメインになっていれば正常です。
それでは、GTMの「公開」ボタンをクリックして、本番GAEにデプロイしましょう。

 

6. Webサイト用GTMの設定

Send data to server-side Google Tag Manager

Server-side GTMにビーコンを送るための「Webサイト用GTM」の設定をします。

今回はテストなので既存のGAタグを直す事はせず、新たに作成したテスト用GAプロパティを追加して計測します。

というわけで新規タグ追加で、GAユニーバサルアナリティクスを追加します。
普段と違うのは、トランスポートURL を設定する事です。

トランスポートURLを追加

トランスポートURLにはServer-side GTMをデプロイしたGAEのホスト名を入れます。
これによって、GAビーコンのトラフィックがGAEに向かって発生するようになります。

保存したら「プレビューモード」でビーコンのリクエストを見てみましょう。

tm.kwonline.orgへのリクエスト

tm.kwonline.org 宛ににGAビーコンが発生している事が確認出来ました。

7.動作確認

Server-side GTMのプレビューウィンドウを見てみましょう。
Variablesタブを開くと、/collectへのリクエストが届いてます。

/collectへのトラフィック

GAのリアルタイムレポートでも確認します。

リアルタイムレポートで確認

確かにデータが確認出来ました。
という訳で本番公開!

おまけ:Stackdriverログ

GCPではStackdriverというロギングサービスがあり、GAEのHTTPリクエストログも当然のように記録されます。

ビーコンURL(payload)のログが残る

これを見ると、ブラウザから発生するビーコンURLがそのまま記録されてますね。
これは折角なのでBigQueryにエクスポートしましょう。
詳細は次回のブログで。

Server-side GTMのGAビーコンログをBigQueryにエクスポートして分解する

TL;DR

Server-side GTMを使うと、GCP経由でWebサイトから発生したGAビーコンをGoogleAnalyticsサーバーに転送して計測出来るようになります。
これを使えばWebサイトのサブドメインからGAタグを配信出来るようになります。

もはやJavascriptだけイジってるようじゃMartechの最先端について行けない時代ですね。

弊社ではGoogleAnalytics/AdobeAnalyticsなどの各Martechツールの導入実装コンサルティングサービスや、GCP/AWSなどのパブリッククラウドを使ったデータ分析基盤構築コンサルティングサービスを提供しております。
お問い合わせはこちらからどうぞ

関連記事

  1. Adobe Analytics

    AdobeAnalytics: GTMのdataLayerをAdobeAnalyticsの処理ルール…

    こんにちは、エクスチュアCTOの権です。Twitter:@ex…

  2. Ad Hoc Analysis

    Adobe Analytics: Ad Hoc Analysisでセグメントの条件を一気に追加する方…

    Adobe Analyticsでセグメントを作るとき、「A または B…

  3. Adobe Analytics

    Adobe AnaltyicsとGoogle Analytics の「生Webビーコン」をBigQu…

    こんにちは、エクスチュアの権泳東(コン・ヨンドン)です。Twi…

  4. Adobe Analytics

    Adobe Analytics:セグメントの落とし穴:滞在時間がおかしくなる

    Adobe Analyticsの持つ機能の中でも特に強力で便利な機能の…

  5. KARTE

    CXツール「KARTE」ってどんなツール?主な機能や魅力をざっくり紹介!

    こんにちは!エクスチュアインターン生の上園…

  6. Google Cloud Platform

    GoogleNext 2019レポート:2日目

    こんにちは、エクスチュアの権泳東(コン・ヨンドン)です。Twi…

最近の記事

  1. Server-side GTMのAppEngine設定をカス…
  2. Cloud FunctionsとOpenWeather AP…
  3. 【実験してみた】CNAMEを使わずにAdobeAnalyti…
  4. CXツール「KARTE」ってどんなツール?主な機能や魅力をざ…
  5. KARTE Blocks データプランナーの強い味方!!
  1. Cloud Dataflow

    Firebase AnalyticsのデータをフラットなCSVに変換する …
  2. Adobe Analytics

    Adobe AnalyticsとGoogle Analyticsの違い② サンプ…
  3. Databricks

    Databricks: Delta Lakeを使ってみる
  4. Tableau

    Tableauで半円型のゲージを作る方法
  5. Adobe Analytics

    Adobe Mobile SDK 4.xからAEP SDKに移行する
PAGE TOP