Categories
アナリティクス データサイエンス

スプレッドシートとGoogle Apps ScriptでBigQueryを監視

分析データも監視が必要

データ分析用のテーブルやGoogle Analytics、FirebaseなどからBigQueryにインポートされたテーブルが更新されていなくて、分析結果が狂ってしまったって事はありませんか?特にGoogle Analytics360のデータは遅れてデータが取り込まれることがよくあるうえに、後から差分データがしれっとインポートされることもあります。

そのため、日次バッチなどで集計をかけていると、集計よりも後にデータがインポートされた場合に「データの件数や内容と集計結果が合わない」ということが発生します。

そういった経緯から「分析用データも監視が必要」とは思っていたのですが、勘定系や基幹系のシステムのようにミッションクリティカルではないので、監視ツールにお金をなかなかかけられません。それにそこに費用をかけるくらいなら、BigQuery MLなどに充てたいですよね?

GoogleスプレッドシートとGoogle Apps Scriptで監視ツールを作成

「PythonでローカルからBigQueryにアクセスできるから、Pythonプログラムを叩けばいいのでは?」と思ったのですが、それだと毎回自分で叩かないといけないし、PCも起動しっぱなしにしておかないといけない、といった課題があるので、他の方法を探してみました。

そして、Google Apps Scriptを使えばBigQueryの結果を取得できて、しかもトリガーで毎日定期的に実行ができる、さらに自分宛てにメールも配信できる、というまさに私の希望をすべて満たしてくれることが判明!本当にGoogleサマサマです。

BigQuery監視ツール作成手順

それではさっそく作成に入ります。監視ツールの基本的な流れは以下になります。

  1. Google Apps Scriptのトリガーで関数を実行
  2. BigQueryでクエリを実行
  3. クエリの結果の件数が1レコードでもあれば結果をメールで送付
  4. Googleスプレッドシートにログを出力

クエリの作成

最初にクエリを作成しましょう。まずは実行確認のためにBigQueryのWebコンソール上でクエリを作成します。このとき、結果が1件でも返ってきたらエラーとするようなクエリにしてください。

たとえば、Google Analytics 360から前日のデータが格納されていることを確認するには下記のように、「最新の日付が前日ではない場合に結果を返す」というクエリを作成します。

-- BigQuery内にある最新のテーブルの日付とそのテーブルのレコード数を返す
SELECT MAX(_TABLE_SUFFIX) AS tid , COUNT(1) AS cnt_row FROM `bigquery-public-data.google_analytics_sample.ga_sessions_20*`
-- 最新の日付が前日ではないという条件
HAVING MAX(_TABLE_SUFFIX) != FORMAT_DATE('%y%m%d',DATE_SUB(DATE(CURRENT_TIMESTAMP, 'Asia/Tokyo'),INTERVAL 1 DAY))
;

上記で使用しているテーブルは2017年までのデータしかないため、tid: 170801 、cnt_row: 903653 という結果を返します。とりあえず、このクエリは後ほど使いますので、メモ帳などに保存しておいてください。

Googleスプレッドシートの作成

クエリ格納用シートの作成

次にGoogleスプレッドシートに先ほど作成したクエリや各種設定情報を書き込んでいきます。このシート名を「Queries」としてください。今回は入力するのはメール送信時に使用する件名とBigQueryで実行するクエリの2つだけにします。

  • A列:タイトル(メール送信時の件名)
  • B列:BigQueryで実行するクエリ

実行したいクエリが2つ以上ある場合は、3行目以降に追記してください。空行を入れなければ続けて実行するようなスクリプトにしています(スクリプトは後述)。

クエリによってメール送信先を変えたい場合は、C列にメールアドレスの列を追加し、C列で取得したメールアドレスを後ほど説明するGoogle Apps Scriptの配信関数(sendEmail)の引数に入れれば可能です。

ログ用シートの作成

次に、「log」というシート名のシートを作成します。こちらは空で構いません。

Google Apps ScriptでBigQueryにクエリを投げる

シートから情報を取得

今度は肝心の機能の部分をGoogle Apps Scriptで実装します。Google Apps ScriptはGoogleスプレッドシートの「ツール」→「スクリプトエディタ」をクリックすると開きます。Google Apps Scriptのサイトからアクセスするとスプレッドシートとの連携が面倒なので、この方法がおすすめです。

Google Apps Scriptのウィンドウが表示されたら「コード.gs」というタブのエディタ部分に下記のコードを書いて保存します。ファイル名は何でも構いませんが、ここでは「BigQuery監視」としておきます。

function main() {
  // スプレットシートを取得
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  // ’Queries’シートを取得
  var queries_sheet = spreadsheet.getSheetByName("Queries");
  // 各行のデータを取得(1行目はヘッダーなので飛ばす)
  for (var i = 2; i <= queries_sheet.getLastRow(); i++) {
    // A列の値(件名)を取得
    var query_title = queries_sheet.getRange(i, 1).getValue();
    // B列(クエリ)を取得
    var query =  queries_sheet.getRange(i, 2).getValue();
     // 件名やクエリがない場合はその時点で終了(空行の以降の行は実行しない)
    if(query_title && query){
      // SQLを実行する関数(後述)
      runQuery( query_title, query);
    }else{
      break;
    }
  }
}

SQLを実行

次に、実際にSQLを実行する関数(runQuery)を作成します。この関数はいくつかの処理が混ざっていますが、下記のような流れになっています。

  1. SQLを実行
  2. 結果が返ってくるまでループで待つ
  3. 結果を文字列に変換
  4. 結果がある場合はエラーなのでメールで送付
  5. ログ出力
function runQuery(title, query) {
  var projectId = 'xxxxx'; // プロジェクトID
  var request = {
    query: query
  };
  // standardSQLで実行するために必要
  request.useLegacySql = false;
  var queryResults = BigQuery.Jobs.query(request, projectId);
  var jobId = queryResults.jobReference.jobId;
  // ジョブが完了したか定期的にチェック
  var sleepTimeMs = 500;
  while (!queryResults.jobComplete) {
    Utilities.sleep(sleepTimeMs);
    sleepTimeMs *= 2;
    queryResults = BigQuery.Jobs.getQueryResults(projectId, jobId);
  }
  // SQLの結果を取得.
  var rows = queryResults.rows;
  var totalRows = queryResults.totalRows;
  while (queryResults.pageToken) {
    queryResults = BigQuery.Jobs.getQueryResults(projectId, jobId, {
      pageToken: queryResults.pageToken
    });
    rows = rows.concat(queryResults.rows);
  }
  var message = '';
  // クエリの結果が1行以上ある場合、結果内容を文字列にしてメール送信&ログ出力
  if (rows) {
    // ヘッダーを追加
    var headers = queryResults.schema.fields.map(function(field) {
      return field.name;
    });
     message +=headers;
    // 結果を連結して文字列を作成.
    var data = new Array(rows.length);
    for (var i = 0; i < rows.length; i++) {
      var cols = rows[i].f;
      data[i] = new Array(cols.length);
      for (var j = 0; j < cols.length; j++) {
        data[i][j] = cols[j].v;
      }
      message += data[i].join(',') + '\n';
    }
    // 結果を指定したアドレスに送る
    sendEmail(title, message);
    // 結果をログに出力
    writeLog(title + ' ' + rows.length + ' rows returned.');
  } else {
    // 結果が0件であることをログに出力
    writeLog(title + ' No rows returned.');
  }
}

