GTM. Atrybuty data-gtm na przycisku. Stabilne tagowanie CTA bez kruchych selektorów.

Na czym to polega w sklepie

Zamiast polegać na klasach stylów, dev dodaje atrybuty data- np. data-gtm-event, data-gtm-label, data-gtm-sku. GTM czyta je przez Click Element + Custom JS lub auto-event variable.

Przykład ze sklepu internetowego

Przycisk „Kup teraz” z kontraktem atrybutów znanym zespołowi analityki:

<button type="button"
  class="btn btn-primary"
  data-gtm-event="add_to_cart"
  data-gtm-sku="SKU-42"
  data-gtm-label="pdp_primary_cta">
  Dodaj do koszyka
</button>

// GTM Custom JS na Click:
function() {
  var el = {{Click Element}};
  return el ? el.getAttribute('data-gtm-label') : undefined;
}

Co zrobić po stronie biznesu

• Konwencja w design system - każdy nowy CTA ma data-gtm-label.
• Uniwersalny trigger: Click Element matches [data-gtm-event].
• Łącz z push ecommerce dla pełnych items - atrybuty na szybkie prototypy CTA.

W skrócie

data-gtm to umowa dev-analityka odporna na CSS. Najlepszy kompromis między szybkością GTM a stabilnością pomiaru przycisków.