Utilizing Google Tag Manager for monitoring clicks within my search engine, which showcases various book details such as cover images, titles, and authors. When a book is in stock, it displays a checkmark and "Leverbaar" (In stock) below the price tag ($17.90).
https://i.sstatic.net/pCKC2.png I have implemented an Event tracking Tag with specific triggers set as follows: Trigger when on a particular page,
Triggers on All Elements, Some Clicks:
Click Element Matches CSS Selector :
.zoekresultaat-cover, .zoekresultaat-titel, .zoekresultaat-auteur, .zoekresultaat-ondertitel, .zoekresultaat-leverbaar-ok, .zoekresultaat-leverbaar-nok
HTML
<div class="cb-Artikel-row cb-meerdere-Titels">
<div class="cb-col1">
<figure class="artikel-cover">
<div class="cb-Titeldetails">
<img src="https://cbonline.boekhuis.nl/thumbnails/2552/9789463332552_covrtn.jpg" class="cb-Titeldetails zoekresultaat-cover">
</div>
</figure>
</div>
<div class="cb-col2">
<div class="zoekresultaat-auteur"></div>
<div class="zoekresultaat-titel">Hallo! Kraambezoek</div>
<div class="zoekresultaat-reeks">Hello Baby</div>
<div class="cb-Titeldetails-artikelgegevens">
<div class="zoekresultaat-bindwijze">Hardcover</div>
</div>
<div class="cb-Titeldetails-titelgegevens">
<span class="taal zoekresultaat-taal">Nederlands</span>
<span class="verdeler">|</span>
<span class="verschijningsdatum zoekresultaat-verschijningsdatum">2018</span>
<span class="verdeler">|</span>
<span class="ISBN zoekresultaat-isbn">9789463332552</span>
</div>
</div>
<div class="cb-col3">
<div class="cb-col3-Wrapper">
<div class="cb-Prijs-En-Leverbaarheid">
<div class="cb-Titeldetails-prijs zoekresultaat-prijs">13,95</div>
<div class="cb-Titeldetails-boeksoort zoekresultaat-boeksoort"> (Algemeen)</div>
<div class="cb-BeschikbaarheidMelding">
<div class="cb-Titeldetails-leverbaar-ok zoekresultaat-leverbaar-ok">Leverbaar</div>
<div><span style="color:black" class="CBIcon-CBO-095-pijltje_verder" aria-hidden="true"></span></div>
<div class="cb-Titeldetails-assortiment zoekresultaat-assortimenttype">CB-assortiment</div>
</div>
</div>
</div>
</div>
</div>
The Event Label features a Custom Javascript variable with the following code:
function(){
// Searching for elements like cover by clicking.
if({{Click Classes}}.indexOf('zoekresultaat-cover') >= 0){
var ISBN = {{Click ID}};
ISBN = ISBN.replace('titel_img_','');
return 'cover || ISBN:' + ISBN;
}
// Price tag click.
if({{Click Classes}}.indexOf('zoekresultaat-prijs') >= 0){
var ISBN = $({{Click Element}}).parent().parent().parent().parent().find('.zoekresultaat-isbn').text();
return 'price || ISBN:' + ISBN; ;
}
// Checking stock status for availability.
if({{Click Element}}.indexOf('zoekresultaat-leverbaar-ok') >= 0){
var ISBN = $({{Click Element}}).parent().parent().parent().parent().find('.zoekresultaat-isbn').text();
return 'Stock Status: Available || ISBN:' + ISBN;
}
// Handling out of stock scenarios.
if({{Click Classes}}.indexOf('zoekresultaat-leverbaar-nok') >= 0){
var ISBN = $({{Click Element}}).parent().parent().parent().parent().find('.zoekresultaat-isbn').text();
return 'Stock Status: Not available || ISBN:' + ISBN;
}
// For other elements clicked.
else{
return 'Unknown'; // Unknown element has been clicked.
}
}
During the preview mode activation in Google Tag Manager for testing purposes, all div elements including author, cover, price, and title function correctly.
However, incorrect results are observed solely for the stock status divs: .zoekresultaat-leverbaar-ok and .zoekresultaat-leverbaar-nok :
It appears that Tag Manager wrongly registers clicks on the cover image... https://i.sstatic.net/HVh5m.png https://i.sstatic.net/a06BF.png
Inspecting elements in Chrome https://i.sstatic.net/4M5pX.png https://i.sstatic.net/re4tt.png
The .cb-col1, .cb-col2, .cb-col3 div contains the CSS property: display:inline-block.