Created
October 1, 2025 23:26
-
-
Save dubrod/b85ab4bd9d9561d7351d10d0693666bb to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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