GTM does not seems working

It looks like you've set up the basic configuration for Google Tag Manager (GTM) in your Laravel, Inertia, and Vue 3 application. However, there are a few areas we can check and adjust to ensure that GTM is working correctly.

1. Verify GTM Script in Production

First, ensure that your application is running in production mode when you're testing GTM. The GTM script and initialization code you've added in app.blade.php are wrapped in an @production directive, which means they will only be included in the HTML when the app environment is set to production.

2. Correct GTM Initialization

In your app.js, you are trying to use gtag function on route navigation. However, you need to ensure that the gtag function is defined globally as you did in app.blade.php. Also, make sure that the GTM ID (GTM-xxxxxxxx) matches exactly with your actual GTM container ID.

3. Ensure Router is Imported

Your script references router.on('navigate', ...), but it's not clear from the provided code whether the router is properly imported and configured in your app.js. Make sure that you have imported and configured Vue Router correctly.

4. Debugging GTM

To debug and verify if GTM is working, you can use the GTM debug mode and the Google Tag Assistant browser extension. These tools will help you see whether the tags are firing as expected.

Updated app.js Example

Here's an updated version of your app.js ensuring that the router is used correctly and gtag is accessible:

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { createPinia } from 'pinia';
import { ZiggyVue } from 'ziggy';
import { createRouter, createWebHistory } from 'vue-router';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [], // Define your routes here
});

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        const app = createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(router)
            .use(createPinia())
            .use(ZiggyVue)
            .mount(el);

        if (import.meta.env.VITE_APP_ENV === "production") {
            router.afterEach(() => {
                gtag("js", new Date());
                gtag("config", "GTM-xxxxxxxx");
            });
        }

        return app;
    },
    progress: {
        color: '#4B5563',
    },
});

5. Check Console for Errors

Open your browser's developer console to check for any errors that might indicate what's going wrong. This can give you clues, especially about missing variables or script loading issues.

By following these steps and using debugging tools, you should be able to determine whether GTM is working correctly in your application.