9.3 Google Tag Manager変数の設定

https://tagmanager.google.com/に移動し 、個人ログインの詳細をログインします。

Google Analyticsタグの作成と設定が完了したら、Google Tag Manager変数(Adobeの起動で使用するデータ要素など)を設定する準備が整いました。

Google Tag Manager UIで、 変数に移動します。 組み込み変数のリストが表示されます。

Google Tag Managerの設定

最初に追加する必要がある変数が呼び出され customerEmailます。 お客様がプラットフォームデモのWebサイトでプロファイルを作成したら、お客様の電子メールアドレスをPlatformのお客様のプロファイルにリンクします。
プラットフォームデモのWebサイトでは、情報は多くの場合、localStorageに保存されます。 この機能にアクセスするには、Google Tag Manager変数に入力するカスタムJavaScriptが必要です。

ユーザー定義変数 — 」セクションで、「 新規」をクリックします。

Google Tag Managerの設定

Google Tag Managerの設定

最初に、「無題の変数」をわかりやすい名前に変更します。

名称未設定変数
customerEmail

「Configuration」パートのをクリックすると、変数の型を選択できます。

Google Tag Managerの設定

これを選択します。

変数の種類
カスタムJavaScript

Google Tag Managerの設定

以下の画面に入力するカスタムコードです。

function() {
  var email = localStorage.getItem("email");
  return email;
}

コードを貼り付けると画面はこのようになります
Google Tag Managerの設定

保存 」をクリックして、新しい変数を保存します。

Google Tag Managerの設定

画面は次のようになります。

Google Tag Managerの設定

次の変数に対して、次の手順を繰り返します。

  • ユーザー定義変数 」セクションで、「 新規」をクリックします。
  • 名前の変更 Untitled Variable
  • 設定タイプとして 「カスタムJavaScript 」を選択します。
  • JavaScriptコードの貼り付け
  • 保存 」をクリックして、新しい変数を保存します。

次の変数はになり customerMobileNrます。 お客様がプラットフォームデモのWebサイトでプロファイルを作成すると、お客様のモバイル番号がプラットフォームのお客様のプロファイルにリンクされます。

ユーザー定義変数 — 」セクションで、「 新規」をクリックします。

  • 名前 Untitled VariablecustomerMobileNr
  • 変数型として カスタムJavaScript を選択
  • 次のカスタムJavaScriptコードを貼り付けます。
function() {
  var mobilenr = localStorage.getItem("mobilenr");
  return mobilenr;
}

画面は次のようになります。

Google Tag Managerの設定

保存 」をクリックして、新しい変数を保存します。

Google Tag Managerの設定

次の変数はになり customerFirstNameます。 お客様がPlatform Demo Webサイトでプロファイルを作成したら、お客様の名をPlatformのお客様のプロファイルにリンクします。

ユーザー定義変数 — 」セクションで、「 新規」をクリックします。

  • 名前 Untitled VariablecustomerFirstName
  • 変数型として カスタムJavaScript を選択
  • 次のカスタムJavaScriptコードを貼り付けます。
function() {
  var firstname = localStorage.getItem("firstname");
  return firstname;
}

画面は次のようになります。

Google Tag Managerの設定

保存 」をクリックして、新しい変数を保存します。

Google Tag Managerの設定

次: customerLastName. お客様がPlatform Demo Webサイトでプロファイルを作成すると、お客様の姓がPlatformのお客様のプロファイルにリンクされます。

ユーザー定義変数 — 」セクションで、「 新規」をクリックします。

  • 名前 Untitled VariablecustomerLastName
  • 変数型として カスタムJavaScript を選択
  • 次のカスタムJavaScriptコードを貼り付けます。
function() {
  var lastname = localStorage.getItem("lastname");
  return lastname;
}

画面は次のようになります。

Google Tag Managerの設定

保存 」をクリックして、新しい変数を保存します。

Google Tag Managerの設定

