#GTMTips: Integra el chat de Fb Messenger con Google Tag Supervisor

Hace un tiempo publiqué un #ConsejosGTMT artículo, donde mostré cómo se puede Añadir elementos HTML a la página mediante programación usando Administrador de etiquetas de GoogleEsto es importante porque los validadores de GTM le impiden agregar parámetros personalizados a los elementos HTML que se inyectan directamente a través de la etiqueta HTML personalizada. Para evitar esta validación, debe crear el elemento mediante programación antes de agregarlo al documento.

Hace un tiempo, Matteo Gamba me hizo una pregunta relacionada con la Plugin de chat para clientes de FbEste complemento te permite agregar el chat de Messenger de tu propia aplicación de Fb directamente al sitio net. Es genial, pero el problema es que se te indica que incorpores el complemento usando atributos HTML personalizados, y estos no pasarán la validación.

Así que aquí estoy, respondiendo a la sugerencia de escribir una guía dedicada al complemento de chat de Fb.

incógnita

El boletín informativo de Simmer

Suscríbete a la Boletín informativo de Simmer ¡Para recibir las últimas noticias y contenidos de Simo Ahava en tu bandeja de entrada de correo electrónico!

Consejo 75: Incorpore el complemento de chat de Fb Messenger mediante Google Tag Supervisor

En primer lugar, dirígete a la página oficial Instrucciones del complemento de chat personalizado de Fby haz todo lo que te indiquen hasta llegar Paso 2 del Pasos de configuración parte de la guía.

En este punto, se le solicitará que agregue un campo específico.

to the web page. So what you’ll must do is create a brand new Customized HTML tag in Google Tag Supervisor, with the next code inside:

<script>
  (operate() {
    // Modify the variable values beneath
    var page_id = '12345678';
    var ref = '';
    var theme_color = '#2B913F';
    var logged_in_greeting = 'Good day, logged in consumer! Welcome to my chat.';
    var logged_out_greeting = 'Good day, logged out consumer! Welcome to my chat.';
    
    // Do not contact the code beneath
    var el = doc.createElement('div');
    el.className = 'fb-customerchat';
    el.setAttribute('page_id', page_id);
    if (ref.size) { el.setAttribute('ref', ref); }
    el.setAttribute('theme_color', theme_color);
    el.setAttribute('logged_in_greeting', logged_in_greeting);
    el.setAttribute('logged_out_greeting', logged_out_greeting);
    doc.physique.appendChild(el);
  })();
script>

Cambie los cinco valores de las variables en las líneas 4 a 8 del código. Si no tiene un webhook personalizado que acepte solicitudes de postbacks y referencias, puede dejar la cadena vacía.

Crear uno nuevo DOM listo Activador para esta etiqueta HTML personalizada. El activador debe estar delimitado para que se energetic únicamente en las páginas en las que desea ver el complemento de chat.

¡Y eso debería ser suficiente! El código crea el código requerido.

aspect programmatically, utilizing the variables you configured in traces 4-8 to populate the parameters.