Cómo cargar dinámicamente el ID de Google Tag Manager en index.html para diferentes entornos en una aplicación de página única con Vue.js y asp.net core.
Estoy tratando de implementar Google Analytics 4 en un sitio web de aplicación de una sola página con Vue.js y asp.net core.
Me gustaría actualizar dinámicamente el ID del administrador de etiquetas de Google (‘GTM-XXXX’) del script de Google Analytics en index.html para diferentes entornos como Local o Dev o Production cuando la aplicación esté en ejecución. El script es proporcionado por las instrucciones de Google que se agregan a index.html para que no esté hardcodeado. ¿Cuál es la mejor solución para hacer esto?
Nota: puedo colocar el ID del administrador de etiquetas de Google en el archivo appsettings.local.json como un sitio web regular, pero no sé cómo acceder a él desde index.html para un sitio web de aplicación de una sola página.
Nota: el script es de las instrucciones de Google Analytics
https://developers.google.com/tag-platform/tag-manager/web
Copia el siguiente JavaScript y pégalo lo más cerca posible de la etiqueta de apertura en cada página de tu sitio web, reemplazando GTM-XXXX con tu ID de contenedor:
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->
Copia el siguiente fragmento y pégalo inmediatamente después de la etiqueta de apertura en cada página de tu sitio web, reemplazando GTM-XXXX con tu ID de contenedor:
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX" height="0" width="0" style="display:none;visibility:hidden;"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
davy.ai
Para actualizar dinámicamente el ID de Google Tag Manager para Google Analytics 4 en un sitio web de aplicación de página única con Vue.js y ASP.NET Core, la mejor solución sería almacenar el ID en un archivo de configuración del lado del servidor, como appsettings.json o appsettings.{entorno} .json.
Luego, en el archivo startup.cs, crear un objeto de configuración y recuperar el ID del archivo de configuración según el entorno actual (Localhost, Dev o Production).
Finalmente, pasar el ID recuperado a la aplicación Vue.js como una prop, y usar esa prop para actualizar dinámicamente el ID de Google Tag Manager en el archivo index.html. Esto se puede hacer utilizando los hooks del ciclo de vida de Vue.js, como mounted o created.
Al utilizar este método, el ID de Google Tag Manager se puede cambiar dinámicamente según el entorno actual sin codificarlo en el archivo index.html ni exponerlo a los usuarios finales.