projectIdはご自身のプロジェクトIDを入れます。プロジェクトIDについてはBigQueryのUIコンソールのプロジェクト名をクリックすると「プロジェクトの選択」ウィンドウが表示されますので、そこの「ID」列がプロジェクトIDになります。

メールを配信

メール配信部分は非常にかんたんで、MailApp.sendEmail 関数を使うだけです。ポイントは以下になります。

  • 送り主は今このスプレッドシートとスクリプトを作成しているGoogleアカウント(G Suiteでログインしている場合はそのメールアドレス)
  • 件名はフィルタリングしやすいように接頭語+各クエリのタイトル
  • 送り先は任意ですが今回は固定
  • 本文にこのスプレッドシートのURLを含める
function sendEmail(subject,message){
  var to = '[email protected]'
if(MailApp.getRemainingDailyQuota() == 0) {return;}
// 件名
  var subj = '[BigQuery]Alert : ' + subject;
  // 今回のスプレッドシートのURL
  var url = '\n Script: https://docs.google.com/spreadsheets/d/xxxxxxxxxxx'
  MailApp.sendEmail({
    // 送り先
    'to':to,
    // 件名
    'subject':subj,
    // 本文
    'htmlBody':message + url
  })
}

とくに、スプレッドシートのURLを入れておくと、Gmailで受け取ったときにそのスプレッドシートをすぐに開くことができるのでおすすめです。

なぜこれをしておくかというと、今回の場合、エラーが発生したとき(SQLの実行結果が1件以上)にのみメールが送られるので、突然メールが届いても「このメールなんだっけ?」と忘れがちです。それを防ぐためにURLを入れています。

ログを出力

エラーの有無に関係なく実行結果をログに残しておいたほうが良いので、その関数も作成します。ログは足所にスプレッドシートで作成した「log」シートに追記されます。ログはA列に実行日時、B列に結果が出力されます。

function writeLog(str){
  var spreadsheetFile =  SpreadsheetApp.getActiveSpreadsheet();
  var logSheet = spreadsheetFile.getSheetByName("log");
  var lastRow = logSheet.getLastRow();
  var lastCol = logSheet.getLastColumn();
  var startRow = lastRow+1;
  var input = [[formatDateTimeAsString(new Date()),str]];
  logSheet.getRange(startRow,1,1,2).setValues(input);
}
// 日次を返す
function formatDateTimeAsString(d) {
  var dateString = Utilities.formatDate(d, 'GMT+9:00', 'yyyy/MM/dd HH:mm:ss');
  return dateString;
}

トリガーの設定

最後はトリガーの設定になります。トリガーはGoogle Apps Scriptの編集画面から「編集」→「現在のプロジェクトのトリガー」を選択します。

トリガーの画面が表示されますので、右下の「トリガーを追加」ボタンをクリックします。毎日チェックしたい場合は下記のように「日付ベースのタイマー」を選んでください。その他、時間や分ベースでの指定も可能です。

  • 実行する関数を選択: main
  • 実行するデプロイを選択: Head
  • イベントのソースを選択: 時間主導型
  • 時間ベースのトリガータイプを選択: 日付ベースのタイマー
  • 時刻を選択:任意

トリガーは時間だけでなく、スプレッドシートの起動や変更時なども選択できます。

以上で設定は完了です。

具体的な用途

データの有無の監視以外で私は以下のような用途でもこのツールを使っています。

  • 売上高や件数の前日比が80%を下回った場合
  • 予期しない異常な値が入った場合(例:平均売上単価が5000円なのに5万円以上の購入があった場合)
  • 日時バッチのミスやデータの入れ間違いなどにより重複データが発生した場合

このツールはSQLの結果を判断材料にしているため、好きなように条件を変えられるのがウリです。

応用編

上記以外に関数等を変えてどのようなことができるか?考えてみました。

BigQueryにアクセスできないけど、データを共有したい場合

代理店などとデータを共有したいときなどに有効かと思います。

データをスプレッドシートに書き込むことでレポートの作成なども可能

メールで数値を共有するだけでなく、スプレッドシートにデータを出力してそれを共有するのもありかと思います。ただ、Googleデータポータルを使う場合はBigQueryから直接参照できるのであまり意味はないかもしれません。

「こんな使い方してます」といったおすすめがありましたらコメント欄に書いてもらえると嬉しいです。

[amazon asin=”4798061271″ kw=”Google Apps Script” rakuten id=” ” yahoo=” “] [amazon asin=”B07BNB1Z9L” kw=” Google Apps Script完全入門” rakuten id=” ” yahoo=” “]

Google Apps Scriptは情報も少ないし、Googleのドキュメントも例が少ないので、事例や使い方が書かれている本を購入しておくと便利です。

]]>
Categories
アナリティクス

Googleタグマネージャーを使う場合のコンテンツセキュリティポリシーの設定

Googleタグマネージャーは今では一般的なツールとなっていますが、 ブラウザなどによるセキュリティ関連の新しい仕様によって、あるときから急にタグマネージャーが使えないといったことが起きたりします。

コンテンツセキュリティポリシー(CSP)とは

そのうちの1つでよくあるのがコンテンツセキュリティポリシー(Content Security Policy:CSP)です。ざっくり説明すると、 Webサイト・ページはクロスサイトスクリプティング(XSS)などに対する脆弱性があるのですが、ファイルやスクリプトなどのリソースを拒否・受け入れする仕様です。

つまり、ページで「特定のサイトからのスクリプト(ファイル)しか使わないので、ほかはすべて拒否します」といった宣言をし、ブラウザはそれをもとにスクリプトの取捨選択をするといった感じです。

GoogleタグマネージャーやGoogleアナリティクスも例外ではなく、ここで宣言をしておかないと使えなくなり、Chromeなどのブラウザのコンソールには下記のようなエラーが表示されます。

コンテンツセキュリティポリシーの設定と種類

コンテンツセキュリティポリシーの設定

CSPの設定方法は主に HTTPレスポンスヘッダと<meta>タグの2種類あります。(他にもありますが割愛します)

  • HTTPヘッダー:Content-Security-Policy: default-src ‘self’
  • metaタグ:<meta http-equiv=”Content-Security-Policy” content=”default-src ‘self'”>

