ZeroScript

ゼロからわかるスクリプト

【コピペ】Googleアナリティクスの日報をLINEに通知する方法

f:id:tabemi:20210531210053j:plain

どうも、たべみです。

今回は、サイトの分析ツールであるGoogleアナリティクスのデータを毎日LINEに通知する方法をご紹介します。

難しそう、、と思われるかもしれませんが、9割5分コピペで大丈夫なのでご安心ください。

目次

できるもの

公式LINEチャンネルから、Googleアナリティクスで計測された前日のデータが毎朝8時に送られます。なお、データが送られるのは1名のみとなります。

送られるデータは、ページごとの

  • ページビュー数
  • セッション数
  • 平均セッション時間
  • 離脱率

となります!

ページビュー数の上位10ページのみの送信となります!
また、Googleアカウントに紐づいているすべてのサイトのデータが送信されます。

例えば、1つのアカウントで、2つのサイトをモニタリングしていた場合、それぞれのサイトのページビュー数上位10ページのデータが送信されます


毎朝確認するには十分の指標ですね~

別途確認したい項目あれば、コメントしてください!


今回の作業概要

では、大まかに作業内容を確認します。

  1. 新しいスプレッドシートからエディタを開く
  2. コードをコピペする
  3. 公式LINEチャンネルとプログラムを紐づける

1.新しいスプレッドシートからエディタを開く

では、作業を開始していきます。
まずは、プログラムをコピペする場所を開いていきます!

こちらの記事に詳しく解説しているので、ご覧下さい。早ければ1分の作業です!
oiho.net

2.コードをコピペする


では、開いたスクリプトエディタにコードをコピぺしていきます。
コピペのほかに操作がありますので、お見逃しなく!

2-1.コードをコピペする

現在書いてあるコードをすべて削除してください!

削除)

function myFunction() {

}


下のコードをもれなくコピペしてください。

貼付)

const ACCESS_TOKEN = "【ここを削除】";

function init() {
  //毎日9時にレポートを出力する
  ScriptApp.newTrigger('main').timeBased().atHour(9).everyDays(1).create();
}

//最初にメッセージを送ったユーザーIDを取得する
function doPost(e) {
  //すでにuserIdが存在していれば何もしない
  if (PropertiesService.getScriptProperties().getProperty('to')) return ;
  const responseLine = e.postData.getDataAsString();

  const event = JSON.parse(responseLine).events[0];
  const userID = event.source.userId;
  PropertiesService.getScriptProperties().setProperty('to', userID);
  
}

function main() {
  const to = PropertiesService.getScriptProperties().getProperty('to');
  if(!to)return ;
  const lists = getLists();
  for (let i = 0; i < lists.length; i++) {
    const messages = createMessages(lists[i]);
    postLine(messages, to);
  }
}

//line にメッセージを送る
function postLine(messages, to) {
  const url = "https://api.line.me/v2/bot/message/push";
  const headers = {
    "Content-Type": "application/json; charset=UTF-8",
    'Authorization': 'Bearer ' + ACCESS_TOKEN,
  };
  
  
  const payload = { to , messages };
  const options = {
    "method": "post",
    headers,
    "payload": JSON.stringify(payload)
  };
  try{
    UrlFetchApp.fetch(url, options);
  }catch(e){
    console.log(e);
  }
}

// messageオブジェクトを作成する
function createMessages({ accountName, webPropertyName, profileName, report }) {
  const messageHeader = "Analytics Report\n\n" +accountName +"\n" +webPropertyName +"\n" +profileName +"\n\n";
  if (!report) return [{ "type": "text", "text": messageHeader +"データがありません" }];

  const header = ['ページビュー', 'セッション', '平均セッション時間', '離脱率'];
  const diplayText = report.reduce((text, r) => {
    const [path, title, ...indexes] = r;

    const t = indexes.reduce((indexesText, index, i) => {
      return indexesText + '\n\t' + header[i] + ': ' + index;
    }, `path: ${path}\n${title}`);
    return text + t + '\n\n';
  }, messageHeader);
  console.log(diplayText);
  return [{ "type": "text", "text": diplayText }];
}

