Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

Gatsby Source for Most Read Posts from Google Analytics npm version License: MIT Known Vulnerabilities

Get your most read Posts from Google Analytics Reporting API.

Install

You can install this library via NPM or YARN.

NPM

npm i @blackbox-vision/gatsby-source-google-analytics-api-most-read-posts

YARN

yarn add @blackbox-vision/gatsby-source-google-analytics-api-most-read-posts

Config

In your gatsby-config.js:

{
    resolve: `@blackbox-vision/gatsby-source-google-analytics-api-most-read-posts`,
    options: {
        viewId: `115350264`,
        email: `example@domain.com`,
        secretKey: `yourSecretAPIKey`,
        maxResults: 10,
        filters: 'ga:pagePath!@/tag/;ga:pagePath!@/page/;ga:pagePath!=/;ga:pageTitle!=(not set);ga:pagePath!@&',
        dates: {
            from: 'today',
            to: '2019-01-01'
        }
    }
}

Supported Options

Properties Types Default Value Description
viewId string none Your viewId for your Google Analytics property.
email string none The email generated from the Google API Console.
secretKey string none The PEM certificate generated from the Google API Console.
maxResults number 3 Total results to get from the source.
filters string Filters for data from Google Analytics.
dates.from string ‘today’ A date formatted string or an string representing time relation.
dates.to string ‘2019-01-01’ A date formatted string or an string representing time relation.

Example Usage

import React from 'react';
import { StaticQuery, graphql } from 'gatsby';

const gplQuery = graphql`
  query GetAllMostReadPosts {
    allMostReadPosts {
      nodes {
        totalViews
        title
        url
      }
    }
  }
`;

export const MostReadPosts = () => (
  <StaticQuery
    query={gplQuery}
    render={({ allMostReadPosts: { nodes: posts } }) =>
      posts.map((post, idx) => (
        <div key={idx}>
          <a href={post.url}>
            <h2>{post.title}</h2>
          </a>
        </div>
      ))
    }
  />
);

MostReadPosts.displayName = 'MostReadPosts';

Issues

Please, open an issue following one of the issues templates. We will do our best to fix them.

Contributing

If you want to contribute to this project see contributing for more information.

License

Distributed under the MIT license. See LICENSE for more information.

© 2023 Gatsby, Inc.