Как использовать Google Analytics с приложением Next. js? - PullRequest
Новая
       29

Как использовать Google Analytics с приложением Next. js?

2 голосов
/ 26 февраля 2020

Я использую стилевые компоненты со следующим. js, поэтому мои стили должны отображаться на стороне сервера, следовательно, как я могу добавить аналитику Google на свой веб-сайт?

Я проверил далее . js пример Google Analytics , но, как я уже сказал, мой файл _document отличается из-за использования стилевых компонентов. 

// _document.js

import React from 'react'
import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () => originalRenderPage({
        enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
      })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }
}

export default MyDocument

1 Ответ

4 голосов
/ 26 февраля 2020

В вашем _document.js вы переопределяете метод getInitialProps. Вы также можете переопределить метод render. Просто добавьте 

  render() {
    return (
      <Html lang={this.props.lang || "en"}>
        <Head>
          <script
            dangerouslySetInnerHTML={{
              __html: `[google analytics tracking code here]`
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }

Убедитесь, что вы импортируете необходимые компоненты:

import Document, { Html, Head, Main, NextScript } from "next/document"

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...