上記の default-src ‘self’ の部分をディレクティブと呼び、複数のディレクティブを設定する場合は;でつなげます。

ちなみに、上記の設定は「すべてのコンテンツを自身のドメイン(サブドメインは除く)から取得する」ということを表しています。

コンテンツセキュリティポリシーの制御対象

CSPでは制御対象のリソースを指定できます。主なものは以下になります。

  • script-src:Javascriptの読み込み
  • style-src:CSSの読み込み
  • frame-src:<iframe>による読み込み
  • default-src :設定がない場合に適用

Googleタグマネージャーへの影響

このようにCSPでリソースの取得の制限をしているので、このWebサイトから見たら外部に当たるGoogleタグマネージャーやGoogleアナリティクスも対象になってしまいます。

下記の例では、すべてのコンテンツを自身のドメイン (サブドメインを除く)からのみ許可しているため、 GoogleタグマネージャーやGoogleアナリティクスのスニペット(スクリプト)は無効になります。

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

Googleタグマネージャーが使えるようにするためのCSPの設定

基本設定

Googleタグマネージャーを使えるようにするには、まず最初にCSPのscript-src に ‘unsafe-inline’ を追加します。

script-src: 'unsafe-inline' https://www.googletagmanager.com
img-src: https://www.googletagmanager.com

非セキュアな場合はimg-srcディレクティブのGoogleタグマネージャーをhttpにします。

script-src: 'unsafe-inline' https://www.googletagmanager.com
img-src: http://www.googletagmanager.com

カスタム JavaScript変数

カスタムJavaScript変数を使用している場合はscript-src: ‘unsafe-eval’も追加する必要があります。

script-src: 'unsafe-eval'

プレビュー モード

Googleタグマネージャーのプレビューモードを使う場合は、さらにCSPに下記のディレクティブを追加します。

script-src: https://tagmanager.google.com
style-src: https://tagmanager.google.com https://fonts.googleapis.com
img-src: https://ssl.gstatic.com https://www.gstatic.com
font-src: https://fonts.gstatic.com data:

非セキュアな場合はscript-src: https://tagmanager.google.comのプロトコルをhttpに変更してください。

Googleアナリティクスを使えるようにするためのCSPの設定

Googleアナリティクスを使用する場合はgoogle-analytics.comもCSPの設定に加えなければなりません。

script-src: https://www.google-analytics.com https://ssl.google-analytics.com
img-src: https://www.google-analytics.com
connect-src: https://www.google-analytics.com

非セキュアな場合はscript-src ディレクティブで https://ssl.google-analytics.comを削除して構いません。

Web開発者との情報共有が大切

Gerd AltmannによるPixabayからの画像

このCSPの設定は通常はWeb開発者が行っていますが、彼らはタグマネージャーやアナリティクスについてはあまり気にしていません。そのため、CSPの設定を追加しても連絡が来ないことはよくあります。

その一方で、Web分析者やタグマネージャーの設定者もCSPなんてふだんは気にしないですし、内容もわかりません。コンソールにエラーが出ても通常は無視するでしょう。

アナリティクスにイベントやページビューが出てこないことはすぐに気づきますが、その原因を探すのは難しいです。

ですので、問題を防ぐにはふだんからWeb開発者との情報共有が大切です。コミュニケーションを取っておくことで、Web開発者から「今度CSPの設定を入れることになりました。CSPとは・・・・」といったことを教えてもらうことで、「タグマネージャーやアナリティクスに影響がでるかもしれない」と気づくことができます。

]]>
Categories
アナリティクス

GoogleアナリティクスのデータをBigQueryへ

これまでGoogleアナリティクスのローデータを使って予測やレコメンドのモデル作成に使う場合は、ローデータ形式になるようなカスタムレポートを作成して、それをPythonなどでループで取得するのが主なやり方(他にもやり方はあるとは思いますがなかなか面倒)でした。

それが今回、Googleが新しいプロパティ形式のWeb + Appプロパティをリリースしたことで、GoogleアナリティクスのWebデータもBigQueryに出力することが可能になりました。

今回はその手順を紹介していきますが、Googleアナリティクスのアカウントとプロパティ作成手順は省略します。

 Firebaseでプロジェクトを作成

なんでWebなのにFirebaseを使わないといけないの?」と思う方がいるかも知れません。今回のポイントがFirebaseなのです。

簡単に説明すると、

Webサイト→Firebase→(Googleアナリティクス & BigQuery)

という流れでデータが送られるようになります。そのため、 Firebase が必須となります。

それではまずは Firebase にてプロジェクトを作成します。

「プロジェクトを追加」をクリックします。

プロジェクトに名前をつけます。なんでも構いませんが、ドメイン名+○○というようにした方がわかりやすいです。

つづいて、Googleアナリティクスとの紐付けを行います。「このプロジェクトでGoogleアナリティクスを有効にする」にチェックを入れて、「続行」ボタンをクリックします。

するとGoogleアナリティクスのプロパティ一覧が表示されますので、そこから追加したいプロパティ先を選ぶか、「新しいアカウントを作成」を選択します。そのWebサイトのプロパティを作成済みならば、そのプロパティを選んでも全く問題ありません。

「新しいプロジェクトの準備ができました」と出たら無事完成です。

今作成したプロジェクトのホーム画面に遷移するので、左上の「プロジェクトの概要」の右側にある歯車をクリックします。そして「プロジェクトを設定」をクリックします。

Firebaseの料金設定を変更

GoogleアナリティクスもFirebaseも通常は無料ですが、BigQueryにFirebaseからデータを出力する場合は、Firebaseの料金設定を変更する必要があります。Firebaseの料金設定についてはFirebaseの料金設定で確認できます。

Firebaseのホーム画面の左側のメニューの下に「Spark」と書かれた箇所がありますので、そこをクリックすると料金プランのポップアップが表示されますので、「Blaze・従量制」を選択します。

Firebase→BigQueryに転送すること自体は費用はほとんどかかりません。BigQuery側でのデータの保管料とクエリ(SQL)の実行にかかる費用が発生します。

次に、費用の請求先を設定します。画面の下に「ご請求先」と表示されますが、BigQueryなどのGCP(Google Cloud Platform)を使用したことがない場合はここで請求先のアカウントを作成する必要があります。

今回は省略しますので、詳しくはCloud 請求先アカウントの作成、変更、閉鎖(Google)を参照願います。

Androidダミーアプリの登録

「アプリが必要なの??」と思う方もいるかも知れませんが、実際にはアプリは不要ですが、アプリの登録が必要です。

Firebaseのプロジェクトのホーム画面から左上の「プロジェクトの概要」の右側にある歯車をクリックし、「プロジェクトのを定」をクリックします。

次に「全般」をクリックして、画面の下の方にある「マイアプリ」の中にあるAndroidのアイコンをクリックします。

アプリを登録しますが、「Androidパッケージ名」は適当で構いません。入力後「アプリを登録」ボタンをクリックします。

