Failed to use gtag.js as Remote Code #1668

livilivi · 2025-05-09T18:48:01Z

livilivi
May 9, 2025

I followed the documentation at https://wxt.dev/guide/essentials/remote-code.html#google-analytics to configure gtag.js, but nothing happened, and there were no error logs.

In the Network tab, I can find a request to http://localhost:3000/@id/__x00__url:https:/www.googletagmanager.com/gtag/js?id=G-xxxx, which look good.

However, I couldn't find the https://www.google-analytics.com/g/collect request in the Network tab. It seems like gtag.js was bundled but isn’t working properly? I couldn't figure out what went wrong, since Google's official documentation always trend to the Measurement Protocol, which doesn't provide Geographic information.

Here my files:

// utils/google-analytics.js
import 'url:https://www.googletagmanager.com/gtag/js?id=G-XXX'; //&dbg=1

window.dataLayer = window.dataLayer || [];
// NOTE: This line is different from Google's documentation
window.gtag = function () {
  dataLayer.push(arguments);
};
gtag('js', new Date());
gtag('config', 'G-XXX');

// entrypoints/history/main.tsx

import '~/utils/google-analytics';
//@ts-ignore
gtag('event', 'page_view', {
  key: 'test',
});

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './style.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
    <App/>
);

// entrypoints/history/index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="manifest.type" content="browser_action" />
</head>

<body>
  <div id="root"></div>
  <script type="module" src="./main.tsx"></script>
</body>

</html>

//wxt.config.ts
import { defineConfig } from 'wxt';
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  extensionApi: 'chrome',
  modules: ['@wxt-dev/i18n/module', '@wxt-dev/module-react'],
  manifest:(env) => ({
    name: "__MSG_extName__",
    description: '__MSG_extDescription__',
    default_locale: 'en',
    permissions: [
      'storage',
      'history',
      'scripting'
    ],
    content_security_policy: {
      extension_pages: "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';"
    },
    host_permissions: [
      "http://*/*",
      "https://*/*",
      "*://*/*"
    ],
    web_accessible_resources: [{
      matches: ['chrome-extension://*/*'],
      resources: ['/test.wasm'],
    }],
  }),
  vite: (env) => ({
    plugins: [tailwindcss()],
  }),
});

honwhy · 2025-05-11T07:08:01Z

honwhy
May 11, 2025

if you see the gtag.js file request properly, may be there is something limited by gtag.js itself, it works only support http/https website.

as for me, Measurement Protocol is acceptable, just fine

#1596
#1653

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Failed to use gtag.js as Remote Code #1668

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Failed to use gtag.js as Remote Code #1668

Uh oh!

livilivi May 9, 2025

Replies: 1 comment

Uh oh!

honwhy May 11, 2025

livilivi
May 9, 2025

honwhy
May 11, 2025