次: aepTenantId. お客様がPlatform Demo Webサイトでプロファイルを作成すると、お客様の姓がPlatformのお客様のプロファイルにリンクされます。

ユーザー定義変数 — 」セクションで、「 新規」をクリックします。

  • 名前 Untitled VariableaepTenantId
  • 変数型として カスタムJavaScript を選択
  • 次のカスタムJavaScriptコードを貼り付けます。
function() {
  var aepTenantId = localStorage.getItem("aepTenantId");
  return aepTenantId;
}

画面は次のようになります。

Google Tag Managerの設定

保存 」をクリックして、新しい変数を保存します。

Google Tag Managerの設定

次: customerLoggedIn. お客様がプラットフォームデモのWebサイトにログインした場合、この変数を「はい」に設定し、その条件を起動ルールの設定で使用します。

ユーザー定義変数 — 」セクションで、「 新規」をクリックします。

  • 名前 Untitled VariablecustomerLoggedIn
  • 変数型として カスタムJavaScript を選択
  • 次のカスタムJavaScriptコードを貼り付けます。
function() {
  var loggedin = localStorage.getItem("loggedin");
  return loggedin;
}

画面は次のようになります。
Google Tag Managerの設定

保存 」をクリックして、新しい変数を保存します。

Google Tag Managerの設定

次: brandName. [ 管理者 -]メニューからデモするブランドを選択すると、brandNameがAdobe Experience Platformに送信されます。

ユーザー定義変数 — 」セクションで、「 新規」をクリックします。

  • 名前 Untitled VariablebrandName
  • 変数型として カスタムJavaScript を選択
  • 次のカスタムJavaScriptコードを貼り付けます。
function() {
  var brandName = localStorage.getItem("brandName");
  return brandName;
}

画面は次のようになります。
Google Tag Managerの設定

保存 」をクリックして、新しい変数を保存します。

Google Tag Managerの設定

次の変数は同じプロセスで作成されますが、コードは少し異なります。

次に必要な変数は、と呼ばれ productProductViewます。 顧客表示が製品をすると、この変数に製品表示情報が格納されます。

ユーザー定義変数 — 」セクションで、「 新規」をクリックします。

  • 名前 Untitled VariableproductProductView
  • 変数型として カスタムJavaScript を選択
  • 次のカスタムJavaScriptコードを貼り付けます。
function() {
  var productview = JSON.parse(localStorage.getItem("thisProductView"));
  return productview;
}

画面は次のようになります。

Google Tag Managerの設定

保存 」をクリックして、新しい変数を保存します。

Google Tag Managerの設定

次の変数が呼び出され return1ます。 必要に応じて、この変数を使用してNumber値1を返します。

ユーザー定義変数 — 」セクションで、「 新規」をクリックします。

  • 名前 Untitled Variablereturn1
  • 変数型として カスタムJavaScript を選択
  • 次のカスタムJavaScriptコードを貼り付けます。
function() {
  return 1;
}

画面は次のようになります。

Google Tag Managerの設定

保存 」をクリックして、新しい変数を保存します。

Google Tag Managerの設定

もしAdobeのアプリケーションを使っていたら、ECIDを取り込む必要があります。 これから紹介するのは、 ​Google専用のプラットフォームを使用して実行できる点です。Google Analyticsの一意のGoogle識別子を保存します。 この変数にクライアント側IDの値を割り当てます。

次の変数が呼び出され gaClientIdます。 この変数をすべてのGoogle Analyticsデータのキーとして使用します。

ユーザー定義変数 — 」セクションで、「 新規」をクリックします。

  • 変数型として ファーストパーティCookie を選択

Google Tag Managerの設定

  • Cookie名 _ga として選択

Google Tag Managerの設定

保存 」をクリックして、新しい変数を保存します。

Google Tag Managerの設定

次: pageTimeStamp. プラットフォームへの呼び出しごとに一意のタイムスタンプが必要です。

