Gatsby で Google Analytics Reporting API を使って人気の投稿一覧を作成する方法

npm i --save googleapis google-auth-library

exports.createSchemaCustomization = ({ actions, schema }) => {
  const { createTypes } = actions

  createPupularPage()

  // `IPopularPage` と `PopularPage` を作成する
  function createPupularPage() {
    createTypes(`
      interface IPopularPage @nodeInterface {
        id: ID!
        path: String!
        title: String!
        count: Int!
      }
    `)

    createTypes(
      schema.buildObjectType({
        name: `PopularPage`,
        fields: {
          id: { type: `ID!` },
          path: { type: `String!` },
          title: { type: `String!` },
          count: { type: `Int!` },
        },
        interfaces: [`Node`, `IPopularPage`],
      })
    )
  }
}

exports.sourceNodes = async ({ actions, createNodeId, createContentDigest, reporter }) => {
  const { createNode } = actions

  await addPopularPageNodes()

  // `PopularPage` のノードを追加する
  async function addPopularPageNodes() {
    // Reporting API の利用に必要なデータを取ってくる
    const CREDS = process.env['GCP_CREDS']
    const VIEW_ID = process.env['GCP_VIEW_ID']

    if (!CREDS || !VIEW_ID) {
      reporter.panic(`GCP credentials missing.`)
      return
    }

    const client = auth.fromJSON(JSON.parse(CREDS))
    client.scopes = [`https://www.googleapis.com/auth/analytics.readonly`]

    const analyticsreporting = google.analyticsreporting({
      version: 'v4',
      auth: client,
    })

    // 実際に API にリクエストをかけてデータを取得する
    // ここでは以下の条件でデータを取得しています
    // 期間: 30 日前から当日まで
    // ディメンション: ページパスとページタイトル
    // 指標: セッション数
    // 絞り込み: ページパスが `/content/` から始まるものに限定
    // 並び順: セッション数の降順
    // データ取得数: 20 件
    const res = await analyticsreporting.reports.batchGet({
      requestBody: {
        reportRequests: [
          {
            viewId: VIEW_ID,
            dateRanges: [
              {
                startDate: '30daysAgo',
                endDate: 'today',
              }
            ],
            dimensions: [
              {
                name: 'ga:pagePath'
              },
              {
                name: 'ga:pageTitle'
              }
            ],
            metrics: [
              {
                expression: 'ga:sessions',
              }
            ],
            filtersExpression: `ga:pagePath=~^/content/`,
            orderBys: {
              fieldName: 'ga:sessions',
              sortOrder: 'DESCENDING',
            },
            pageSize: 20
          }
        ]
      }
    })

    // データが取得できなければ終了
    if (res.statusText !== 'OK') {
      reporter.panic(`Reporting API response status is not OK.`)
      return
    }

    // レスポンスからデータを抽出して node として保存する
    const [report] = res.data.reports
    const dimensions = report.columnHeader.dimensions
    const rows = report.data.rows
    for (let row of rows) {
      let valueMap = mapFromArray(dimensions, row.dimensions)

      let data = {
        path: valueMap['ga:pagePath'],
        title: valueMap['ga:pageTitle'],
        count: parseInt(row.metrics[0].values[0], 10),
      }

      let nodeMeta = {
        id: createNodeId(`PopularPage-${data.path}`),
        parent: null,
        children: [],
        internal: {
          type: `PopularPage`,
          contentDigest: createContentDigest(data),
        },
      }

      let node = Object.assign({}, data, nodeMeta)
      createNode(node)
    }
  }
}

const CREDS = process.env['GCP_CREDS']
    const VIEW_ID = process.env['GCP_VIEW_ID']

GCP_CREDS=$(cat gcp-credentials.json) GCP_VIEW_ID="XXX" npm run develop

/**
 * 2 つの Array から片方をキー、もう片方を値にした Object を作成する
 */
const mapFromArray = (a1, a2) => {
  let valueMap = {}
  for (let i = 0, length = Math.min(a1.length, a2.length); i < length; i++) {
    let v1 = a1[i], v2 = a2[i]
    valueMap[v1] = v2
  }

  return valueMap
}

query MyQuery {
  allPopularPage(sort: {fields: count, order: DESC}) {
    edges {
      node {
        count
        path
        title
        id
      }
    }
  }
}

{
  "data": {
    "allPopularPage": {
      "edges": [
        {
          "node": {
            "count": 5000,
            "path": "/content/a/",
            "title": "title A",
            "id": "04b41138-e627-589b-9ad9-b02b175f234f"
          }
        },
        {
          "node": {
            "count": 4000,
            "path": "/content/b/",
            "title": "title B",
            "id": "9265c3c7-54c0-5c76-9b91-f0385961ad3f"
          }
        },
        {
          "node": {
            "count": 3000,
            "path": "/content/c/",
            "title": "title C",
            "id": "5d1ef857-950c-530e-9868-94f10853aa93"
          }
        },
        {
          "node": {
            "count": 2000,
            "path": "/content/d/",
            "title": "title D",
            "id": "5382f2e4-81ab-527d-a50d-a9288af738c0"
          }
        },
        {
          "node": {
            "count": 1000,
            "path": "/content/e/",
            "title": "title E",
            "id": "99c03347-1343-5327-aa2f-2cfc03e4582c"
          }
        },
      ]
    }
  }
}

import React from "react"
import { Link, useStaticQuery, graphql } from "gatsby"

const PopularPosts = () => {
  const data = useStaticQuery(graphql`
    PopularPageQuery {
      allPopularPage(sort: {fields: count, order: DESC}, limit: 5) {
        nodes {
          id
          path
          title
          count
        }
      }
    }
  `)

  const posts = data.allPopularPage.nodes

  if (posts.length < 1) {
    return ``
  }

  return <ol>
    {posts.map((post) => (
      <li key={post.id} >
        <a as={Link} to={post.path}>
          {post.title}
        </a>
      </li>
    ))}
  </ol>
}

export default PopularPosts