/**
 * account内すべてのサイト情報を取得する
 * @return {array{}}
 */
function getLists() {
  const accounts = Analytics.Management.Accounts.list();
  if (!accounts.items || !accounts.items.length) return;
  const listReports = accounts.items.reduce((a, account) => {
    const accountId = account.id;
    const accountName = account.name;
    const webProperties = Analytics.Management.Webproperties.list(accountId);
    if (!webProperties.items || !webProperties.items.length) return a;
    const listProfiles = webProperties.items.reduce((b, webProperty) => {
      const webPropertyId = webProperty.id;
      const webPropertyName = webProperty.name;
      const profiles = Analytics.Management.Profiles.list(accountId, webPropertyId);
      if (!profiles.items || !profiles.items.length) return b;
      const reports = profiles.items.reduce((c, profile) => {
        const profileId = profile.id;
        const profileName = profile.name;
        const report = runReport(profileId);
        return [...c, { accountName, webPropertyName, profileName, report }];
      }, []);
      return [...b, ...reports];
    }, []);
    return [...a, ...listProfiles];
  }, []);

  console.log(listReports);
  return listReports;
} // const getWebproperty = (accountId) => {


//サイトのidからレポートを取得する
function runReport(id) {
  const tableId = 'ga:' + id;
  const today = new Date();
  const yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000);
  const date =  Utilities.formatDate(yesterday, Session.getScriptTimeZone(), 'yyyy-MM-dd');
  // const twodaysago = new Date(today.getTime() -2 *24 * 60 * 60 * 1000);
  // const startDate = Utilities.formatDate(yesterday, Session.getScriptTimeZone(), 'yyyy-MM-dd');
  // const endDate = Utilities.formatDate(yesterday, Session.getScriptTimeZone(), 'yyyy-MM-dd');
  const metric = 'ga:pageviews,ga:sessions,ga:avgSessionDuration,ga:bounceRate';
  const options = {
    'dimensions': 'ga:pagePath,ga:pageTitle',
    'sort': '-ga:pageviews',
    'max-results': 10
  };
  const report = Analytics.Data.Ga.get(tableId, date, date, metric, options);
  return report.rows;
}

コードのコピペは以上となります。
このページは開いたままにしておきましょう

2-2.拡張機能にアナリティクスを追加する

このGoogle Apps ScriptからGoogleアナリティクスのデータを簡単に取得できる拡張機能を追加します。

  1. エディタ左側の「サービス +」のプラスをクリック
  2. Google Analytics API」を選択
  3. 「追加」をクリック

Google Analytics APIですのでご注意ください!!

f:id:tabemi:20210531211819p:plain:w300
サービス欄の + をクリック
f:id:tabemi:20210531212358p:plain:w300
Google Analytics API を選択して追加

3.公式LINEチャンネルとプログラムを紐づける

では、公式LINEチャンネルとコピペしたプログラムを紐づけていきます。

大まかな流れはコチラです。

  1. 公式LINEチャンネルのアクセストークンを取得する
  2. コードにアクセストークンを設定する
  3. プログラムを実行する
  4. プログラムをデプロイする
  5. デプロイURLを公式LINEに設定する
  6. 公式LINEチャンネルと友達になる

3-1.公式LINEチャンネルのアクセストークンを取得する

公式LINEチャンネルのアクセストークンの取得方法はこちらの記事をご覧ください。早くて10分ほどで完了します
公式LINEチャンネルを持っていない!という方も、こちらをご覧ください

oiho.net

3-2.コードにアクセストークンを設定する

それでは、取得したアクセストークンをコードに設定していきます。これでプログラムから公式LINEチャンネルのBOTを使用することができるようになります

先ほどコードをコピペしたスクリプトエディタをご覧ください。
1行目に下の文字が羅列されています。

