Skip to content

Commit f7f479c

Browse files
abedzantoutabedzantout
committed
feat(app): added gtag tracking
1 parent 8bbf8a4 commit f7f479c

File tree

4 files changed

+208
-138
lines changed

4 files changed

+208
-138
lines changed

‎core/gtag.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// Add your GA tracking id here
12
export const GA_TRACKING_ID = '';
23

34
const isProduction = process.env.NODE_ENV.toLowerCase() === 'production';

‎pages/_app.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import App from 'next/app';
2+
import React from 'react';
3+
import Router from 'next/router';
4+
5+
import { trackPageView } from '../core/gtag';
6+
7+
Router.events.on('routeChangeComplete', url => trackPageView(url));
8+
9+
export default App

‎pages/_document.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React, { Fragment } from 'react';
2+
import Document, { Head, Main, NextScript } from 'next/document';
3+
4+
import { GA_TRACKING_ID } from '../core/gtag';
5+
6+
type Props = {
7+
isProduction: boolean,
8+
}
9+
export default class extends Document<Props> {
10+
static async getInitialProps(ctx) {
11+
const isProduction = process.env.NODE_ENV.toLowerCase() === 'production';
12+
const initialProps = await Document.getInitialProps(ctx);
13+
return {...initialProps, isProduction};
14+
}
15+
16+
setGoogleTags(GA_TRACKING_ID) {
17+
return {
18+
__html: `
19+
window.dataLayer = window.dataLayer || [];
20+
function gtag(){dataLayer.push(arguments);}
21+
gtag('js', new Date());
22+
gtag('config', '${GA_TRACKING_ID}');
23+
`,
24+
};
25+
}
26+
27+
render() {
28+
const language = 'en';
29+
const {isProduction} = this.props;
30+
console.log(GA_TRACKING_ID, isProduction);
31+
32+
return (
33+
<html lang={language}>
34+
<Head>
35+
<meta httpEquiv="x-ua-compatible" content="ie=edge"/>
36+
<base href="/"/>
37+
<meta name="viewport" content="width=device-width, initial-scale=1"/>
38+
39+
{/* Global Site Tag (gtag.js) - Google Analytics */}
40+
{/* We only want to add the scripts if in production */}
41+
{isProduction && (
42+
<Fragment>
43+
<script
44+
async
45+
src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
46+
/>
47+
{/* We call the function above to inject the contents of the script tag */}
48+
<script dangerouslySetInnerHTML={this.setGoogleTags(GA_TRACKING_ID)}/>
49+
</Fragment>
50+
)}
51+
52+
</Head>
53+
<body>
54+
<Main/>
55+
<NextScript/>
56+
57+
</body>
58+
</html>
59+
);
60+
}
61+
62+
}

‎utils/contentful.js‎

Lines changed: 136 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -1,154 +1,152 @@
11
const authorFields = [
2-
{
3-
id: 'name',
4-
name: 'Name',
5-
type: 'Symbol',
6-
required: true
7-
},
8-
{
9-
id: 'title',
10-
name: 'Title',
11-
type: 'Symbol',
12-
required: true
13-
},
14-
{
15-
id: 'company',
16-
name: 'Company',
17-
type: 'Symbol',
18-
required: true
19-
},
20-
{
21-
id: 'shortBio',
22-
name: 'Short Bio',
23-
type: 'Text',
24-
required: true
25-
},
26-
{
27-
id: 'email',
28-
name: 'Email',
29-
type: 'Symbol',
30-
required: true
31-
},
32-
{
33-
id: 'twitter',
34-
name: 'Twitter',
35-
type: 'Symbol',
36-
required: true
37-
}
2+
{
3+
id: 'name',
4+
name: 'Name',
5+
type: 'Symbol',
6+
required: true
7+
},
8+
{
9+
id: 'title',
10+
name: 'Title',
11+
type: 'Symbol',
12+
required: true
13+
},
14+
{
15+
id: 'company',
16+
name: 'Company',
17+
type: 'Symbol',
18+
required: true
19+
},
20+
{
21+
id: 'shortBio',
22+
name: 'Short Bio',
23+
type: 'Text',
24+
required: true
25+
},
26+
{
27+
id: 'email',
28+
name: 'Email',
29+
type: 'Symbol',
30+
required: true
31+
},
32+
{
33+
id: 'twitter',
34+
name: 'Twitter',
35+
type: 'Symbol',
36+
required: true
37+
}
3838
];
3939

