Skip to content

Latest commit

 

History

History
100 lines (77 loc) · 3.5 KB

File metadata and controls

100 lines (77 loc) · 3.5 KB

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: `[email protected]`,
        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.