ユーザー定義変数 — 」セクションで、「 新規」をクリックします。

  • 名前 Untitled VariablepageTimeStamp
  • 変数型として カスタムJavaScript を選択
  • 次のカスタムJavaScriptコードを貼り付けます。
function() {
var date = new Date();

var month = date.getUTCMonth();
var day = date.getUTCDate();
var hour = date.getUTCHours();
var min = date.getUTCMinutes();
var sec = date.getUTCSeconds();

month = (month < 9 ? "0" : "") + (month+1);
day = (day < 10 ? "0" : "") + day;
hour = (hour < 10 ? "0" : "") + hour;
min = (min < 10 ? "0" : "") + min;
sec = (sec < 10 ? "0" : "") + sec;

var str = date.getFullYear() + "-" + month + "-" + day + "T" +  hour + ":" + min + ":" + sec + ".000Z";

return str;
}

Google Tag Managerの設定

保存 」をクリックして、新しい変数を保存します。

Google Tag Managerの設定

次: pageHitId. プラットフォームへの呼び出しごとに一意のHitIdが必要です。

ユーザー定義変数 — 」セクションで、「 新規」をクリックします。

  • 名前 Untitled VariablepageHitId
  • 変数型として カスタムJavaScript を選択
  • 次のカスタムJavaScriptコードを貼り付けます。
function() {
  var min = 111111111;
  var max = 9999999999999;
  var randomNumber = Math.random() * (max - min) + min;
  return String(randomNumber);
}

Google Tag Managerの設定

コードフラグメントを保存し、「 保存 」を再度クリックして変数設定を保存します。

Google Tag Managerの設定

次に、JavaScriptオブジェクトを参照することで、カスタムコードを使用せずにGoogle Tag Managerで使用できる変数の一部を取得します。

これを行うには、次の4つの手順に従います。

ユーザー定義変数 — 」セクションで、「 新規」をクリックします。

  • 名前の変更 Untitled Variable
  • 変数型として JavaScript変数 を選択
  • JavaScript変数名を入力
  • 保存 」をクリックして、新しい変数を保存します。

First: customerLanguage. ブラウザーの設定からお客様の好みの言語を取り込みます。

ユーザー定義変数 — 」セクションで、「 新規」をクリックします。

  • の名前 Untitled Variable をに変更し customerLanguageます。
  • JavaScript変数 」を変数型として選択します。

Google Tag Managerの設定

  • Enter the JavaScript Variable name: navigator.language.
    画面は次のようになります。

Google Tag Managerの設定

  • 保存 」をクリックして、新しい変数を保存します。

Google Tag Managerの設定

次: pageType. 新しいページが読み込まれるたびに、ページのタイプを取り込む必要があります。

ユーザー定義変数 — 」セクションで、「 新規」をクリックします。

  • の名前 Untitled Variable をに変更し pageTypeます。
  • JavaScript変数 」を変数型として選択します。
  • Enter the JavaScript Variable name: digitalData.category.siteSection.

画面は次のようになります。Google Tag Managerの設定

  • 保存 」をクリックして、新しい変数を保存します。

Google Tag Managerの設定

次: productCategory. 製品の表示ごとに、製品のカテゴリを取り込み、Platformに送信する必要があります。

ユーザー定義変数 — 」セクションで、「 新規」をクリックします。

  • の名前 Untitled Variable をに変更し productCategoryます。
  • JavaScript変数 」を変数型として選択します。
  • Enter the JavaScript Variable name: digitalData.product.category.

画面は次のようになります。Google Tag Managerの設定

  • 保存 」をクリックして、新しい変数を保存します。

Google Tag Managerの設定

次: productName. 製品の表示ごとに、製品の名前を取り込んでPlatformに送信する必要があります。

ユーザー定義変数 — 」セクションで、「 新規」をクリックします。

  • の名前 Untitled Variable をに変更し productNameます。
  • JavaScript変数 」を変数型として選択します。
  • Enter the JavaScript Variable name: digitalData.product.name.

画面は次のようになります。Google Tag Managerの設定

  • 保存 」をクリックして、新しい変数を保存します。

