added gtm and custom event tracking

This commit is contained in:
zach
2026-02-25 14:12:11 -05:00
parent 2ebb8eb127
commit 5d9655e196
15 changed files with 103 additions and 2273 deletions

View File

@@ -41,6 +41,7 @@ const formatPrice = (price:any) => {
};
const conditionOrder = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];
---
{(start === 0) &&
<script define:vars={{ totalHits }} is:inline>
@@ -52,8 +53,8 @@ const conditionOrder = ["Near Mint", "Lightly Played", "Moderately Played", "Hea
<div class="inventory-button position-relative float-end shadow-filter text-center d-none">
<div class="inventory-label pt-2">+/-</div>
</div>
<div hx-get={`/partials/card-modal?cardId=${card.cardId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal">
<img src={`/cards/${card.productId}.jpg`} alt={card.productName} loading="lazy" decoding="async" class="img-fluid rounded-3 mb-2 card-image w-100" onerror="this.onerror=null;this.src='/cards/noImage.webp'"/>
<div hx-get={`/partials/card-modal?cardId=${card.cardId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal" onclick="const cardTitle = this.querySelector('#cardImage').getAttribute('alt'); dataLayer.push({'event': 'virtualPageview', 'pageUrl': this.getAttribute('hx-get'), 'pageTitle': cardTitle, 'previousUrl': '/pokemon'});">
<img src={`/cards/${card.productId}.jpg`} alt={card.productName} id="cardImage" loading="lazy" decoding="async" class="img-fluid rounded-3 mb-2 card-image image-grow w-100" onerror="this.onerror=null;this.src='/cards/noImage.webp'"/>
</div>
<div class="row row-cols-5 gx-1 price-row mb-2">
{card.prices
@@ -77,9 +78,10 @@ const conditionOrder = ["Near Mint", "Lightly Played", "Moderately Played", "Hea
</div>
<div>{card.variant}<span class="d-none">{card.productId}</span></div>
</div>
))}
{start + 20 < totalHits &&
<div hx-post="/partials/cards" hx-trigger="revealed" hx-include="#searchform" hx-target="#cardGrid" hx-swap="beforeend" hx-on--after-request="afterUpdate(event)">
Loading...
</div>
}
}