Merge pull request #13 from solocommand/google-analytics

Google analytics
cygnusb2b · Jul 30, 2018 · 40d7109 · 40d7109
2 parents df1928d + ba99512
commit 40d7109
Show file tree

Hide file tree

Showing 15 changed files with 286 additions and 165 deletions.
diff --git a/next.config.js b/next.config.js
@@ -4,7 +4,13 @@ module.exports = {
   distDir: '../.next/build',
 
   webpack: (config, { dev }) => {
-    config.plugins.push(new EnvironmentPlugin(['NODE_ENV']));
+    config.plugins.push(new EnvironmentPlugin(['NODE_ENV', 'GA_TRACKING_ID']));
+
+    config.module.rules.push({
+      test: /\.(graphql|gql)$/,
+      exclude: /node_modules/,
+      loader: 'graphql-tag/loader',
+    });
 
     if (dev) {
       config.module.rules.push({

diff --git a/src/components/AccountProvider.jsx b/src/components/AccountProvider.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Query } from 'react-apollo';
+import PropTypes from 'prop-types';
+import query from '../gql/account.graphql';
+
+export const AccountContext = React.createContext({});
+
+export const AccountProvider = props => (
+  <Query query={query}>
+    {({ error, data }) => {
+      if (error) return <p><strong>{error.message}</strong></p>;
+      return (
+        <AccountContext.Provider value={data}>
+          {props.children}
+        </AccountContext.Provider>
+      );
+    }}
+  </Query>
+);
+
+
+AccountProvider.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]).isRequired,
+
+};
+
diff --git a/src/components/Analytics.jsx b/src/components/Analytics.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { pageview } from '../lib/gtag';
+
+class Analytics extends React.Component {
+  componentDidMount() {
+    pageview(this.props.accountKey, this.props.storyId);
+  }
+
+  render() {
+    return (
+      <div className="ga-track" />
+    );
+  }
+}
+
+Analytics.defaultProps = {
+  storyId: undefined,
+};
+
+Analytics.propTypes = {
+  accountKey: PropTypes.string.isRequired,
+  storyId: PropTypes.string,
+};
+
+export default Analytics;
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import Link from 'next/link';
+import { Navbar, NavbarBrand, Nav } from 'reactstrap';
+import NavbarStyle from './NavbarStyle';
+// import Imgix from './Imgix';
+// import { AccountContext } from './AccountProvider';
+
+export default () => (
+  <Navbar expand fixed="top">
+    <NavbarStyle />
+    <Link href="/" passHref>
+      <NavbarBrand>
+        {/* <AccountContext.Consumer>
+          {({ branding }) => {
+            return (
+              <Imgix
+                className="d-flex bg-imgIx img-fluid"
+                src={branding.logo.url}
+                alt={branding.name}
+                title={branding.name}
+                w="250"
+                h="45"
+              />
+          ) }}
+        </AccountContext.Consumer> */}
+      </NavbarBrand>
+    </Link>
+    <Nav className="mr-auto" navbar>
+      {/* <ActiveNavItem href="/" title="Home">Home</ActiveNavItem>
+      <ActiveNavItem href="/about" title="About">About</ActiveNavItem> */}
+    </Nav>
+  </Navbar>
+);
diff --git a/src/components/NavbarStyle.jsx b/src/components/NavbarStyle.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export default () => (
+  <style jsx global>{`
+    nav.fixed-top {
+      transition: top 0.1s ease-in-out;
+      transition: background-color 0.1s ease-in-out;
+      background-color: transparent;
+    }
+    .fixed-top.nav-down {
+      background-color: rgba(0,0,0,0.75);
+    }
+    .fixed-top.nav-up {
+      top: -71px;
+    }
+  `}
+  </style>
+);
diff --git a/src/components/PageWrapper.jsx b/src/components/PageWrapper.jsx
@@ -1,52 +1,15 @@
 import React from 'react';
-import Link from 'next/link';
-import {
-  Navbar,
-  NavbarBrand,
-  Nav,
-} from 'reactstrap';
 import PropTypes from 'prop-types';
-import Imgix from './Imgix';
-// import ActiveNavItem from '../components/ActiveNavItem';
-
-const brand = {
-  name: 'Firehouse.com',
-  logo: {
-    src: 'https://fortnight.imgix.net/ebm/5b476cd5e4f5510001847c65/fh_logo.png',
-  },
-};
+import { AccountProvider } from './AccountProvider';
+import Navbar from './Navbar';
 
 const PageWrapper = props => (
-  <div>
-    <style jsx global>{`
-        nav.fixed-top {
-          transition: top 0.1s ease-in-out;
-          transition: background-color 0.1s ease-in-out;
-          background-color: transparent;
-        }
-        .fixed-top.nav-down {
-          background-color: rgba(0,0,0,0.75);
-        }
-        .fixed-top.nav-up {
-          top: -71px;
-        }
-      `}
-    </style>
-    <Navbar expand fixed="top">
-      <Link href="/" passHref>
-        <NavbarBrand>
-          <Imgix className="d-flex bg-imgIx img-fluid" src={brand.logo.src} alt={brand.name} title={brand.name} w="250" h="45" />
-        </NavbarBrand>
-      </Link>
-      <Nav className="mr-auto" navbar>
-        {/* <ActiveNavItem href="/" title="Home">Home</ActiveNavItem>
-        <ActiveNavItem href="/about" title="About">About</ActiveNavItem> */}
-      </Nav>
-    </Navbar>
+  <AccountProvider>
+    <Navbar />
     <section>
       {props.children}
     </section>
-  </div>
+  </AccountProvider>
 );
 
 PageWrapper.propTypes = {

diff --git a/src/components/Story/Header.jsx b/src/components/Story/Header.jsx
@@ -1,75 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Head from 'next/head';
-import {
-  Row,
-  Col,
-  Container,
-} from 'reactstrap';
+import { Row, Col, Container } from 'reactstrap';
 import Imgix from '../Imgix';
+import HeaderStyle from './HeaderStyle';
 
 const Header = (props) => {
   const {
-    title, primaryImgSrc, primaryImgCaption, teaser,
+    title,
+    primaryImgSrc,
+    primaryImgCaption,
+    teaser,
   } = props;
 
   return (
     <div className="story-header">
-      <style jsx global>{`
-        a.card-title {
-          color: white;
-        }
-        div.story-header {
-          background-color: #000;
-        }
-        div.story-header > div {
-          max-width:1700px;
-          margin: 0 auto;
-        }
-        div.bg-imgIx {
-          height: 80vh;
-          background: url() center/cover no-repeat fixed;
-        }
-
-        div.bg-imgIx:before {
-          backgound: transparent;
-          transition: background 0.5s linear;
-          margin-bottom: 20vh;
-        }
-
-        div.bg-imgIx:before {
-          content: '';
-          position: absolute;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          left: 0;
-          background:rgba(0,0,0,0.45);
-          -webkit-transition: background 1.5s ease-out;
-          -moz-transition: background 1.5s ease-out;
-          -o-transition: background 1.5s ease-out;
-          transition: background 1.5s ease-out;
-        }
-
-        @media screen and (min-width: 1600px) {
-          div.bg-imgIx:before {
-            background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.25) 300px, rgba(0,0,0,0.25) calc(100% - 300px), rgba(0,0,0,1) 100%); /* FF3.6-15 */
-            background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0.25) 300px,rgba(0,0,0,0.25) calc(100% - 300px),rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
-            background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0.25) 300px,rgba(0,0,0,0.25) calc(100% - 300px),rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
-            max-width: 1700px;
-            margin-left: auto;
-            margin-right: auto;
-          }
-        }
-
-        .post-heading h1 {
-          color: #fff;
-          font-size: 5vmax;
-          font-family: 'Ubuntu', sans-serif;
-        }
-      `}
-      </style>
+      <HeaderStyle />
       <Head>
         <title>{title}</title>
         <meta name="description" story={teaser} />

diff --git a/src/components/Story/HeaderStyle.jsx b/src/components/Story/HeaderStyle.jsx
@@ -0,0 +1,59 @@
+import React from 'react';
+
+export default () => (
+  <style jsx global>{`
+    a.card-title {
+      color: white;
+    }
+    div.story-header {
+      background-color: #000;
+    }
+    div.story-header > div {
+      max-width:1700px;
+      margin: 0 auto;
+    }
+    div.bg-imgIx {
+      height: 80vh;
+      background: url() center/cover no-repeat fixed;
+    }
+
+    div.bg-imgIx:before {
+      backgound: transparent;
+      transition: background 0.5s linear;
+      margin-bottom: 20vh;
+    }
+
+    div.bg-imgIx:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background:rgba(0,0,0,0.45);
+      -webkit-transition: background 1.5s ease-out;
+      -moz-transition: background 1.5s ease-out;
+      -o-transition: background 1.5s ease-out;
+      transition: background 1.5s ease-out;
+    }
+
+    @media screen and (min-width: 1600px) {
+      div.bg-imgIx:before {
+        background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.25) 300px, rgba(0,0,0,0.25) calc(100% - 300px), rgba(0,0,0,1) 100%); /* FF3.6-15 */
+        background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0.25) 300px,rgba(0,0,0,0.25) calc(100% - 300px),rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
+        background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0.25) 300px,rgba(0,0,0,0.25) calc(100% - 300px),rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
+        max-width: 1700px;
+        margin-left: auto;
+        margin-right: auto;
+      }
+    }
+
+    .post-heading h1 {
+      color: #fff;
+      font-size: 5vmax;
+      font-family: 'Ubuntu', sans-serif;
+    }
+  `}
+  </style>
+);
diff --git a/src/gql/account.graphql b/src/gql/account.graphql
@@ -0,0 +1,5 @@
+query AccountBranding {
+    account {
+      key
+    }
+}
diff --git a/src/gql/all-stories.graphql b/src/gql/all-stories.graphql
@@ -0,0 +1,25 @@
+query AllStories($pagination: PaginationInput, $sort: StorySortInput) {
+  allStories(pagination: $pagination, sort: $sort) {
+    totalCount
+    edges {
+      node {
+        id
+        title
+        slug
+        primaryImage {
+          id
+          src
+        }
+        advertiser {
+          id
+          name
+        }
+      }
+      cursor
+    }
+    pageInfo {
+      hasNextPage
+      endCursor
+    }
+  }
+}
diff --git a/src/gql/story.graphql b/src/gql/story.graphql
@@ -0,0 +1,25 @@
+query Story($input: ModelIdInput!) {
+  story(input: $input) {
+    id
+    title
+    teaser
+    body
+    primaryImage {
+      id
+      src
+    }
+    advertiser {
+      id
+      name
+      logo {
+        id
+        src
+        filename
+        mimeType
+        size
+        width
+        height
+      }
+    }
+  }
+}
diff --git a/src/lib/gtag.js b/src/lib/gtag.js
@@ -0,0 +1,11 @@
+const { GA_TRACKING_ID } = process.env;
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+const pageview = (accountKey, storyId) => {
+  window.gtag('event', 'page_view', { accountKey, storyId });
+};
+
+module.exports = {
+  GA_TRACKING_ID,
+  pageview,
+};