I'm using Google Analytics (GA4) with a Nuxt.js static site hosted on Netlify. The GA tracking is done with vue-gtag.
It has been working fine for a couple months, but the other day, I noticed an unusually high influx of New User and Session traffic specifically to some of my page paths prefixed with /_nuxt/static/XXXXXXXXXX/... (X denotes some digits). They have "(not set)" Locations, zero Screen Views and zero Average Engagement Times, unlike other legitimate page paths and traffic stats I'm seeing, so I am assuming that they are bots of some sort... but I have no idea where from. Why would particular pages in the static folder get hit like that? And how could they be exposed in the first place?
I'm quite new to all this so I tried researching more about Nuxt static sites, the static folder, and static site generators like Netlify... but I'm not finding anything specifically about these hits showing up on Google Analytics.
I'd appreciate if anyone would be kind enough to explain all this to me!
EDIT - re: kissu's comment on how I've enabled vue-gtag:
I made a Nuxt plugin I've called googleAnalytics.js with the following code:
import Vue from "vue";
import VueGtag from "vue-gtag";
export default ({ app }) => {
// get browser's hostname to check for localhost
let host = window.location.hostname;
// only run the Google Analytics code thru vue-gtag if hostname is not localhost
if (host != "localhost") {
Vue.use(
VueGtag,
{
config: { id: "G-XXXXXXXXXX" },
appName: "SomeName",
pageTrackerScreenviewEnabled: true
},
// pass application router to vue-gtag so that it associates tracking information with the specific page in view
// code from: https://www.carlcassar.com/articles/add-google-analytics-to-a-nuxt-js-app/
app.router
);
}
};
And then in my nuxt.config.js I set it to client-only:
plugins: [
{
src: "./plugins/googleAnalytics.js",
mode: "client"
},
That's all I've done with respect to the GA tracking. Are there are any other config options I should be using?
I'm on Nuxt v2.15.3 and vue-gtag v1.14.0.
Related
I made an Svelte Kit its working in my local with no problem but when i build it like this:
import adapter from '#sveltejs/adapter-static';
export default {
kit: {
adapter: adapter({
fallback: 'index.html',
})
}
};
And gives me 3 folders and they are: client, prerendered, server.
I'm uploading this 3 folders in my hosting and move the folder files into root folder. Everythings works with no problem BUT i have an api that sends mail. It's gives me 404? Send mail is working in localhost but not working in hosting. I can't fixed it. In manifest.json:
{
type: 'endpoint',
id: "api/sendMail",
pattern: /^\/api\/sendMail\/?$/,
names: [],
types: [],
load: () => import('./entries/endpoints/api/sendMail/_server.js')
},
The path is correct by the way.
The folders in hosting:
Photo
What can i do?
By specifying a fallback page, this means you're turning SPA mode on, so you can't use server endpoints.
From the adapter-static readme:
You can use adapter-static to create a single-page app or SPA by
specifying a fallback page.
The reason this is working local in dev:
During development, SvelteKit will still attempt to server-side render
your routes. This means accessing things that are only available in
the browser (such as the window object) will result in errors, even
though this would be valid in the output app. To align the behavior of
SvelteKit's dev mode with your SPA, you can add export const ssr =
false to your root +layout.
To have specific layout for some pages at our project we create few custom PageLayoutComponent's. Some contfiguration example:
{
// #ts-ignore
path: null,
canActivate: [CmsPageGuard],
component: CartPageLayoutComponent,
data: {
cxRoute: 'cart',
cxContext: {
[ORDER_ENTRIES_CONTEXT]: ActiveCartOrderEntriesContextToken,
},
},
},
All work fine with storefront until you will not try to select specific page at smartedit. As result it not use our custom CartPageLayoutComponent, but will use PageLayoutComponent for rendering.
Probably this is because it's not a normal route navigation. Can somebody from spartacus team suggest how this bug can be fixed?
Probably this is because it's not a normal route navigation
I believe your Route should be recognized normally, there is nothing special in adding a custom Angular Route.
So I guess there is something special about the page or URL of Spartacus Storefront that runs in your SmartEdit.
It's hard to tell the reason of your problem without more debugging.
You said your app works as expected when run differently (locally?), but when used in SmartEdit, then there is a problem. Please identify factors that makes the run SmartEdit different from your (local?) run. And try to isolate them. Guesses from top of my head:
production vs dev mode of the build?
exact URL of the cart page?
any difference in configuration between a local version and deployed one to be used in SmartEdit?
I would also add some debugging code to better know which routes configs are available and which one is used for the current route. For debugging purposes please add the following constructor logic in your AppModule:
export class AppModule {
// on every page change, log:
// - active url
// - the Route object that was matched with the active URL
// - all the Route objects provided to Angular Router
constructor(router: Router) {
router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
console.log({
activeUrl: router.url,
activeRouteConfig:
router.routerState.snapshot.root.firstChild.routeConfig,
allRoutesConfigs: router.config,
});
}
});
}
}
The pages opened in SmartEdit have the same route of cx-preview (e.g. to open faq page in smartedit, request is https://localhost:4200/electronics-spa/en/USD/cx-preview?cmsTicketId=xxxxx. backend can get page id from cmsTicketId). If you want to change the page layout, you can consider use PageLayoutHandler. Spartacus has some PageLayoutHandlers, e.g.
{
provide: PAGE_LAYOUT_HANDLER,
useExisting: CartPageLayoutHandler,
multi: true,
},
I am developing a new platform website, which should allow to easily make new websites using a headless CMS (Strapi).
For the front part, I am using vuejs with nuxtjs, and for the api, using Strapi: the data is stored in a database.
-> Each company has its own database.
-> The front part is the same for all companies
Only the database need to be changed to switch from one company to another.
For now, I only need to change .env file (in the api project) with DATABASE_NAME=companyA to DATABASE_NAME=companyB to swicth from a website to another one.
Here is database.json file:
"database":"${process.env.DATABASE_NAME||'companyA'}"
But I would like to get this url prefix in the frontend url (example:)
http://127.0.0.1/companya/....
http://127.0.0.1/companyb/....
To be able to send it to the api url prefix as well maybe) and know which database I should use.
Could you please tell me if you have an idea on how this could work? I could share my code but i think it's more of a theoric question I have now...
With VueRouter
you can set a path like:
const routes = [
{ path: '/companya', name: 'companya', component: MyPage },
{ path: '/companyb', name: 'companyb', component: MyPage },
];
then in MyPage.vue you can look at the current route:
created () {
switch (this.$route.name) {
case 'companyA':
// switch connection
break;
case 'companyB':
// switch connection
break;
}
},
I have a Vue CLI 3 based app which I would like to function as a PWA.
I need it to work in history mode, because the hash intervenes in redirects that I'm doing as part of an OAuth based authentication process.
When the routing is in hash mode, the manages to load fine as PWA. Once I change the mode to 'history', the PWA I installed won't load anymore - I'm getting a white screen instead. I checked the browser version and it still works fine (I configured the fallback in my NGINX server to index.html).
At first I used the default settings provided with vue CLI project and the PWA plugin. After doing some research, I added the following to my vue.config.js:
pwa: {
workboxOptions: {
skipWaiting: true,
navigateFallback: 'index.html'
}
}
and I saw that the following was indeed added to service-worker.js:
workbox.skipWaiting();
...
workbox.routing.registerNavigationRoute("index.html");
but it still didn't help. Even though the app registers successfully on my mobile device's homescreen, it just won't run unless I change the routing back to hash mode.
Does anyone have a clue what I might be missing?
Thanks
I have the same problem, i solved it by adding this in the end of my router.js
{
path: '*', // or '/index.html'
beforeEnter: (to, from, next) => {
next('/')
}
}
Try /index.html instead of index.html.
I created a plugin injecting a noty (https://ned.im/noty/#/) so I can use it globally, it looks like this:
export default ({ app }, inject) => {
const notify = function (options = {}) {
if (process.client) {
new Noty(options).show();
}
}
app.$notify = notify;
inject('notify', notify);
}
This plugin shows a noty only on the client-side. On the server-side a noty does not appear, cause it can be displayed only in browser.
I have a page with product details and I am receiving data in asyncData method. When the product was not found I would like to show a noty with proper message and redirect user to a product list page. When I change a route in client-side everything works awesome. However on the first page load (eg. I change an url manually in the browser) which happens on the server-side a noty does not appear, only a redirect works.
My question is: how to show a noty in this case? How to create a noty in the browser after SSR or what is the best other solution to my problem?
Is there any way to run some code after client-side is already rendered (after server-side-rendering)?
You could just disable ssr for that plugin.
plugins: [
...,
{ src: '~plugins/yourplugin.js', ssr: false }
]
Okay, I found a module for that: https://github.com/potato4d/nuxt-client-init-module
it's not possible right know (nuxt <= 2.14.0 when i answering)
but you can combine client plugin and client middleware to achieve that
please take a look at this link:
https://github.com/nuxt/nuxt.js/issues/2653#issuecomment-390588837