terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

With segment (#6060)

Browse source 
RE: https://github.com/zeit/next.js/issues/4587, this pull request improves the with-segment example.

Previously, only SSR page loads were tracked. This pull request adds manual page view logging via `Router.events.on('routeChangeComplete')` in `Page.js`.

There is also a minor bug fix on the textarea to remove a console error.
This commit is contained in:
James Mulholland 2019-01-18 19:40:23 +00:00 committed by Tim Neutkens
parent b52c416713
commit 9f08e48d72
7 changed files with 48 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/with-segment-analytics/README.md
View file

@ -41,4 +41,4 @@ now
## The idea behind the example ## The idea behind the example
This example shows how to use Next.js along with [Segment Analytics](https://segment.com). A custom document is used in inject the [Segment snippet](https://github.com/segmentio/snippet) into the `<head>` and components fire ["track"](https://segment.com/docs/spec/track/) events based on user actions. This example shows how to use Next.js along with [Segment Analytics](https://segment.com). A custom document is used in inject the [Segment snippet](https://github.com/segmentio/snippet) into the `<head>`. Page views are tracked on both the server and client side and components fire ["track"](https://segment.com/docs/spec/track/) events based on user actions (see `contact.js` for example).

16
examples/with-segment-analytics/components/Page.js Normal file
View file

@ -0,0 +1,16 @@
import React from 'react'
import Router from 'next/router'
import Header from './Header'
// Track client-side page views with Segment
Router.events.on('routeChangeComplete', url => {
window.analytics.page(url)
})
const Page = ({ children }) =>
<div>
<Header />
{children}
</div>
export default Page

27
examples/with-segment-analytics/pages/_app.js Normal file
View file

@ -0,0 +1,27 @@
import React from 'react'
import Page from '../components/Page'
import App, { Container } from 'next/app'
export default class MyApp extends App {
static async getInitialProps ({ Component, router, ctx }) {
let pageProps = {}
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx)
}
return { pageProps }
}
render () {
const { Component, pageProps } = this.props
return (
<Container>
<Page>
<Component {...pageProps} />
</Page>
</Container>
)
}
}

4
examples/with-segment-analytics/pages/_document.js
View file

@ -17,7 +17,9 @@ export default class extends Document {
renderSnippet () { renderSnippet () {
const opts = { const opts = {
apiKey: ANALYTICS_WRITE_KEY, apiKey: ANALYTICS_WRITE_KEY,
page: true // Set this to `false` if you want to manually fire `analytics.page()` from within your pages. // note: the page option only covers SSR tracking.
// Page.js is used to track other events using `window.analytics.page()`
page: true
} }
if (NODE_ENV === 'development') { if (NODE_ENV === 'development') {

2
examples/with-segment-analytics/pages/about.js
View file

@ -1,9 +1,7 @@
import React from 'react' import React from 'react'
import Header from '../components/Header'
export default () => ( export default () => (
<div> <div>
<Header />
<h1>This is the About page</h1> <h1>This is the About page</h1>
</div> </div>
) )

4
examples/with-segment-analytics/pages/contact.js
View file

@ -1,5 +1,4 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import Header from '../components/Header'
export default class extends Component { export default class extends Component {
state = { message: '' } state = { message: '' }
@ -7,12 +6,11 @@ export default class extends Component {
render () { render () {
return ( return (
<div> <div>
<Header />
<h1>This is the Contact page</h1> <h1>This is the Contact page</h1>
<form onSubmit={this.handleSubmit}> <form onSubmit={this.handleSubmit}>
<label> <label>
<span>Message:</span> <span>Message:</span>
<textarea onInput={this.handleInput} value={this.state.message} /> <textarea onChange={this.handleInput} value={this.state.message} />
</label> </label>
<button type='submit'>submit</button> <button type='submit'>submit</button>
</form> </form>

2
examples/with-segment-analytics/pages/index.js
View file

@ -1,9 +1,7 @@
import React from 'react' import React from 'react'
import Header from '../components/Header'
export default () => ( export default () => (
<div> <div>
<Header />
<h1>This is the Home page</h1> <h1>This is the Home page</h1>
</div> </div>
) )