Глядя, чтобы вытащить данные крошки в GTM

Question

Сидя с этой грязной крошкой на сайте, я занят тегами ...

<div class="col-xs-12 col-md-12">
<nav id="breadcrumbs">
    <div class="breadcrumbs">
        <ul itemscope="" itemtype="http://schema.org/BreadcrumbList">

            li class="home" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
                <a href="https://www.twt.co.za/" title="Go to Home Page" itemprop="item">Home </a>
                <span>/ </span>
                <meta itemprop="name" content="Home">
                <meta itemprop="position" content="1">
            </li>

            <li class="category161" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
                <a href="https://www.twt.co.za/wheels" title="" itemprop="item">Wheels </a>
                <span>/ </span>
                <meta itemprop="name" content="Wheels">
                <meta itemprop="position" content="2">
            </li>

            <li class="category691" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
                <a href="https://www.twt.co.za/by-wheel-size" title="" itemprop="item">By Wheel Diameter </a>
                <span>/ </span>
                <meta itemprop="name" content="By Wheel Diameter">
                <meta itemprop="position" content="3">
            </li>

            <li class="category708" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
                <strong>17 Inch Wheels </strong>
                <meta itemprop="name" content="17 Inch Wheels">
                <meta itemprop="position" content="4">
            </li>

        </ul>
    </div>
</nav>

Я хочу захватить второй и третий элементы крошки в две переменные в GTM. В этом случае «Колеса» в качестве категории и «По диаметру колеса» в качестве подкатегории.

Нашел здесь несколько примеров, которые касаются только извлечения URL-адреса из хлебных крошек, поэтому у меня точно не было таланта для преобразования этого в JavaScript.

Это немного натянуто, и меня это может задело, но я чувствую себя застрявшим в том, как я могу получить чистые идентификаторы категорий и подкатегорий с сайта, и теоретически это похоже на лучший способ сделать это. Это. Просто немного потеряно, когда дело доходит до такого количества элементов.

 function() { 
       var bcLink = document.getElementsByClassName("breadcrumbs");
       var data = [];
       for (i=0; i<bcLink.length; i++) { 
         data.push({ 'category' : bcLink[i].getAttribute("name") });
       }

    return data;
    }

Answer 1

Вы можете создать тег со следующим кодом, чтобы поместить информацию в dataLayer, а затем создать две отдельные переменные dataLayer для извлечения информации.

<script>
function breadcrumbLevel() { 
       var bcLink = document.querySelectorAll(".breadcrumbs li a");
       if(typeof bcLink != 'undefined'){
         var data = [];
         for (i=0; i<bcLink.length; i++) { 
           data.push(bcLink[i]);       
         }
         var bLevel1 = data[1].innerText;
         var bLevel2 = data[2].innerText;
         dataLayer.push({'breadcrumbLevel2': bLevel1,
                        'breadcrumbLevel3': bLevel2                   
                       });  
         }
}
breadcrumbLevel();
</script>