4040
const blogFields = [
41-
{
42-
id: 'title',
43-
name: 'Title',
44-
type: 'Symbol',
45-
required: true
46-
},
47-
{
48-
id: 'slug',
49-
name: 'Slug',
50-
type: 'Symbol',
51-
required: true
52-
},
53-
{
54-
id: 'heroImage',
55-
name: 'Hero Image',
56-
type: 'Object',
57-
required: true
58-
},
59-
{
60-
id: 'description',
61-
name: 'Description',
62-
type: 'Text',
63-
required: true
64-
},
65-
{
66-
id: 'body',
67-
name: 'Body',
68-
type: 'Text',
69-
required: true
70-
},
71-
{
72-
id: 'author',
73-
name: 'Author',
74-
type: 'Link',
75-
required: true,
76-
linkType: 'Entry',
77-
validations: [{linkContentType: ['author']}]
78-
},
79-
{
80-
id: 'publishedDate',
81-
name: 'Published Date',
82-
type: 'Date',
83-
required: true
84-
},
85-
{
86-
id: 'tags',
87-
name: 'Tags',
88-
type: 'Link',
89-
required: true,
90-
linkType: 'Array',
91-
validations: [{linkContentType: ['tag']}]
92-
},
41+
{
42+
id: 'title',
43+
name: 'Title',
44+
type: 'Symbol',
45+
required: true
46+
},
47+
{
48+
id: 'slug',
49+
name: 'Slug',
50+
type: 'Symbol',
51+
required: true
52+
},
53+
{
54+
id: 'heroImage',
55+
name: 'Hero Image',
56+
type: 'Object',
57+
required: true
58+
},
59+
{
60+
id: 'description',
61+
name: 'Description',
62+
type: 'Text',
63+
required: true
64+
},
65+
{
66+
id: 'body',
67+
name: 'Body',
68+
type: 'Text',
69+
required: true
70+
},
71+
{
72+
id: 'author',
73+
name: 'Author',
74+
type: 'Link',
75+
required: true,
76+
linkType: 'Entry',
77+
validations: [{ linkContentType: ['author'] }]
78+
},
79+
{
80+
id: 'publishedDate',
81+
name: 'Published Date',
82+
type: 'Date',
83+
required: true
84+
},
85+
{
86+
id: 'tags',
87+
name: 'Tags',
88+
type: 'Link',
89+
required: true,
90+
linkType: 'Array',
91+
validations: [{ linkContentType: ['tag'] }]
92+
}
9393
];
9494

9595
const tagFields = [
96-
{
97-
id: 'name',
98-
name: 'Name',
99-
type: 'Symbol',
100-
required: true
101-
},
96+
{
97+
id: 'name',
98+
name: 'Name',
99+
type: 'Symbol',
100+
required: true
101+
}
102102
];
103103

104-
module.exports = function (migration, context) {
105-
const tag = migration.createContentType('tag', {
106-
name: 'Tag',
107-
description: 'tag'
108-
});
109-
110-
tagFields.forEach(field => {
111-
tag.createField(field.id, {
112-
name: field.name,
113-
type: field.type,
114-
required: field.required
115-
});
116-
});
104+
module.exports = function(migration, context) {
105+
const tag = migration.createContentType('tag', {
106+
name: 'Tag',
107+
description: 'tag'
108+
});
117109

118-
const author = migration.createContentType('author', {
119-
name: 'Author',
120-
description: 'Author of Blogpost'
110+
tagFields.forEach(field => {
111+
tag.createField(field.id, {
112+
name: field.name,
113+
type: field.type,
114+
required: field.required
121115
});
116+
});
122117

123-
authorFields.forEach(field => {
124-
author.createField(field.id, {
125-
name: field.name,
126-
type: field.type,
127-
required: field.required
128-
});
129-
});
130-
const blog = migration.createContentType('blogPost', {
131-
name: 'BlogPost',
132-
description: 'Blog Post'
133-
});
118+
const author = migration.createContentType('author', {
119+
name: 'Author',
120+
description: 'Author of Blogpost'
121+
});
134122

135-
blogFields.forEach(field => {
136-
if (!field.linkType) {
137-
blog.createField(field.id, {
138-
name: field.name,
139-
type: field.type,
140-
required: field.required
141-
});
142-
} else {
143-
blog.createField(field.id, {
144-
name: field.name,
145-
type: field.type,
146-
linkType: field.linkType,
147-
required: field.required,
148-
validations: field.validations
149-
});
150-
}
123+
authorFields.forEach(field => {
124+
author.createField(field.id, {
125+
name: field.name,
126+
type: field.type,
127+
required: field.required
151128
});
129+
});
130+
const blog = migration.createContentType('blogPost', {
131+
name: 'BlogPost',
132+
description: 'Blog Post'
133+
});
152134

153-
135+
blogFields.forEach(field => {
136+
if (!field.linkType) {
137+
blog.createField(field.id, {
138+
name: field.name,
139+
type: field.type,
140+
required: field.required
141+
});
142+
} else {
143+
blog.createField(field.id, {
144+
name: field.name,
145+
type: field.type,
146+
linkType: field.linkType,
147+
required: field.required,
148+
validations: field.validations
149+
});
150+
}
151+
});
154152
};

0 commit comments

Comments
 (0)