|
1 | 1 | import Document_, { Html, Head, Main, NextScript } from 'next/document'
|
2 | 2 | import { GA_ID } from '../lib/metrics'
|
| 3 | +import { useAmp } from 'next/amp' |
| 4 | + |
| 5 | +function AmpWrap({ ampOnly, nonAmp }) { |
| 6 | + const isAmp = useAmp() |
| 7 | + if (ampOnly) return isAmp && ampOnly |
| 8 | + return !isAmp && nonAmp |
| 9 | +} |
3 | 10 |
|
4 | 11 | export default class Document extends Document_ {
|
5 | 12 | render() {
|
6 | 13 | const { amphtml } = this.props
|
7 | 14 | return (
|
8 | 15 | <Html lang="en">
|
9 | 16 | <Head>
|
10 |
| - {amphtml && ( |
11 |
| - <script |
12 |
| - async |
13 |
| - key="amp-analytics" |
14 |
| - custom-element="amp-analytics" |
15 |
| - src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" |
16 |
| - /> |
17 |
| - )} |
| 17 | + <AmpWrap |
| 18 | + ampOnly={ |
| 19 | + <script |
| 20 | + async |
| 21 | + key="amp-analytics" |
| 22 | + custom-element="amp-analytics" |
| 23 | + src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" |
| 24 | + /> |
| 25 | + } |
| 26 | + /> |
18 | 27 | </Head>
|
19 | 28 | <body>
|
20 | 29 | <Main />
|
21 |
| - {amphtml ? ( |
22 |
| - <> |
23 |
| - <amp-analytics type="gtag" data-credentials="include"> |
24 |
| - <script |
25 |
| - type="application/json" |
26 |
| - dangerouslySetInnerHTML={{ |
27 |
| - __html: JSON.stringify({ |
28 |
| - vars: { |
29 |
| - gtag_id: GA_ID, |
30 |
| - config: { |
31 |
| - [GA_ID]: { groups: 'default' } |
| 30 | + <AmpWrap |
| 31 | + ampOnly={ |
| 32 | + <> |
| 33 | + <amp-analytics type="gtag" data-credentials="include"> |
| 34 | + <script |
| 35 | + type="application/json" |
| 36 | + dangerouslySetInnerHTML={{ |
| 37 | + __html: JSON.stringify({ |
| 38 | + vars: { |
| 39 | + gtag_id: GA_ID, |
| 40 | + config: { |
| 41 | + [GA_ID]: { groups: 'default' } |
| 42 | + } |
32 | 43 | }
|
33 |
| - } |
34 |
| - }) |
35 |
| - }} |
| 44 | + }) |
| 45 | + }} |
| 46 | + /> |
| 47 | + </amp-analytics> |
| 48 | + </> |
| 49 | + } |
| 50 | + /> |
| 51 | + <AmpWrap |
| 52 | + nonAmp={ |
| 53 | + <> |
| 54 | + <script |
| 55 | + async |
| 56 | + src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`} |
36 | 57 | />
|
37 |
| - </amp-analytics> |
38 |
| - </> |
39 |
| - ) : ( |
40 |
| - <> |
41 |
| - <script |
42 |
| - async |
43 |
| - src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`} |
44 |
| - /> |
45 |
| - <script |
46 |
| - dangerouslySetInnerHTML={{ |
47 |
| - __html: ` |
| 58 | + <script |
| 59 | + dangerouslySetInnerHTML={{ |
| 60 | + __html: ` |
48 | 61 | window.dataLayer = window.dataLayer || [];
|
49 | 62 | function gtag(){dataLayer.push(arguments);}
|
50 | 63 | gtag('js', new Date());
|
51 | 64 | gtag('config', '${GA_ID}');
|
52 | 65 | `
|
53 |
| - }} |
54 |
| - /> |
55 |
| - </> |
56 |
| - )} |
| 66 | + }} |
| 67 | + /> |
| 68 | + </> |
| 69 | + } |
| 70 | + /> |
57 | 71 | <NextScript />
|
58 | 72 | </body>
|
59 | 73 | </Html>
|
|
0 commit comments