Заполнение текста h3 в пользовательской переменной javascript GTM

Question

Я пытаюсь получить текст h3 из плитки на странице и вернуть его в пользовательской переменной JS в GTM. Затем я создам триггер для сохранения значения в GA при нажатии кнопки.

Нажатие кнопки работает нормально. Я просто не могу получить переменную для заполнения.

Я пытался следовать инструкциям из этой цепочки: Получить текст элемента с помощью пользовательской переменной JavaScript GTM Однако я получаю «undefined» в оверлейной программе предварительного просмотра отладки GTM.

HTML:

<div class="field-item odd" style="display: block;">
  <div class="nfsa-filetile file file-video file-video-oembed contextual-links-region view-mode-teaser_tile">
    <a href="#" class="nfsa-collection-card-link toc-filter-processed">
      <div class="field field-name-field-file-poster-image field-type-image field-label-hidden">
        <div class="field-items">
          <div class="field-item even">
            <picture class="img-responsive">
              <img class="img-responsive" src="" alt="some test here. "
                title="">
            </picture>
          </div>
        </div>
      </div>
      <div class="row nfsa-collection-heading">
        <div class="col-xs-9">
          <h3>This is the heading i want</h3></div>
        <div class="col-xs-3 text-right"><i class="nfsa-icon nfsa-color-gray-4 nfsa-icon-video"></i></div>
      </div>

      <div class="field field-name-field-file-summary field-type-text-long field-label-hidden">
        <div class="field-items">
          <div class="field-item even">
            <p>Some paragraph text here</p>
          </div>
        </div>
      </div>
    </a>
  </div>

  <div class="row nfsa-collection-expand-row">
    <div class="nfsa-collection-expand col-xs-8">
      <button aria-expanded="false" aria-label="Expand for more information on this item">Expand <i class="glyphicon glyphicon-chevron-up"></i></button>
    </div>
  </div>
</div>

Переменная JS, которую я изменил из связанного потока.

function() {
  return $({{Click Element}}.closest('.field-item')).find('h3').text();
}

Я предполагал, что использование элемента .field будет проходить до самого верхнего div, а затем поиск будет проходить обратно вниз, чтобы выбрать только h3.

Любая помощь будет высоко ценится.

Answer 1

Мне удалось заставить это работать, используя чистый javascript параметр Симо Ахавы и пользователя Stackoverflow, комментарий Джастина от этого поста

function() {
  return function(target, selector) {
    while (!target.matches(selector) && !target.matches('body')) {
      target = target.parentElement;
    }
    return target.matches(selector) ? target : undefined;
  }
}

function() {
    var parentElement = {{Find Closest}}({{Click Element}}, 'div.field-item'),
        childElement = typeof parentElement !== 'undefined' ? parentElement.querySelector('h3') : undefined;
    return typeof childElement !== 'undefined' ? childElement.innerText : undefined;
}