https://www.principal.cl/profiles/contrib/houston/modules/pfg_gtm/js/dataLayer.card.js?tmfq8t

1(function (Drupal, once, window) {
2  'use strict';
3
4  /**
5   * Gets the title of a card.
6   *
7   * @param {Element} card
8   *   The pds-card element.
9   *
10   * @return {string}
11   *   The card title.
12   */
13  Drupal.pdsCardGetTitle = function (card) {
14    let title = '';
15    const titleElements = ['pds-card-title', 'pds-heading', 'h2', 'h3', 'h4', 'h5', 'h6'];
16    for (const element of titleElements) {
17      if (card.querySelector(element)) {
18        title = card.querySelector(element).innerText;
19        break;
20      }
21    }
22    return title;
23  };
24
25  /**
26   * Attaches scroll and click listeners to cards for GA4 tracking.
27   *
28   * @type {Drupal~behavior}
29   *
30   * @prop {Drupal~behaviorAttach} attach
31   * @prop {Drupal~behaviorDetach} detach
32   *
33   * @todo Remove PDS vanilla card selector and logic after all cards are WC.
34   */
35  Drupal.behaviors.pdsCardTracking = {
36    attach: function (context) {
37      once('datalayer-card', '.pds-card, pds-card', context).forEach(function (card) {
38        if (card.classList.contains('pds-card-quickLinks') || card.classList.contains('pds-card-toc')){
39          return;
40        }
41        const cardTitle = Drupal.pdsCardGetTitle(card);
42        // Watch for card entering viewport
43        Drupal.pfgElementViewObserver(
44          card,
45          {
46            event: 'cardView',
47            type: cardTitle,
48            id: card.id || '',
49          },
50          0.1
51        );
52
53        // Clicks on links in light DOM.
54        const links = card.querySelectorAll('a');
55        links.forEach((link) => {
56          link.addEventListener('click', (event) => {
57
58            const clickableVanilla =
59              card.classList.contains('pds-card') &&
60              card.classList.contains('pds-card-active');
61
62            // Prevent duplicate click tracking on vanilla clickable cards.
63            if (!clickableVanilla || (clickableVanilla && !event.isTrusted)) {
64              window.dataLayer = window.dataLayer || [];
65              window.dataLayer.push({
66                event: 'cardClick',
67                type: cardTitle,
68                id: card.id || '',
69                clickurl: link.href,
70              });
71            }
72          });
73        });
74
75        // Clicks on pds-links
76        card.addEventListener('pds-link-click', (event) => {
77          window.dataLayer = window.dataLayer || [];
78          window.dataLayer.push({
79            'event': 'cardClick',
80            'type': cardTitle,
81            'id': card.id || '',
82            'clickurl': event.target.href,
83          });
84        });
85
86        // Clicks on pds-buttons
87        card.addEventListener('pds-button-click', (event) => {
88          window.dataLayer = window.dataLayer || [];
89          window.dataLayer.push({
90            'event': 'cardClick',
91            'type': cardTitle,
92            'id': card.id || '',
93            'clickurl': event.target.href,
94          });
95        });
96
97        // Clicks on clickable cards.
98        card.addEventListener('pds-card-click', (event) => {
99          window.dataLayer = window.dataLayer || [];
100          window.dataLayer.push({
101            'event': 'cardClick',
102            'type': cardTitle,
103            'id': card.id || '',
104            'clickurl': card.href,
105          });
106        });
107      });
108    },
109  };
110})(Drupal, once, window);