¿Cómo prevenir que Google Tag Manager sobrescriba document.write()?

Estamos utilizando Angular para nuestro sitio web. Como no todas las páginas han sido convertidas a Angular, implementamos un enfoque híbrido:

1) Cada solicitud va primero a Angular. Una vez cargado, verifica si existe la Ruta.
2) Si no existe, la página HTML se obtiene del backend.
3) El elemento HTML en el DOM (es decir, la página completa) se reemplaza con el cuerpo de la respuesta.

OnInit() {
this.railsService.fetchRailsPage(this.router.url).subscribe(
(response) => this.replaceDOM(response),
(errorResponse) => this.replaceDOM(errorResponse.error)
);
}

Private replaceDOM(newContent: string) {
document.open();
document.write(newContent);
document.close();
}

Dado que todos los a-hrefs en las páginas antiguas son enlaces planos (no son routerLinks de Angular), una vez que el usuario navega lejos, la página se vuelve a cargar y Angular vuelve a entrar en acción.

Hasta ahora, funciona, pero: Me di cuenta de que a veces el DOM no se reemplaza con el cuerpo de la respuesta.

La depuración nos llevó a la conclusión de que Google Tag Manager podría ser el problema. Sobrescribe document.write() y muchas otras funciones Javascript predeterminadas.

¿Por qué sucede esto? ¿Y cómo se puede evitar para obtener la versión predeterminada de, por ejemplo, document.write()?

davy.ai

June 11, 2023 at 2:19 pm

Resolución de problemas de Angular y Google Tag Manager Plugin

Enfoque híbrido

El sitio web en cuestión está construido con Angular, pero aún no se han llevado todas las páginas, por lo que se implementó un enfoque híbrido que sigue estos pasos:

Todas las solicitudes van primero a Angular.
Angular verifica si existe la ruta.
Si la ruta no existe, la página se obtiene del backend y el elemento HTML en el DOM se reemplaza con el cuerpo de la respuesta.

Sin embargo, el desarrollador notó que a veces el DOM no se reemplaza con el cuerpo de respuesta.

Google Tag Manager

La depuración reveló que Google Tag Manager podría ser el problema, ya que sobrescribe document.write() y otras funciones JavaScript predeterminadas.

Podemos evitar que Google Tag Manager sobrescriba la función document.write() mediante el uso de una customTask, que reemplaza la función document.write de GTM con la versión predeterminada, de la siguiente manera:

function() {
  var originalDocumentWrite = document.write;
  document.write = function() {
    originalDocumentWrite.apply(document, arguments);
  };
}

Esto se puede agregar como tarea personalizada en la interfaz de GTM en la sección “Tags”. Al hacerlo, podemos asegurarnos de que se utilice la función document.write() predeterminada y se pueda prevenir el problema de reemplazar el DOM con el cuerpo de respuesta.

Answer

davy.ai

June 11, 2023 at 2:19 pm
Resolución de problemas de Angular y Google Tag Manager Plugin

Enfoque híbrido

El sitio web en cuestión está construido con Angular, pero aún no se han llevado todas las páginas, por lo que se implementó un enfoque híbrido que sigue estos pasos:
1. Todas las solicitudes van primero a Angular.
2. Angular verifica si existe la ruta.
3. Si la ruta no existe, la página se obtiene del backend y el elemento HTML en el DOM se reemplaza con el cuerpo de la respuesta.
Sin embargo, el desarrollador notó que a veces el DOM no se reemplaza con el cuerpo de respuesta.

Google Tag Manager

La depuración reveló que Google Tag Manager podría ser el problema, ya que sobrescribe document.write() y otras funciones JavaScript predeterminadas.

Podemos evitar que Google Tag Manager sobrescriba la función document.write() mediante el uso de una customTask, que reemplaza la función document.write de GTM con la versión predeterminada, de la siguiente manera:
```
function() {
  var originalDocumentWrite = document.write;
  document.write = function() {
    originalDocumentWrite.apply(document, arguments);
  };
}
```
Esto se puede agregar como tarea personalizada en la interfaz de GTM en la sección “Tags”. Al hacerlo, podemos asegurarnos de que se utilice la función document.write() predeterminada y se pueda prevenir el problema de reemplazar el DOM con el cuerpo de respuesta.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?