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>
Related
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'm trying to use Wordpress as a headless CMS and pull the content in using Nuxt, which I'm using as a SSG. I have a few languages that I need to translate it to but can't quite work out how to make this work.
I would like to do something like this, but it doesn't work as the blocks only seem to take strings:
<i18n>
{
"en": en,
"nb": nb
}
</i18n>
<template>
<div class="container">
{{ $t('frontpage_top_section.frontpage_heading') }}
</div>
</template>
<script>
export default {
async asyncData() {
const en = await fetch('https://wordpressurl.net/wp-json/wp/v2/pages/4685').then(res => res.json());
const nb = await fetch('https://wordpressurl.net/wp-json/wp/v2/pages/4235').then(res => res.json());
return {
en, nb
}
},
}
</script>
What is the right approach here? How can I pull the content from Wordpress api on a per page/component basis and use it within the template?
Let me know if I've missed anything out and thanks :)
So i've worked this out and I thought I would share here incase anyone else is confused. If anyone wants to elaborate on this feel free.
So what I did is not to try and include this in the page/component itself but to use separate files to call the data, as can be seen here: https://i18n.nuxtjs.org/lazy-load-translations
So in nuxt.config.js I have:
modules: [
[
'nuxt-i18n',
{
locales: [
{
code: 'en',
iso: 'en-US',
name: 'English',
file: 'en-US.js'
},
{
code: 'nb',
iso: 'nb_NO',
name: 'Norwegian',
file: 'nb.js'
},
],
lazy: true,
langDir: 'lang/',
defaultLocale: 'en',
fallbackLocale: 'en',
seo: true
},
]
]
And then for example, in /lang/en-US.js I call the specific pages for that language (and do the same for the other languages):
export default async (context, locale) => {
let homepage = await fetch('https://wordpressurl.net/wp-json/wp/v2/pages/4685').then(res => res.json());
let about = await fetch('https://wordpressurl.net/wp-json/wp/v2/pages/9519').then(res => res.json());
return {
homepage, about
}
}
And then in my templates I can call:
<template>
<div class="container">
{{ $t('homepage.acf.frontpage_top_section.frontpage_heading') }}
</div>
</template>
Now when i load the page, the correct content is shown and if I go to, for example: /nb the Norwegian content is shown.
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)
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
I have my a number of routes inside my routes.js file and i want to introduce an extra field into it. Below is the route
Router.route('/', {
name: 'home',
controller: 'LoginController',
where: 'client',
action:'index'
});
Since i have a number of routes,i want to go through all the routes and get the route name like this
_.each(Router.routes, function(route){
console.log(route.getName());
});
I want to use the route names to generate links. Links require link names and i have the idea of putting the link names in the routes.
Router.route('/', {
name: 'home',
controller: 'LoginController',
where: 'client',
text: 'Login Link',
action:'index'
});
Is introducing custom fields in the routes allowed in meteor?.
I found out there is a title option but its not in the docs http://iron-meteor.github.io/iron-router/#route-specific-options
and used it this way
Router.route('/', {
name: 'login',
controller:'HomeController',
where: 'client',
title: 'login',
icon: 'this is the icon',
action:'index'
});
and to get the options
Router.routes.forEach(function(route){
console.log(route.getName());
console.log(route.options.title);
console.log(route.options.icon);
});
and this is the result
login
login
this is the icon
so even the custom option icon seems to be working.