続いて下記のような「設定ファイルのダウンロード」が出てきますが、無視して「次へ」をクリックします。

すると「Firebase SDKの追加」や「アプリを実行してインストールを確認」の項目に移りますが、ここも無視して右下にある「このステップをスキップ」をクリックして終了します。

FirebaseとBigQueryの連携

プロジェクトのホーム画面から先程と同様に「プロジェクトの概要」の右側にある歯車をクリックします。そして、「統合」タブをクリックするとその下に「BigQuery」が表示されますので、クリックします。

「FirebaseとBigQueryのリンク」が表示されますので、「次へ」をクリックします。

続いて「エクスポートに広告IDを含める」にチェックを入れて、下にある「BigQueryにリンク」をクリックします。

Googleアナリティクスの設定

Googleアナリティクスへ行き、今回選択(もしくは作成)したアカウントを開きます。そこに新しいプロパティが作成していれば成功です。たまに作成に時間がかかりますので、見つからない場合は数十分時間をおいてから再確認してください。

新しく作成されたプロパティをクリックします。

左下の歯車をクリックし、右側に表示される「プロパティ」の中から「データストリーム」をクリックします。

すると、右側に「ストリームを追加」というボタンがあるので、そこから「ウェブ」を選択します。

「データストリームの設定」が表示されますので、URLやストリーム名(何でもOK)を入力します。さらに、「測定機能の強化」にもチェックを入れ、「ストリームを作成」をクリックします。

すると、前の画面に戻り、「データストリーム」に今作成したWeb用のデータストリームと先ほど設定したAndroidのダミーデータが登録されていればOKです。

Googleタグマネージャー(GTM)の設定

最後に、タグマネージャーの設定になります。Googleアナリティクスの設定画面でタグマネージャーでの設定方法が記載されています。ここの上部にある「測定ID」(G-XXXXXX)をコピーしておいてください。

まずは、Googleタグマネージャーへ行き、現在使用しているコンテナーを開きます。(新規に作成しても問題ありませんが、既存の他のタグも使う可能性がある場合は既存のコンテナーを選んだほうが良いでしょう)

左側のメニューから「タグ」をクリックして、右上の「新規」をクリックします。

「Googleアナリティクス:アプリ+ウェブの設定」を選択します。

名前は何でも構いません。測定IDに先程Googleアナリティクスでコピーしておいた G-XXXXXX を貼り付けます。トリガーは「All Pages」を選択します。

最後に、このタグを公開したら設定は終了です。

BigQueryのテーブル例

一定時間が経過するとBigQueryのテーブルにデータが溜まっていきます。

Datasetは今回 analysis_プロパティIDで、テーブル名はevents_YYYYMMDDとなります。 テーブルのスキーマについてはBigQuery Export のスキーマを参照してください。 具体的には1つのイベント(ページビューやイベント、セッションの開始等)毎に1行追加されています。

なお、BigQueryに初めて触れる方には少々わかりにくいのが配列とSTRUCTです。BigQueryは普通のテーブルとは違い、カラムの中に配列や構造体を持つことができます。

※構造体はカラムの中に複数のカラムを持つようなものとイメージしてください。

BigQueryのテーブル構造や扱い方については改めて紹介したいと思いますので、ご質問等ありましたらコメントしていただけると嬉しいです。

]]>
Categories
Webマーケティング アナリティクス

Bingの広告費やインプレッション数などをGoogle Analyticsにインポートする方法

Automating cost data import in Google Analytics with Google Apps Scriptで、こちらを参考に原型がわからないほどカスタマイズしています。

インポートまでの流れ

Bing AdsのデータをGoogle Analyticsにインポートするまでの簡単な流れになります。
  1. Bing Ads管理画面で日次レポートを作成し、Gmailに送る
  2. Gmail内でメールを検索
  3. 添付ファイルを解凍
  4. 解凍したデータのうち必要な箇所を抽出
  5. Google Analyticsにアップロード

Bingの広告データをGmailに送る

Bingの管理画面からレポート作成のページへ進みます。

Bingレポートの作成

次にレポートの詳細設定で下記のようにします。

Bingレポートの概要

  • Report name:任意(※Gmailで検索する際に必要なのでわかりやすく他と重複しない名前が良いです)
  • Report type: Keyword
  • Show: Day
  • Date range: Yesterday
  • Timezone: (GMT + 09:00)Osaka, Sapport, Tokyo
  • Format: CSV
  • What to report on: Specific accounts and campaignsを選択し、下の一覧から該当のクライアントを選択

Bingレポートのカラムを選択

レポートに含める項目(カラム)は下記を選びます。
  • Unit of Date
  • Account
  • Impressions
  • Clicks
  • Spend
  • AD ID
  • Keyword
  • Campaign
  • Destination URL
※念のため、この順番を変えないでください。

Bingレポートの送付設定

最後に、このレポートをGmailに送付します。
  • Schedule this report : チェック
  • Frequency:Daily
  • At : 任意ですが、後でこの時間を使うため、ここでは午前10時
  • Start Date, End Date : 任意
  • Send report to : 自分のGmailアドレス
  • Include report as an attachment : チェック
  • Include total row : チェックを外す
最後に、「Save and run」または「Save」をクリックします。「Save and run」をクリックすると実行されてGmail宛にレポートが添付ファイル付きで届きますので、「Save and run」をクリックして、ファイルを実際に確認することをおすすめします。 Bing Adsの設定は以上になります。

Google Analyticsのデータインポート

次にGoogle AnalyticsにBingの広告データをインポートする箱を用意します。

Google AnalyticsのアカウントIDとプロパティIDを取得

Google Analyticsへログインして、データをインポートしたいプロパティを選びます。このアカウントID(下の画像では4517…の部分)とプロパティID(UA-4517…-1の部分)を後で使うのでメモしておいてください。

Google Analyticsのデータセット作成

次にGoogle Analyticsでデータをインポートするため箱を作ります。 左下にある「管理」からプロパティ→データインポートをクリックします。 この時、アカウントおよびプロパティが間違っていない事を確認しましょう。 データスキーマの一覧と、左上に「CREATE」ボタンが表示されますので、これをクリックして作成します。

データセットタイプ

最初にデータの種類を選択します。ここでは一番下にある「Cost Data」(費用データ)を選択します。

データセット名と紐付けるビューの選択

次にこのデータセットの名前を入力します。日本語でも英語でもOKです。他で使うことはありませんが、わかりやすい名前(例:○○クライアント Bing広告)にしたほうが良いでしょう。 その下でこのデータセットを使うビューを選択します。特に表示させたくないビューがなければすべて選んでも構いませんが、広告レポート等以外では使うことがあまりないと思います。

カラムの選択

最後にこのデータセットのカラムの選択をします。 最初の表に3項目(Date,Medium,Source)ありますが、これらは必須なのでそのままで構いません。 2つ目の表からは、
  • Clicks
  • Cost
  • Impressions
をこの順番で選びます。 最後の表からは、
  • Ad Content
  • Campaign
  • Keyword
をやはりこの順番で選びます。 最後の「Import Behavior」では「Summation」を選択して、「Save」をクリックします。
補足:Import Behaviorについて
データの中に重複する行が存在する場合に、合計するか(=Summation)?最後の行のみを採用するか(=Overwrite)?の選択になります。 Bingのキーワードの設定が不十分だと重複する行が存在するので、Overwriteにしてしまうと、最後にインポートした行のみが結果として反映されてしまいます。そのため、今回は合計を選びます。

データセットIDをメモ

設定完了後、データセット一覧の画面に戻ります。そこで今作ったデータセットが作成されていることを確認し、右側の「Data Set ID」の列に書かれている文字列(下記の画像では-3esA….MA)をメモしておいてください。 Google Analytics側の設定は以上で終了です。

Google Sheetの設定

次にGoogle Sheetでの設定になります。

Google Analytics APIを有効

まずは、Google AnalyticsにアクセスできるアカウントでGoogleにログインして、Google Sheetで新しいスプレッドシートを開きます。 メニューから「アドオン」→「アドオンを取得」をクリックします。 検索フォームに「Google Analytics」と入力するとGoogle Analyticsが出てきますので、それをクリックします。 Google Analyticsのウィンドウが表示されますので、「インストール」をクリックします。(※バージョンによって画面が画像と異なるかもしれません) すると、「インストールの準備」というウィンドウが新しく表示されるので「続行」をクリックします。 今度はアカウントを選択するウィンドウが表示されますので、Google Analyticsに実際にアクセスするアカウントを選択してください。(問題なければ最初にログインしたアカウントが表示されますが、複数のアカウントでログインしているとアカウントがいくつか出てきますので気をつけてください。 さらに次は確認画面になりますので、「許可」をクリックしてください。 最後に完了画面が出てきますので、クリックしたら完了です。 Google Sheetの画面に戻りますので、「アドオン」をクリックすると「Google Analytics」が追加されていればOKです。

基本設定をSheetに記入

Google Sheetに下記のようにBing、Google Analyticsの情報を入力します。カッコ内は前述の設定した時に使用したものになります。
  • A:名前(任意)
  • B:Google Analyticsのアカウント(4517…)
  • C:Google AnalyticsのプロパティID(UA-4517…-1)
  • D:Google AnalytisのDataSet(-3esA…….MA)
  • E:スキーマ(ga:date,ga:medium,ga:source,ga:adClicks,ga:adCost,ga:impressions,ga:adContent,ga:campaign,ga:keyword)※変更しないでください
  • F:Bingから送られてくるメールの件名(Your scheduled report is ready to view)
  • G:レポート名(ABC_DailyReport.zip)
  • H:Bingのauto-taggingの設定(通常はON1)
  • I:Bingのレポート画面で設定したレポートの送り先メールアドレス([email protected]

Google Apps ScriptでのGAへインポート

ようやくここからが今回の本番のスクリプト部分になります。 (書いてるだけで疲れました。。。) 今回はGoogle Apps Scriptになります。Google Apps Scriptはあまり馴染みがないかもしれませんが、基本的な部分はJavaScriptと同じでですので、JavaScriptの概念や関数の作り方などがわかればそれほど苦労しないと思います。 今回のスクリプトは以下の流れになります。
  1. Google Sheetから情報を読み込む
  2. Gmailからメールを検索
  3. Gmailからzipファイルを取得
  4. ファイルを解凍し、データを取得
  5. データをGoogle Analytics用に加工
  6. データをGoogle Analyticsにアップロード
  7. データがGoogle Analyticsにアップされていることを確認
なお、Google Apps ScriptはGoogle Sheetの「ツール」から「スクリプト エディタ」を選びます。 すると、Googl Apps Scriptのウィンドウが表示されますので、右側の「コード.gs」と書かれているタブの下にfunction myfunction(){ } と書かれている箇所に入力します。 ※今回はmyfunction()は使用しないので、消してオリジナルの関数を作成していきます。

Google Sheetから情報を読み込む

まず最初に、さきほどGoogle Sheetに入力した情報をこのGoogle Apps Scriptに読み込みます。 関数名はgetConfigとし、この関数を実際に呼び出す際は第1引数のfileKeyにはGoogle Sheetのパスを、sheetNameにはさきほど入力したGoogle Sheetのシート名をそれぞれ入れます。
  • パス:(1w2xXXX……..OJs)
  • シート:(client)
function getConfig(fileKey, sheetName){
  var retConfig = [];
  var spreadsheet = SpreadsheetApp.openById(fileKey);
  var sheet = spreadsheet.getSheetByName(sheetName);
  var tmpLastRow = sheet.getLastRow();
  for(var i = 2;i <= sheet.getLastRow();i++){
    var val = sheet.getRange(i, 1).getValue();
    if (!val) {
      break;
    }else{
      retConfig[i-2] = [];
      retConfig[i-2]['client'] =  sheet.getRange(i,1).getValue();
      retConfig[i-2]['analyticsAccountId'] = Utilities.formatString('%s',sheet.getRange(i, 2).getValue());
      retConfig[i-2]['analyticsPropertyId'] = sheet.getRange(i, 3).getValue();
      retConfig[i-2]['customDataSourceId'] = sheet.getRange(i, 4).getValue();
      retConfig[i-2]['header'] = sheet.getRange(i, 5).getValue();
      retConfig[i-2]['emailSubject'] = sheet.getRange(i, 6).getValue();
      retConfig[i-2]['zipFileName'] = sheet.getRange(i, 7).getValue();
      retConfig[i-2]['autoTagging'] = sheet.getRange(i, 8).getValue();
      retConfig[i-2]['account'] = sheet.getRange(i, 10).getValue();
      retConfig[i-2]['sendTo'] = sheet.getRange(i, 11).getValue();
      retConfig[i-2]['previousZipFileName'] = sheet.getRange(i, 12).getValue();
    }
  }
  return retConfig;
}
いちおう、複数のBing広告データを1回の実行で完了できるように、Google Sheetに記載されている情報をすべて読み込みます。 ただし、途中で1列目が空白の行があるとそこから先は読み込まないようにしています。

Gmailからメールを検索

Gmailからレポートのメールを探します。 Googleは同じブラウザでも複数のアカウントでログインできますので、現在のアカウントと実際に検索するメールアドレスが違うということがよくあります。 そのため、事前に検索するメールアドレスを確認するようにしています。 その後、件名、受信日、添付ファイル名をキーにしてメールを探しますが、Gmailはメールをスレッドという塊で管理しているため、
  1. 件名などからスレッドを探す
  2. 該当する添付ファイルを探す
という2段階で検索します。 Gmailの検索方法については、Gmail で使用できる検索演算子などを参照してください。 8行目で検索期間を指定しています。formatDateAsString(addDaysToDate(new Date(), -1))が昨日、formatDateAsString(new Date())が今日を意味していますが、今日の方は状況によっては翌日formatDateAsString(addDaysToDate(new Date(), 1))にしないと検索に引っかからない場合があります。 日付の指定等によっては2ファイル以上検索に引っかかる場合があります。そのため、私は毎日抽出が終わってからその日のレポートのメールを削除するようにして、25行目のisIntrash関数を使うことでゴミ箱に入っているメールアドレスは除外するようにしています。
// 設定情報を取得
var conf = getConfig(path, sheet);
// アクセスするメールアドレスがGoogle Sheetに記載したアドレスと同じであるかチェック
var msg = null:
if(Session.getActiveUser().getEmail() != conf[i]['account']){
 // アドレスが違うので終了
}else{
 // メールスレッドがmsg変数に入る
 msg = getMessage(conf[i]['emailSubject'], formatDateAsString(addDaysToDate(new Date(), -1)), formatDateAsString(new Date()), conf[i]['zipFileName']);
 if(!msg){
  // メールが存在しなかったので終了
 }
}
function getMessage(subject, after, before, zipfileName){
  var myMsg = null;
  var query = 'subject:' + subject + ' has:attachment ' + 'after:' + after + ' ' + 'before:' + before;
  // Gmailで検索し、スレッド(同じ件名のメールの塊)を探す
  var myThread = GmailApp.search(query);
  // スレッドの中からメールに該当する添付ファイルがあればそれを結果として返す。
  var myMsgs = GmailApp.getMessagesForThreads(myThread);
  for(var threadIndex = 0; threadIndex < myMsgs.length;threadIndex++){
    for(var i = 0;i < myMsgs[threadIndex].length; i++){
      var myMsg =  myMsgs[threadIndex][i];
      if(!myMsg.isInTrash()){
        var attachments =  myMsg.getAttachments(); // GmailAttachment[]
        for (var j = 0; j < attachments.length; j++) {
          var tmpFileName = attachments[j].getName();
          if (attachments[j].getName().match(zipfileName)) {
            return myMsg;
          }
        }
      }
    }
  }
  // メールが見つからない場合はNULLを返す。
  return null;
}

Gmailからzipファイルを取得、解凍、加工

メールが見つかった場合、上記のスクリプトの変数msgにメールオブジェクトが入ります。このmsgオブジェクトから添付ファイルを取得します。 Bingから送られてくるこの添付ファイルはzip形式で圧縮されているので、解凍して必要なデータだけ抽出します。 Bingから送られてくる圧縮ファイルの中身はcsvファイルなので、そのままデータをCSV形式で抽出します。 詳しくは、Google Apps ScriptのClass Utilities.unzip(blob)リファレンスのparseCsv(csv, delimiter)を参照してください。
// conf[i]['zipFileName']:圧縮ファイル名
var csv = findCsvAttachment(msg.getAttachments(), conf[i]['zipFileName']);
// ファイル内に該当する圧縮ファイルがあれば解凍して返す
function findCsvAttachment(attachments, zipFileToSearch) {
  var counter = 0;
  for (var i = 0; i < attachments.length; i++) {
    if (attachments[i].getName().search(zipFileToSearch) != -1) {
      var unzip = Utilities.unzip(attachments[i]);
      var csvData = Utilities.parseCsv(unzip[0].getDataAsString(), ",");
      return csvData;
    }
  }
 // ファイルが見つからなかった場合はnullを返す。
 return null;
}

データをGoogle Analytics用に加工

ここが一番面倒なところで、各自広告データなどによって多少の加工が必要です。 本来、私もBingのAuto TaggingやGoogle Analyticsの設定に合わせるためにロジックを複数用意していますが、そのあたりまで含めるとややこしいコードになるため、今回は省略しました。 もし、詳しく知りたい場合はコメントにて連絡ください。
// Google Analyticsへアップロードする際に必要なヘッダー
    var header = conf[i]['header'];
    // Google Analytics用にデータを加工
    var csvForUpload = processCsv(csv, header);
function processCsv(csvData, header) {
  var dataForUpload = header + '\n';
  var tempData = [];
  var j = 0;
  // 添付ファイルの中身の最初の10行は不要な情報なので飛ばします。
  for (var i = 10; i < csvData.length; i++) {
    // ファイルの中身がなければ次の行へ移動
    if(!csvData[i][1]){
      break;
    }
    var ga_medium = 'cpc';
    var ga_source = 'bing';
    var ga_date = csvData[i][0].replace(/-/g, "");
    var ga_adClick = Number(csvData[i][3]);
    var ga_adCost = Number(csvData[i][4]);
    var ga_impressions = Number(csvData[i][2]);
    var ga_campaign = ''; // utm_campaign
    var ga_keyword = '';// utm_term
    var ga_adContent = '';// utm_content
    var destinationURL = null;
    // BingのadContentなどに[]が入っているとGoogle Analyticsでは削除されて取り込まれているため、事前に除外する
   csvData[i][5]= csvData[i][5].replace('[','').replace(']','');
    ga_campaign =  csvData[i][7];
    ga_adContent = csvData[i][5];
    ga_keyword = csvData[i][6];
    // 各行のデータをGoogle Analytics用に用意したヘッダーと同じ順で並べて配列に格納
    tempData[j]=[ga_date,ga_medium,ga_source,ga_adClick,ga_adCost,ga_impressions,ga_adContent,ga_campaign,ga_keyword]
    j++;
  }
  // Google Analyticsへアップロードするために配列のデータを文字列にまとめる
  for(var i =0; i < tempData.length;i++){
    dataForUpload += tempData[i][0] + ',' + tempData[i][1] + ',' +  tempData[i][2] + ',' + tempData[i][3] + ',' + tempData[i][4].toFixed(2) + ',' + tempData[i][5] + ',\"' + tempData[i][6] + '\"'  +  ',\"' + tempData[i][7] + '\"' + ',\"' + tempData[i][8] + '\"'\n'';
  }
  return dataForUpload;
}

データをGoogle Analyticsにアップロード

ここまで来たらあともう少しです。いよいよ、Google Analyticsにデータをインポートします。コード自体は難しくありませんが、このあたりはもう定型なので変える必要もあまりないでしょう。 珍しい関数についてはリンクを貼っておきます。

// 引数はインポートするデータ、Google Analyticsのアカウント、プロパティID、DatasetのIDの4つ
var analyticsUploadStr = uploadDataToAnalytics(csvForUpload, conf[i]['analyticsAccountId'], conf[i]['analyticsPropertyId'], conf[i]['customDataSourceId']);
function uploadDataToAnalytics(data, accountId, webPropertyId, customDataSourceId) {
  var ret = false;
  try{
    // 前述で作成したアップロード用データを"application/octet-stream"形式でBlobオブジェクトに書き出します。
    var dataBlob = Utilities.newBlob(data, "application/octet-stream", "GA import data");
    // Google Analytics へデータをアップロードし、Idを取得
    var upload = Analytics.Management.Uploads.uploadData(accountId, webPropertyId, customDataSourceId, dataBlob);
    // JSON形式なので変換
    var uploadId = JSON.parse(upload);
    var count = 0;
    var sleepingTime = 10000;
    // アップロードが成功したか?失敗したか?を定期的に確認。
    while(count < 5){
      var status =Analytics.Management.Uploads.get(accountId, webPropertyId , customDataSourceId, uploadId.id );
      status = JSON.parse(status);
      if(status['status'] == 'PENDING'){
        count++;
        Utilities.sleep(sleepingTime*count);
      }else if(status['status'] == 'COMPLETED'){
          ret = status['id'];
        break;
      } else if(status['status'] == 'FAILED'){
        var error = "";
        for(var j=0;j<status.errors.length;j++){
          error += (j+1)+".) "+status.errors[j]+" \n";
          // エラーはログに書き出すなどする
        }
        ret = false;
        break;
      }
    }
  }catch(e) {
    ret = false;
  }finally{
    return ret;
  }
}

ジョブの設定

これでGoogle AnalyticsへBingの広告データをインポートするスクリプトは完了ですが、これを毎日実行しなければならないため、ジョブの設定が必要です。 Google Apps Scriptの「編集」→「現在のプロジェクトのトリガー」をクリックすると、トリガーのウィンドウが表示されます。 このとき、プロジェクトを保存していないとプロジェクトを保存するダイアログが表示されますので、名前はGoogle Sheetと同じ名前でプロジェクトを保存しておきましょう。 ※名前は任意ですが同じにしておいたほうがわかりやすいので。 そこで右下の「トリガーを追加」ボタンをクリックすると、トリガーの設定ダイアログが表示されるので、
  • 実行する関数を選択:呼び出す関数(今回のスクリプトでは作成していませんが呼び出しているコード部分をまとめたものを upload といった名前で関数を作ります)
  • イベントのソースを選択:時間主導型
  • 時間ベースのトリガーのタイプを選択:日付ベースのタイマー
  • 時刻を選択:任意(Bingからメールが届く以降の時間であれば何時でも構わないですが、念のため2時間程度余裕をもたせておいた方が良いです)

メール削除やデータのリフレッシュが必要

Bingはたまにですが、レポートの送付が遅れたり、後日インプレッション数やクリック数が変わったりすることがあります。(Facebookほどではありませんが) そのため、前日のデータのGAにインポートしている場合は、数日後に再アップロードして以前アップロードしたファイルを削除する必要があります。 ※私は面倒くさがりなのと、相談してきた人が「月初に更新されていればOK」ということでしたので、月初にGAから前月のデータをすべて削除して、1ヶ月分のデータをまとめてインポートしています。 さらに、Bingがレポートの送付が遅れると、毎日ジョブを実行する際に、前日のデータが検索結果に含まれてしまう場合があります。それらを避けるために実行後にメールを削除する必要があります。 これらの方法については改めて紹介したいと思います。 ]]>