const ACCESS_TOKEN = "【ここを削除】";

このコードにアクセストークンを設定します。
ここでは分かりやすさのため、アクセストークンが 0123456789 であったと仮定して説明いたします!

まずは【ここを削除】を括弧も含めて削除しましょう。

const ACCESS_TOKEN = "";

ダブルクォーテーションが二つ残りました。ここに公式LINEチャンネルのアクセストークンを貼り付けてください。

貼り付け後

const ACCESS_TOKEN = "0123456789";

このようになると思います。
実際は、0123456789 の代わりに皆さんが取得した公式LINEチャンネルのアクセストークンが設定します!

Google Apps Script エディタ画面
実際のアクセストークンを貼り付けたときの画像。アクセストークンが長いため、2行になるかもしれません。

3-3.プログラムを実行する

先ほどコードをコピペしたエディタ画面の上部に注目してみましょう。再生ボタンのようなアイコンがあるかと思います。押してみましょう。

f:id:tabemi:20210523162409p:plain
実行ボタンをクリック

すると、、ウィンドウが出てきますね。。

f:id:tabemi:20210523162329p:plain
ウィンドウが出てくる。「権限を確認」をクリック。キャンセルは押しません。

これの処理方法は以下の記事にまとめてあります。とはいっても30秒ほどで完了するので気楽にいきましょう!!
選択肢にはすべてYESを選ぶという気持ちでOKですよ。
oiho.net


上の承認作業終了後、黄色く「実行完了」が出ていればOKです!

エディタ画面
出てくる表示は少し違います。

でない!という方は、もう一度▶ボタンを押してみましょう。

3-4.プログラムをデプロイする

次は、公式LINEチャンネルにてメッセージが送信された場合に、プログラムが起動するように設定をしていきます。

そのままエディタ画面を開いたままにして、今度は、
プログラムが公式LINEにメッセージを送るためのURLを発行します。

手順はこちらです。

  1. エディタ画面の右上、「デプロイ」をクリック
  2. 「新しいデプロイ」を選択
  3. 種類の選択の歯車アイコンをクリック
  4. ページ下方、アクセスできるユーザーを「全員」にする
  5. 「デプロイ」
  6. 「ウェブアプリ」の下にある「https://」で始まるURLをコピー

こちらのURLもアクセストークンと同様に、自分以外にむやみに公開しないようにしましょう!

エディタ画面
「デプロイ」>「新しいデプロイ」とクリックする
エディタ画面
歯車アイコンをクリックし、「ウェブアプリ」を選択
エディタ画面
一番下の「アクセスできるユーザー」を「全員」にして「デプロイ」
デプロイ画面
デプロイ完了後の画面。URLをコピーしておく。

3-5.デプロイURLを公式LINEに設定する

先ほど発行したURLを公式LINEに設定をして、メッセージが送信されるたびにプログラムが呼び出されるようにします。

先ほどアクセストークンを取得したページに移動します。
LINEの開発者向けのページであるコンソール

  1. 「Message API設定」の「Webhook URL」に発行したURLを設定します。
  2. Webhookの利用」をオンにします。

以上でメッセージ送信されるとプログラムが起動するようになりました!

Webhook設定後の画像
Webhook設定後

3-6.公式LINEチャンネルと友達になる

上で開いた「Message API設定」にQRコードがあるかと思います。

これをお手持ちのスマホで読み取り友達に追加しましょう!

そして、なにかメッセージを送信してください。
メッセージを送ることによって、あなたのみにアナリティクスの情報を送るように設定されます!

一番初めにメッセージを送ったアカウントにしかデータが送付されないのでご注意ください!!

ちなみに、メッセージに対する返信は何も設定していない場合、「メッセージありがとうございます。~~」と送信されます。この内容は特に今回の作成に関係ありません

最後に

以上で、LINEに毎朝8時にアナリティクスのデータが送信されます!
明日の朝が楽しみですね~


お役に立てていることを祈ります!!

ではでは~