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,
},
});
Related
I've been using this plugin postcss-px-to-viewport-vite-plugin for years on Vuejs projects.
In summary it coverts all 'px' to 'vw' using Postcss. After runtime, on Chrome debug mode, you can see tha all 'px' are translated to 'vw' correctly. The only thing I must do to set the configuration up is install the Plugin and create postcsss config file.
I've been trying to set the same configuration on React, but no way!
After the app is up and running, I still see all px !
My postcss.config.js on vuejs project :
module.exports = {
plugins: [
{
"postcss-px-to-viewport": {
options: {
unitToConvert: "px",
viewportWidth: 1900,
unitPrecision: 5,
propList: ["*"],
viewportUnit: "vw",
fontViewportUnit: "vw",
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: undefined,
include: undefined,
landscape: false,
landscapeUnit: "vw",
landscapeWidth: 568,
},
},
},
],
};
I'm trying to add the wowhead tooltips to a docusaurus page.
The wowhead documentation suggests you need to add the following to your <head> section:
<script>const whTooltips = {colorLinks: true, iconizeLinks: true, renameLinks: true};</script>
<script src="https://wow.zamimg.com/widgets/power.js"></script>
I can add the https://wow.zamimg.com/widgets/power.js fine using the scripts configuration option which works fine with defer or async:
module.exports = {
// Snipped rest of configuration
scripts: [
{
src:
'https://wow.zamimg.com/widgets/power.js',
defer: true,
},
],
For the inline portion <script>const whTooltips = {colorLinks: true, iconizeLinks: true, renameLinks: true};</script> I have tried using a <Head> component in my index.js <Layout> section and had no success.
How can I add this inline script properly to docusaurus so it loads before the wowhead script?
Using the advice from D.Kastier, I successfully solved my problem, granted it wasn't very elegant.
To load the script properly, and have it update after the page initially loads:
injectHtmlTags() {
return {
headTags: [
// https://www.wowhead.com/tooltips
{
tagName: 'script',
innerHTML: `
const whTooltips = {colorLinks: true, iconizeLinks: true, renameLinks: true};
document.addEventListener('readystatechange', event => {
if (event.target.readyState === "complete") {
console.log('Updating tooltips from plugin');
window.$WowheadPower.refreshLinks();
}
});
`,
},
{
tagName: 'script',
attributes: {
defer: true,
src: 'https://wow.zamimg.com/widgets/power.js',
},
},
],
};
},
Then to update the tooltips each time the page changes:
onRouteUpdate({location}) {
setTimeout(function() {
window.$WowheadPower.refreshLinks();
}, 0);
},
I have react code in .jsx file and html part doesn't get proper highlighting it just shows as white text. I'm using "Javascript React" mode in Visual Studio Code and Prettier extension but nothing helped to solve this issue.
{
"[cpp]": {
"editor.quickSuggestions": false
},
"[c]": {
"editor.quickSuggestions": false
},
"java.configuration.checkProjectSettingsExclusions": false,
"java.errors.incompleteClasspath.severity": "ignore",
"workbench.settings.editor": "json",
"workbench.colorCustomizations": {},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.formatOnType": true,
"editor.tabSize": 2,
"prettier.jsxBracketSameLine": true,
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"files.associations": {
"*.jsx": "javascriptreact",
"*.js": "javascriptreact"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"workbench.colorTheme": "Atom One Dark"
}
may be something wrong with my settings.json or should I add some property for html ?
I tried also different themes in VS Code same problem. This is how it looks like:
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
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