Categories
アナリティクス

Googleアナリティクスのカスタムアラートのためにビューにも名前をつける

Googleアナリティクスのチェックの工数削減に役立つカスタム・アラート Googleアナリティクスでは、毎日チェックしなくても良いように、カスタムアラート機能があります。 これを設定しておけば、条件を満たすと定期的にメールが送られてきます。アラートの周期を日、週、月単位と3種類の中から選べるのでリアルタイムではありませんが、何かあった時だけチェックをしたい、という時に非常に便利です。

カスタムアラートの運用する前の注意点

アラート自体はとても便利なのですが、下記が実際に送られてくるアラートメールなのですが、複数のアラートがまとめて送られてくるため、2つ問題があります。[caption id="attachment_3776" align="aligncenter" width="289"] Google アナリティクスカスタムアラートメール[/caption]
  1. Gmailなどでフィルターをかけにくい
  2. Gmailではメールの差出人や件名、中身によってフィルターをかけることが可能です。複数のGAプロパティを管理している場合は、プロパティやアラート内容ごとに異なるフィルターを適用させたい事があります。 しかし、見てのとおり複数のアラートがまとめて届くので、「プロパティ1でアラートA」があったら、という条件を指定しようとしても、
    • プロパティ1、アラートB
    • プロパティ2、アラートA
    が発生した場合にもこのフィルターが適用されてしまうので、このままではフィルターの作成が難しいです。
  3. ビューの見分けがつかない
  4. プロパティID、ビュー名、アラート名の表形式で送られてくるため、アラートを多くのビューに設定していると、どのビューによるアラートなのかがわかりにくいです。 さらに、この画像のように、ビュー名をデフォルトにしていると、どれがどのプロパティかさっぱり見当もつかず、結局1つ1つアクセスしないといけなくなり、手間がかかります。

