Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save dubrod/b85ab4bd9d9561d7351d10d0693666bb to your computer and use it in GitHub Desktop.

Select an option

Save dubrod/b85ab4bd9d9561d7351d10d0693666bb to your computer and use it in GitHub Desktop.
In this tutorial we assume:
1. you made a trigger in GTM for the `checkout` page
2. Go High Level still doesn't show SKU data in the HTML
Create a new Tag in GTM that is `Custom HTML`
Paste the below:
```
<script>
//Need this function because of the way GHL loads components
function waitForElementToDisplay(selector, callback, checkFrequencyInMs, timeoutInMs) {
var startTimeInMs = Date.now();
(function loopSearch() {
if (document.querySelector(selector) != null) {
callback();
return;
}
else {
setTimeout(function () {
if (timeoutInMs && Date.now() - startTimeInMs > timeoutInMs)
return;
loopSearch();
}, checkFrequencyInMs);
}
})();
}
// SKU lookup table if you want to be specific because GHL doesn't render SKU values to HTML
var skus = [
{ item_name: 'Blanket Filter Roll - 30"x90"x1"', item_id: 'BFR-30901' },
{ item_name: 'Blanket Filter Roll - 36"x90"x1"', item_id: 'BFR-36901' },
{ item_name: 'Aqua Strip Xtreme - 5 Gallon', item_id: 'ASX-5G' }
];
// Helper: generate acronym fallback ID from item_name
function generateAcronym(str) {
if (!str) return "UNKNOWN";
return str
.split(/[\s-]+/) // split by spaces and dashes
.map(function (word) { return word[0] ? word[0].toUpperCase() : ""; })
.join("") // join into acronym
.replace(/[^A-Z0-9]/g, ""); // cleanup non-alphanumerics
}
// Collect items
var items = Array.from(document.querySelectorAll('.hl-cart-item')).map(function (item) {
// Base name
var nameEl = item.querySelector('.hl-cart-checkout-product-name');
var item_name = nameEl ? nameEl.textContent.trim() : "";
// Variant
var variantEl = item.querySelector('.product-variant');
var variant = variantEl ? variantEl.textContent.trim() : "";
// Append variant to name if present
if (variant) {
item_name = item_name + " - " + variant;
}
// Price (first matching .hl-cart-checkout-product-price in this item)
var priceEl = item.querySelector('.hl-cart-checkout-product-price');
var rawPrice = priceEl ? priceEl.textContent.trim() : "";
var price = rawPrice ? parseFloat(rawPrice.replace(/[^0-9.-]+/g, "")) : 0;
// Quantity (look for text like "Qty: 1")
var priceEls = Array.from(item.querySelectorAll('.hl-cart-checkout-product-price'));
var qtyText = priceEls
.map(function (el) { return el.textContent.trim(); })
.find(function (text) { return text.indexOf("Qty:") === 0; });
var quantity = qtyText ? parseInt(qtyText.replace(/\D/g, ""), 10) : 0;
// Lookup ID or generate acronym fallback
var skuEntry = skus.find(function (s) { return s.item_name === item_name; });
var item_id = skuEntry ? skuEntry.item_id : generateAcronym(item_name);
return {
item_name: item_name,
price: price,
quantity: quantity,
item_id: item_id
};
});
// Subtotal from the .cart-subtotal .price element
var subtotalEl = document.querySelector('.cart-subtotal .price');
var subtotal = subtotalEl
? parseFloat(subtotalEl.textContent.replace(/[^0-9.-]+/g, ""))
: 0;
// Coupon code from input[name="coupon_code"]
var couponEl = document.querySelector('input[name="coupon_code"]');
var coupon = couponEl ? couponEl.value.trim() : "";
waitForElementToDisplay(".hl-cart-item",function(){
dataLayer.push({
event: "begin_checkout",
value: subtotal,
currency: "USD",
coupon: coupon,
items: items
});
},1000,9000);
</script>
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment