this is my code in gatsby-config.js
module.exports = {
siteMetadata: {
title: `title`,
description: ``,
author: `#Wavii`,
},
plugins: [
{
resolve: `gatsby-plugin-google-analytics`,
options: {
trackingId: "UA-XXXXXX-XX",
// Defines where to place the tracking script - `true` in the head and `false` in the body
head: true,
},
},
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
don't know why it is not working, it is not even showing any google analytics on my source code.
Thanks in advance.
I can't get it working in production either. I've also tried https://www.gatsbyjs.org/packages/gatsby-plugin-gtag/ - which I hear is the "newer" way, and I can get some results using Helmet like so:
<Helmet>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXX-X"></script>
<script type="application/ld+json">{`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('config', 'UA-XXX-X');
`}</script>
</Helmet>
... but I don't have it successfully testing in production yet. I've installed all the google analytics plugins and though debug works in the case of Helmet, I'm not really getting good results otherwise.
use gatsby-plugin-google-gtag with the following configuration for the google analytics 4 support.
Put it at the top of the plugins list, and I was not able to get it to work without "anonymize_ip: true".
plugins: [
{
resolve: `gatsby-plugin-google-gtag`,
options: {
trackingIds: [
"GA-TRACKING_ID", // Google Analytics / GA
],
pluginConfig: {
head: true,
anonymize_ip: true,
},
},
},
// other plugins
],
For me it did not work because I was using ad blocker browser plugin, which was blocking all analytics data. After disabling the plugin everything worked like a charm.
"gatsby-plugin-google-analytics" generate obsolete "ga"
switch to "gatsby-plugin-google-gtag" is generate "gtag"
reference
https://developers.google.com/analytics/devguides/collection/gtagjs/migration
Related
We have a functionality to generate dynamic links to our app on iOS using React Native, which works perfectly (identifiable data redacted by replacing them with "our app"):
dynamicLinks().buildShortLink({
link: `https://our_app?referral=${referralCode}`,
domainUriPrefix: 'https://ourapp.page.link',
android: {
packageName: 'app.ourapp.mobile',
},
ios: {
appStoreId: 'XXX',
bundleId: 'app.ourapp.client',
},
navigation: {
forcedRedirectEnabled: true,
},
});
It correctly opens the app if installed, and App Store if not installed.
I need to implement the same functionality on web site, here's my code:
const payload = {
dynamicLinkInfo: {
link: `https://our_app.app?referral=${referralCode}`,
domainUriPrefix: 'https://ourapp.page.link',
androidInfo: {
androidPackageName: 'app.ourapp.mobile',
},
iosInfo: {
iosBundleId: 'XXX',
iosBundleId: 'app.ourapp.client',
},
navigationInfo: {
enableForcedRedirect: true,
},
}
};
// generate page link and redirect there
const result = await fetch('https://firebasedynamiclinks.googleapis.com/v1/shortLinks?key=OUR_API_KEY', {
method: 'post',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(payload)
});
It's the same (with parameter names from React Native changed to REST parameter names respectively, as documented at https://firebase.google.com/docs/reference/dynamic-links/link-shortener)
A link is generated, however when clicked, if the app isn't installed, the page link redirects our website instead of App Store.
When I debug both links using ?d=1 query string parameter, I can indeed notice the difference:
(left: in-app generated, correct. right: REST-generated, incorrect)
Why are these links, generated with the exact same parameters, behaving differently and how can I make the second one work exactly like the first one (redirect to App Store instead of our website)?
After examining closely I've found a typo:
While generating the link in the second example, I was mistakenly using the same key twice:
iosInfo: {
iosBundleId: 'XXX',
iosBundleId: 'app.ourapp.client',
},
Changed the first one to iosAppStoreId and it worked.
The docs for Google optimize server side events are written for analytics.js is there a way to do the same thing using gtag.js? https://developers.google.com/optimize/devguides/experiments#add-ga-tracking-code-to-variations
ga('set', 'exp', `${experimentId}.${variationId}`);
ga('send', 'pageview');
I'm using gtag so I need something like this:
gtag('event', '???', {
???: `${experimentId}.${variantPosition}`,
});
I tried these:
window.gtag('set', { expId: <experiment-id> });
window.gtag('set', { expVar: <variation-number> });
window.gtag('event', 'page_view', ...
and
window.gtag('config', 'UA-XXXXXXX-X', {experiments: [ { id: 'ExperimentID 1', variant: '1' }, { id: 'ExperimentID 2', variant: '2' }, ]});
Neither of these works, in optimize Details tab I cannot see any active sessions. Anyone solved this issue before?
So I managed to find a solution, for anyone wondering how to do it, this is it:
window.gtag('config', 'UA-XXXXXXXX-XX', {
experiments: [{ id: experimentId, variant: experimentVariation }],
});
where experimentId is id supplied by Optimize and variant is a digit representing active user experiment, for example 1 or 2.
I have a Gatsby site sourcing from Shopify, and I'm having a hard time getting the Acquisition Conversions working.
My guess is that when they go to the Checkout page, since it's on Shopify's domain, it sees that as Direct traffic.
My current configuration is:
{
resolve: `gatsby-plugin-google-analytics`,
options: {
trackingId: "...",
head: true,
anonymize: false,
respectDNT: false,
allowLinker: true,
},
},
I just added that allowLinker in to test today. Is there anything else I'm missing? I'm not too familiar with analytics I'm just a humble javascript farmer.
Thank you
Google Analytics recently changed their API to version 4 and upon other things, they changed the way the tracking identifier is set to the page. I suppose that the plugins will migrate soon to that changes but in the meantime, this is the only plugin available that works with that new API version: gatsby-plugin-google-gtag. So:
// In your gatsby-config.js
module.exports = {
plugins: [
{
resolve: `gatsby-plugin-google-gtag`,
options: {
// You can add multiple tracking ids and a pageview event will be fired for all of them.
trackingIds: [
"GA-TRACKING_ID", // Google Analytics / GA
"AW-CONVERSION_ID", // Google Ads / Adwords / AW
"DC-FLOODIGHT_ID", // Marketing Platform advertising products (Display & Video 360, Search Ads 360, and Campaign Manager)
],
// This object gets passed directly to the gtag config command
// This config will be shared across all trackingIds
gtagConfig: {
optimize_id: "OPT_CONTAINER_ID",
anonymize_ip: true,
cookie_expires: 0,
},
// This object is used for configuration specific to this plugin
pluginConfig: {
// Puts tracking script in the head instead of the body
head: false,
// Setting this parameter is also optional
respectDNT: true,
// Avoids sending pageview hits from custom paths
exclude: ["/preview/**", "/do-not-track/me/too/"],
},
},
},
],
}
All the above parameters are optional, just omit them and replace the GA-TRACKING_ID for your real identifier.
I'm not sure if you ever solved it #cYberSport91, but in the year 2021 AD I am trying to do the same. This is what I found:
Place this snippet in your gatsby-ssr.js or gatsby-browser.js:
exports.onRenderBody = ({ setPostBodyComponents }) => {
const attachCode = `
if (ga) {
ga('require', 'linker');
ga('linker:autoLink', ['destination1.com', 'destination2.com']);
}`
setPostBodyComponents([<script dangerouslySetInnerHTML={{
__html: attachCode
}}/>])
}
Source: Gatsby Git Issues
(Still waiting to confirm with my client whether this solution works)
I have a docusaurus as front for my company website.
And I'm wondering, how to track clicks on the link to the login form in the administrator's page.
This link is in the siteconfig.js:
headerLinks: [
{href: 'https://demo.multifactor.ru', label: 'Demo'},
{doc: 'intro', label: 'Documentation'},
{doc: 'api', label: 'API'},
{href: '/login', label: 'Login'}
],
I've tried to add custom tag, like in the example below, but docusaurus ignore this construction
headerLinks: [
{href: 'https://demo.multifactor.ru', label: 'Demo'},
{doc: 'intro', label: 'Documentation'},
{doc: 'api', label: 'API'},
{href: '/login', label: 'Login', onClick: 'ga (‘send’, ‘event’, ‘submit’, ‘login_link’);'}
],
does anybody has ideas about how to do this?
which version of Docusaurus you are using? I only know how to config the google-analytics on Docusaurus.v2.
If you are using Docusaurus.v2, you can easily config the google-analytics by:
// docusaurus.config.js
module.exports = {
plugins: ['#docusaurus/plugin-google-analytics'],
themeConfig: {
googleAnalytics: {
trackingID: 'UA-141789564-1',
// Optional fields.
anonymizeIP: true, // Should IPs be anonymized?
},
},
};
or by:
// docusaurus.config.js
module.exports = {
presets: [
[
'#docusaurus/preset-classic',
{
// Will be passed to #docusaurus/plugin-google-analytics.
googleAnalytics: {
trackingID: 'UA-141789564-1',
// Optional fields.
anonymizeIP: true, // Should IPs be anonymized?
},
},
],
],
};
If you are using Docusarurus.v1, highly recommand you to migrate your website from v1 to v2 following instructions.
Also, how to migrate the google-analytics plugin is also mentioned in the doc.
No way at the moment. You can swizzle the components or just look at the number of page views for that page within Google Analytics.
There are two solutions from official page
plugin-google-analytics
plugin-google-gtag
That working great but i faced an issue when i cannot install these packages properly because one of my projects behind corporate firewall, so i decided to place my analytics snippet into Head component (docs)
<Head>
<script
src={ANALYTICS.SCRIPT_URL}
async={true}
></script>
<script>
{`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', ${ANALYTICS.G_TAG});
ga('send', 'pageview');
`}
</script>
</Head>
So I am using grunt to help me develop sites.
For last two weeks I am having issues with Browsersync/Watch.
When I am making changes to a php files, browsersync doesn't detect any changes. Even, when I am reloading the site manually, source code is not updated. Most funny part is, this code gets updated after "some time" or when I am restarting grunt.
watch: {
php: {
files: ['*.php', '**/*.php'],
}
},
// Run Browser Sync
browserSync: {
default_options: {
bsFiles: {
src: [
"**/*.php",
"*.php",
]
},
options: {
watchTask: true,
proxy: 'g.test',
}
}
}
Does anyone had familiar issue?
Do you have a body tag in your PHP files?
Also, when running grunt, do you have a script (like one below) injected under body?
<script id="__bs_script__">
//<![CDATA[document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.26.7'><\/script>".replace("HOST", location.hostname));
//]]>
</script>