We want to implement Google Analytics into our online website, however when we add the code our menu and footer disappears.
According to documentation on the official website https://v2.docusaurus.io/docs/using-plugins/#docusaurusplugin-google-analytics this can be achieved through updating the docusaurus.config.js and adding a plugin #docusaurus/plugin-google-analytics or by by adding to the present #docusaurus/preset-classic.
Installing as a plugin with the following code, hides our menu and footer (just vanishes). But Google Analytics does register the real-time traffic.
themeConfig: {
googleAnalytics: {
trackingID: 'UA-GACODE-1',
// Optional fields.
anonymizeIP: true, // Should IPs be anonymized?
},
},
Trying to activate it through the existing #docusaurus/present-clasic doesn't process anything (Chrome inspector has no traffic to Google and AdBlock is not active)
presets: [
[
'#docusaurus/preset-classic',
{
googleAnalytics: {
trackingID: 'UA-GACODE-1',
},
docs: {
sidebarPath: require.resolve('./sidebars.js')
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
highlight: {
theme: 'default',
},
},
],
],
Has anyone activated Google Analytics successfully on Docusaurus V2?
Thank you for the help!
I think the accepted answer is no longer valid after this PR. So both the gtag and googleAnalytics should go back into the presets configuration now.
// docusaurus.config.js
module.exports = {
presets: [
[
'#docusaurus/preset-classic',
{
docs: /* ... */,
+ gtag: {
+ trackingID: 'xxx',
+ },
+ googleAnalytics: {
+ trackingID: 'xxx',
+ },
},
],
],
themeConfig: {
- gtag: {
- trackingID: 'xxx',
- },
- googleAnalytics: {
- trackingID: 'xxx',
- },
// other options
},
};
EDIT: Google Analytics is no longer with this previous format, see accepted answer.
Ref: https://github.com/facebook/docusaurus/pull/5832 - Thanks #seiwon-park
Related
Edit: Restarting react fixed the issue, the following code works as expected.
I am trying to enable the DebugView mode in Google analytics but events are not being shown or are logging in any way. I am using react-ga4: https://www.npmjs.com/package/react-ga4 and it says here you can enable debug by passing in the config: https://support.google.com/analytics/answer/7201382?hl=en#zippy=%2Cglobal-site-tag-websites
I believe the following code should enable the DebugView mode in the google analytics:
ReactGA.initialize([
{
trackingId: "G-TRACKINGID",
gaOptions: {
debug_mode: true,
},
gtagOptions: {
debug_mode: true,
},
},
]);
Then to trigger event I have the following code in an onClick handler:
ReactGA.event({
action: "action_button",
category: "category_button",
label: "label_button",
value: 44,
});
This worked for me :
ReactGA.initialize("G-TRACKINGID", {
gaOptions: {
debug_mode: true,
},
gtagOptions: {
debug_mode: true,
},
});
Does someone know why this happens? If I run nuxt locally (server) it works fine, but whenever I run yarn generate and load the index.html file in my browser all content between <client-only> tags disappear.
My nuxt config file:
export default {
// Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
ssr: true,
// Target: https://go.nuxtjs.dev/config-target
target: 'static',
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: 'Site name',
htmlAttrs: {
lang: 'nl'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Description
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'preconnect', href: "https://fonts.gstatic.com"},
{ href: 'https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&family=Open+Sans+Condensed:wght#700&display=swap', rel: 'stylesheet'}
],
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: ["#/assets/css/hamburgers.scss"],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/tailwindcss
'#nuxtjs/tailwindcss',
'#nuxtjs/fontawesome',
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
],
styleResources: {
scss: [
"assets/css/variables.scss",
"assets/css/hamburgers.scss",
]
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
}
}
Okay I've got it to work.
Javascript wasn't working properly because the files weren't linked correctly when I open index.html.
Because index.html is in a local folder somewhere on my PC, it searches for the javascript files on the root of the machine (where they don't exist).
I tested this locally on an Apache server with XAMPP and the same problem ocurred when I put the dist content generated by yarn generate in a subfolder so the URL would be localhost/subfolder.
The fix for this specific problem in this context would be to add to nuxt.config.js this:
router: {
base: '/subfolder/'
},
In the end this solution was not neccesary for me because when I were to host this on an actual Apache server and would put the files in the root directory so then the router property isn't needed unless I would put it there in a subfolder.
Earlier related questions from me:
Click events in Nuxt don't work after generating static site
Href and src generated by Nuxt in static site are not properly linked to js files after nuxt generate
I've build a react app using create-react-app. But then I came to know that my react app is open for clickjacking attack as I didn't set any X-Frame options in my app. Now how can I set X-Frame options in my react app which is created my create-react-app and I have no express js backend.
https://nextjs.org/docs/api-reference/next.config.js/headers
You could try this...I hope it works
async headers() {
return [
{
// source: "/login",
headers: [
{
key: "X-Content-Options",
value: "Deny",
},
{
key: "Content-Security-Policy",
value: "frame-ancestors 'none'",
},
],
},
];
},
So I am trying to add the google marketing platform
plugin to a gatsby site and have followed the instructions to apply it in gatsbyconfig.js but when I try and deploy it gives an error. The plugin code itself seems fine since there's no errors but once i try to deploy it displays "TypeError: {(intermediate value)(intermediate value)} is not a function"
here's an image of the deploy error: https://imgur.com/5RapNj4.
Sorry if this was formatted oddly, I'm really new at this.
plugins: [
// Google marketing platform plugin
{
resolve: 'gatsby-plugin-google-marketing-platform',
options: {
dataLayer: {
// Preset dataLayer values
gaPropertyId: '[UA-148228240-1]',
},
tagmanager: {
id: '[GTM-M73LFW6]',
params: {
// GTM URL Parameters
// Ex: https://www.googletagmanager.com/gtm.js?id=[ID]>m_cookies_win=x
gtm_cookies_win: 'x'
}
},
analytics: {
id: '[UA-148228240-1]',
},
optimize: {
id: '[GTM-57N8BWZ]',
},
includeInDevelopment: true,
},
},
/*
* Sharp Image Processing
*/
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
/*
* Transform Markdown Files
*/
{
resolve: `gatsby-transformer-remark`,
options: {
// CommonMark mode (default: true)
commonmark: true,
// Footnotes mode (default: true)
footnotes: true,
// Pedantic mode (default: true)
pedantic: true,
// GitHub Flavored Markdown mode (default: true)
gfm: true,
// Plugins configs
plugins:
`gatsby-remark-relative-images`,
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1080,
// linkImagesToOriginal: false,
linkImagesToOriginal: true,
tableOfContents: {
heading: null,
maxDepth: 2
}
}
},
resolve: 'gatsby-remark-copy-linked-files',
options: {
destinationDir: 'static'
}
}
],
excerpt_separator: `<!-- end of excerpt -->`
}
,
/*
* Access to Filesystem
*/
{
resolve: `gatsby-source-filesystem`,
options: {
name: `src`,
path: `${__dirname}/src`
}
},
/*
* Inline SVG Support
*/
{
resolve: `gatsby-plugin-react-svg`,
options: {
rule: {
include: /\.inline\.svg$/
}
}
},
/*
* SEO Metadata
*/
`gatsby-plugin-react-helmet`,
/*
* SASS
*/
`gatsby-plugin-sass`,
/*
* Styled Components
*/
`gatsby-plugin-styled-components`,
/*
* Google Analytics
*/
{
resolve: `gatsby-plugin-google-analytics`,
options: {
trackingId: process.env.UA-148228240-1,
// Puts tracking script in the head instead of the body
head: true,
// Setting this parameter is optional
anonymize: true,
// Setting this parameter is also optional
respectDNT: true,
// Avoids sending pageview hits from custom paths
// exclude: ["/preview/**", "/do-not-track/me/too/"],
// Enables Google Optimize using your container Id
optimizeId: process.env.GATSBY_GOOGLE_OPTIMIZE_ID,
// Any additional create only fields (optional)
sampleRate: 5,
siteSpeedSampleRate: 10,
cookieDomain: 'getroute.com',
// Setting this field to true will enables the parsing
// of cross-domain linker parmeters used to transfer state across domains. (optional)
allowLinker: true
}
},
Why not go into the Netlify site settings and add it there?
Go to snippet injection under post processing.
Site Settings > Build & Deploy > Post Processing
OK, I'm pretty new to JAMstack, React, GatsbyJS, NetlifyCMS and Netlify, so do forgive me if this is simple.
I have a site running using React and GatsbyJS, and have NetlifyCMS running too to control the content. For the most part the site is running fine, however I keep running into an issue when it comes to images between the different environments.
When I add an image into the body section of any page through NetlifyCMS, I then pull the repo the image simply doesn't appear and is replaced with the broken image icon. However, it seems to work fine when on Netlify.
Occasionally, it appears, but after a push or a pull or restarting the Gatsby develop server, it just breaks again.
It only seems to happen when adding an image via NetlifyCMS into the body content so it appears in the main content of the markdown file; it is seemingly working fine when in frontmatter.
I've spent many hours on this it seems. I've got the full range of plugins installed, and I can't seem to find anyone else that is facing this issue.
All the other HTML seems to work fine but these images really don't want to.
gatsby-config.js
siteMetadata: {
title: 'Sheringham Shantymen',
description: 'The Shantymen travel widely throughout the UK and Ireland supporting Lifeboat Stations in their fundraising efforts and are always considering how they can help in others to raise funds by performing concerts.',
},
plugins: [
'gatsby-transformer-sharp',
'gatsby-plugin-sharp',
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
"gatsby-remark-copy-linked-files",
"gatsby-plugin-netlify-cms-paths",
{
resolve: 'gatsby-remark-relative-images',
options: {
name: 'uploads',
},
},
{
resolve: 'gatsby-remark-images',
options: {
// It's important to specify the maxWidth (in pixels) of
// the content container as this plugin uses this as the
// base for generating different widths of each image.
maxWidth: 1600,
},
}
],
},
},
'gatsby-plugin-react-helmet',
'gatsby-plugin-sass',
{
// keep as first gatsby-source-filesystem plugin for gatsby image support
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/static/img`,
name: 'uploads',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/img`,
name: 'images',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/pages`,
name: 'pages',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/gigs`,
name: 'gigs',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/discography`,
name: 'discography',
},
},
{
resolve: 'gatsby-plugin-web-font-loader',
options: {
google: {
families: ['Source Sans Pro', 'Source Serif Pro']
}
}
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: "Sheringham Shantymen",
short_name: "Shantymen",
start_url: "/",
background_color: "#172957",
theme_color: "#FAC43E",
// Enables "Add to Homescreen" prompt and disables browser UI (including back button)
// see https://developers.google.com/web/fundamentals/web-app-manifest/#display
display: "standalone",
icon: "src/img/logo-badge.png", // This path is relative to the root of the site.
},
},
{
resolve: 'gatsby-plugin-netlify-cms',
options: {
modulePath: `${__dirname}/src/cms/cms.js`,
},
},
{
resolve:'gatsby-plugin-purgecss', // purges all unused/unreferenced css rules
options: {
develop: true, // Activates purging in npm run develop
purgeOnly: ['/all.sass'], // applies purging only on the bulma css file
},
}, // must be after other CSS plugins
'gatsby-plugin-netlify', // make sure to keep it last in the array
],
}
Content.js component
import PropTypes from 'prop-types'
export const HTMLContent = ({ content, className }) => (
<div className={className} dangerouslySetInnerHTML={{ __html: content }} />
)
const Content = ({ content, className }) => (
<div className={className}>{content}</div>
)
Content.propTypes = {
content: PropTypes.node,
className: PropTypes.string,
}
HTMLContent.propTypes = Content.propTypes
export default Content
Called on the page template:
<PageContent className="content" content={content} />
I expect to add an image into the body of markdown, for Gatsby to process the image and output it as a processed/blur up loading image, and for this to work consistently across all servers (localhost and Netlify).
Instead, when it outputs initially (sometimes) it's a huge image, breaking out of containers, then following a server restart or similar the image simply breaks.
Turns out this was a small bug in the version of Netlify CMS I was running - I updated from 2.6.1 to 2.8.0 and this has fixed the issue (as of 2.7.0).