カスタムアラートを上手に使いこなす

これらを防ぐための改善案を考えてみました。
  1. ビュー名を分かりやすい名前に変更
  2. 一番簡単なのは、ドメイン名+ビューの目的です。 (例:abc.com All Data View、メインサイト User-ID View)
  3. アラート名にドメイン名などを追加
  4. これを行うと、同じ内アラート内容でも各ビューで個別にアラートを作成しなければならないので、作成の手間がかかります。
簡単なことなのでGoogleアナリティクスを使っている方は、ぜひカスタムアラートを活用して無駄な閲覧時間を減らしながらも、Googleアナリティクスを効率よく使ってみてください。]]>

Categories
Webマーケティング アナリティクス

要素の中身やデータが変更された時はMutationObserver

onChangeはformでしか使えない 「トップのメイン画像がスライドして表示されたときに拡張eコマースの商品のインプレッションを計測するように」と言われたとき、どうしますか? 「画像がスライドされるならGoogle Tag Managerの『要素の表示』トリガーが使えるのでは?」と思ったのですが、この画像たちはすでに表示されているようになっていて使えないという事実が判明。 画像の横の位置が動的に変わる事でスライドされるように表示されていたので、「javascriptのonChange関数やjQueryのchange関数を使えばできるなぁ」と思ったのですが、onChange関数はselectなどのformでしか使えないという事なのでこれまた却下。 (参考:HTML onchange Event Attribute(w3schools.com)

要素の属性値などを監視するMutationObserver

今回、この画像を含むdivではいくつかの要素の属性値が変わっていました。そこで今回は、MutationObserverクラスを使います。

MutationObserverクラスで指定の要素を監視

// 1.監視する対象のIDを指定
var targetNode = document.getElementById('XXXXX');
// 2.MutationObserverのオプションを実行前に指定
var config = { attributes: true, , attributeFilter: ['class','属性名'], childList: true, subtree: true };
// 3. 変更があった時に実行したい処理をここに記述
var callback = function(mutationsList, observer) {
    for(var mutation of mutationsList) {
         if (mutation.type == 'attributes') {
            // 属性が変わった時に実行したい場合はここに書く
            console.log(mutation.attributeName + ' が変わりました');
        }else if (mutation.type == 'characterData') {
            // データが変わった時に実行したい場合はここに書く
        }else if (mutation.type == 'childList') {
            // 対象ノードの子ノード(テキストノードも含む)が変わった時に実行したい場合はここに書く
        }
    }
};
// 4. MutationObserverインスタンスの作成
var observer = new MutationObserver(callback);
// 5. 対象ノードの監視開始
observer.observe(targetNode, config);
// 6. 監視を終了するときにはdisconnect()を実行
// observer.disconnect();

MutationObserverオプションはできるだけ設定すべき

2のMutationObserverのオプションのうち、attribute、characterData、childListは必ず設定しておくことをお勧めします。特にchildListをfalseにしないと、子ノードに変更があった場合にもイベントが発生するため、注意しましょう。

MutationObserverのオプション一覧

childList対象ノードの子ノード(テキストノードも含む)に対する追加・削除を監視する場合は true にします。
attributes対象ノードの属性に対する変更を監視する場合は true にします。
characterData対象ノードのデータに対する変更を監視する場合は true にします。
subtree対象ノードとその子孫ノードに対する変更を監視する場合は true にします。
attributeOldValue対象ノードの変更前の属性値を記録する場合は true にします(attributes が true の時に有効)。
characterDataOldValue対象ノードの変更前のデータを記録する場合は true にします(characterData が true の時に有効)。
attributeFilterすべての属性の変更を監視する必要がない場合は、(名前空間を除いた)属性ローカル名の配列を指定します。
3のif句内で実行したいことを記述します。今回は分けていますが、属性の変更時のみだけで良い場合は、最初のif部分だけで構いません。上にも書いていますが、子ノードの変更を監視したくない場合はわざと if (mutation.type == ‘childList’) 句を用意して中身を空欄にしておくなどしておいた方が安全です。 4と5はお決まりの書き方なので、そのまま使ってください。 6については終了させたいときに呼び出してください。]]>

