GTM — Add Button Link to Menu

Script que añade dinámicamente un enlace con aspecto de botón al final de la cabecera del menú de escritorio (.js-menu-desktop__header). Toda la configuración — texto, URL, colores y comportamiento — se centraliza en un único objeto al inicio del script.

---

Configuración

El objeto gtmNewButtonLink contiene todos los parámetros del botón:

Propiedad	Tipo	Descripción
text	string	Texto visible del botón (ej. "NEW").
url	string	URL de destino del enlace.
target	string	Comportamiento de apertura: "_self" (misma pestaña) o "_blank" (nueva pestaña).
background	string	Color de fondo del botón (CSS color válido, ej. "red", "#FF0000").
color	string	Color del texto (CSS color válido, ej. "#ffffff").

var gtmNewButtonLink = {
  text: "NEW",
  url: "https://www.google.es",
  target: "_self",
  background: "red",
  color: "#ffffff"
};

---

Elemento destino

El botón se inserta al final (.appendChild) de:

.js-menu-desktop__header

Si el elemento no existe en la página cuando se ejecuta el script, la inserción no se realiza (el guard if (gtmElementMenuDesktop && gtmNewButtonLinkElement) lo previene silenciosamente).

---

Estilos del botón

La clase .gtmButtonLinkMenuDesktop se inyecta vía <style> en el mismo tag GTM:

Propiedad CSS	Valor
margin-left	0.5rem
padding	0.225rem 0.75rem
align-self	center
font-size	12px
font-weight	700
letter-spacing	1.2px
border-radius	0.375rem

Los colores de fondo y texto no están en el CSS — se aplican como style inline desde el objeto de configuración, por lo que se pueden cambiar sin tocar los estilos.

---

Flujo de ejecución

fnGtmInitAddLinkMenu()
  │
  ├─ fnGtmAddLinkMenuToInitElements()
  │   └─ Busca .js-menu-desktop__header → gtmElementMenuDesktop
  │
  ├─ fnGtmAddLinkMenuToCreateButton()
  │   └─ Crea <a> con clase, href, target, backgroundColor, color e innerText
  │       → gtmNewButtonLinkElement
  │
  └─ fnGtmAddLinkMenuToInsertLink()
      └─ Si ambos elementos existen → gtmElementMenuDesktop.appendChild(...)

---

Resultado en el DOM

<div class="js-menu-desktop__header">
  <!-- ... elementos existentes del menú ... -->
  <a
    class="gtmButtonLinkMenuDesktop"
    href="https://www.google.es"
    target="_self"
    style="background-color: red; color: #ffffff;"
  >
    NEW
  </a>
</div>