Google Tag Managerの設定

次: productPrice. 製品の表示ごとに、製品の価格を取得し、プラットフォームに送信する必要があります。

ユーザー定義変数 — 」セクションで、「 新規」をクリックします。

  • の名前 Untitled Variable をに変更し productPriceます。
  • 変数型として 「カスタムJavaScript 」を選択します。
  • 以下のコードを貼り付けて、カスタムjavascriptを入力します。
function() {
  var price = Number(digitalData.product.price);
  return price;
}

画面は次のようになります。Google Tag Managerの設定

  • 保存 」をクリックして、新しい変数を保存します。

Google Tag Managerの設定

次: productImageUrl. 製品表示ごとに、製品の画像URLを取り込んでPlatformに送信する必要があります。

ユーザー定義変数 — 」セクションで、「 新規」をクリックします。

  • の名前 Untitled Variable をに変更し productImageUrlます。
  • JavaScript変数 」を変数型として選択します。
  • Enter the JavaScript Variable name: digitalData.product.imageUrl.

画面は次のようになります。Google Tag Managerの設定

  • 保存 」をクリックして、新しい変数を保存します。

Google Tag Managerの設定

次: productInteraction. 製品の表示ごとに、インタラクションのタイプ(表示、買い物かごへ、購入など)追加を取り込み、それをプラットフォームに送信する必要があります。

ユーザー定義変数 — 」セクションで、「 新規」をクリックします。

  • の名前 Untitled Variable をに変更し productInteractionます。
  • JavaScript変数 」を変数型として選択します。
  • Enter the JavaScript Variable name: digitalData.product.interaction.

画面は次のようになります。Google Tag Managerの設定

  • 保存 」をクリックして、新しい変数を保存します。

Google Tag Managerの設定

次: pageUserAgent. 各ページ表示に対して、ユーザーデバイスタイプとオペレーティングシステムを取り込み、それをプラットフォームに送信する必要があります。 この情報は、ユーザエージェントを使用して取得します。 User Agentの詳細については、次を参照してください。 https://en.wikipedia.org/wiki/User_agent

ユーザー定義変数 — 」セクションで、「 新規」をクリックします。

  • の名前 Untitled Variable をに変更し pageUserAgentます。
  • JavaScript変数 」を変数型として選択します。
  • Enter the JavaScript Variable name: navigator.userAgent.

画面は次のようになります。Google Tag Managerの設定

  • 保存 」をクリックして、新しい変数を保存します。

Google Tag Managerの設定

もう少しで終わりだ。 pageName. 新たにページが読み込まれるたびに、ページ名を取り込み、AA、AAM、およびプラットフォームに送信する必要があります。

ユーザー定義変数 — 」セクションで、「 新規」をクリックします。

  • の名前 Untitled Variable をに変更し pageNameます。
  • JavaScript変数 」を変数型として選択します。
  • Enter the JavaScript Variable name: document.title.

画面は次のようになります。Google Tag Managerの設定

  • 保存 」をクリックして、新しい変数を保存します。

Google Tag Managerの設定

そして最後の一つ: pageUrl. 新たにページが読み込まれるたびに、URLを取り込み、他のソリューションに送信する必要があります。
ページURLはGoogle Tag Managerの組み込み変数なので、この変数を定義する必要はありません。 ただし、プラットフォームの他の情報との一貫性を保つために、pageUrlはいずれにしても定義します。

ユーザー定義変数 — 」セクションで、「 新規」をクリックします。

  • の名前 Untitled Variable をに変更し pageUrlます。
  • 変数型として URL を選択します。

Google Tag Managerの設定

画面は次のようになります。Google Tag Managerの設定

  • 保存 」をクリックして、新しい変数を保存します。

Google Tag Managerの設定

必要なすべてのGoogle Tag Manager変数の設定が完了しました。

次の手順: 9.4プラットフォームデータセットの取得

モジュール9に戻る

すべてのモジュールに戻る

このページ