Categories
Webマーケティング アナリティクス

複数のトリガーをすべて満たしたら発生させるトリガーグループ

複数のトリガーを条件に使える新機能「トリガーグループ」 Googleタグマネージャーを使っていると、ある条件を満たした後に、異なる別の条件を満たした場合にのみイベントを発生させたい、ということはありませんでしたか?たとえば、ページ内にあるいいねボタンをクリックした場合ではく、ページ内の動画を1分以上見た後に、いいねボタンを押した場合にイベント発生させたい、といったケースです。 Google Tag Managerが2019年3月下旬に突然、「トリガーグループ」という新たなトリガーをリリースしました。

トリガーグループの用途

トリガーグループの主な使い道は複数のトリガーを同一ページ内で発生した場合に発生させる時に有効です。 主に、
  • ページスクロール
  • 閲覧時間
  • ページ内のボタンクリック(遷移しない)
  • 動画閲覧
といった場合の組み合わせになるでしょう。

トリガーグループの作り方

トリガーグループの作り方はとても簡単です。
  1. 新規トリガーの作成
  2. トリガーグループを選択
  3. 必要なトリガーを選択

  4. 発生させる条件を設定(必要であれば)

注意点

とても簡単に作れるトリガーグループですが、いくつか注意点があります。

ページ遷移をしたときは発火しない

ページ遷移をしてしまうとトリガーが初期化されてしまうので、使えません。

発火の順番は指定できない

上記の例で言うと、フッターまでスクロールするのが先の場合でも、レビューを表示させるのが先の場合でもどちらでもこのトリガーグループは発火してしまいます。 順番を指定したい場合は、変数を用意して、各トリガーが発火するタイミングで変数に値(例:トリガー名)を挿入し、後のトリガーが発火した際に、最新の変数の値が2つ目のトリガーの値になっているか?という条件を入れると良いでしょう。

トリガーの発生タイミングは最後のトリガーの発火タイミングではない

これは少々ややこしいのですが、トリガーグループで指定されているトリガーのうち、最後のトリガーが発火された後にgtm.triggerGroupというトリガーが発火されます。このタイミングではじめてタグが実行されます。

1つのトリガーグループは1度しか発生しない

gtm.triggerGroupが1度しか発火しないため、各トリガーの発生回数を制限していなくてもこのトリガーグループは1回しか発火されません。 ]]>

Categories
アナリティクス

Google Tag Managerが入ってなくてもテストできる、Tag Manager Injector

Google Tag Managerは万能

Google Analyticsを使うときにはGoogle Tag Managerを使うのが当然のようになってきたので、Google Tag Manager上でコードを書いたり設定すれば、Webの管理者権限が無くてもコードを追加できますし、プレビュー状態でテストもできたりします。だから、もうGoogle Tag Managerは手放せませんよね。 ですが、そもそもGoogle Tag Managerがサイトに埋め込まれていなかった場合はどうしましょうか?Webの担当者に連絡して入れてもらうまでは待つしかありません。 ですが、このようにそもそもGTMが入っていないサイトでGTMをテストできるようにするのが「Tag Manager Injector」です。

Tag Manager Injectorのインストール方法

Tag Manager InjectorはGoogle Chromeの拡張機能なので、ChromeのWeb Storeから無料でダウンロードできます。 右側にある「Chromeに追加」ボタンをクリックすれば自動的にインストールが開始されます。

使い方は簡単

Tag Manager InjectorをChromeにインストールしたら、他の拡張機能と同じようにブラウザの右上にアイコンが表示されるのでクリックします。 すると、下の画像のようなウィンドウが表示されるので、
  • GTMのコンテナID
  • GTMを実行させたいドメイン名
  • データレイヤーに入れたい値(任意)
を入力して、右下にある「START」ボタンをクリックします。すると、一番下に「GTM containar “GTM-XXXX” now active」と表示されますので、これでこのGTMが指定したドメイン内で実行されます。 終了するときは、最初にクリックしたブラウザの右上のアイコンをクリックしてこのウィンドウを開いてから、「STOP」ボタンをクリックすると終了します。

こんな時に便利

GTMがすでに入っているサイトでは必要ありませんが、
  • Web管理者ではないサイトに新規にインストールしたい
  • すでにGTMは入っているけど、別のGTMでテストしたい
  • 他のサイトでどのように動くか見てみたい
といったときに便利です。 Google Tag Managerのプレビューモードだと自動的にデバッガーが表示されますが、このInjectorでは起動されません。その場合、Google Chromeの拡張機能の「dataslayer」を一緒に使うと便利です。]]>