frame.html and frame_checkout.html append the </head>
tag
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXX');
</script>
frame_checkout.html append before the </body>
tag
var cartLength = $(".cart-items").length;
var product_list = [];
for (var i = 0; i < cartLength; i++) {
var jsonObject = {
item_id: "",
item_name: "",
price: "",
quantity: "",
};
product_list.push(jsonObject);
}
$(".cart-items")
.find(".base-price")
.each((index, item) => {
product_list[index].price = parseFloat(
$(item)[0].textContent.split("$")[1].replace(",", "")
);
});
$(".cart-items")
.find(".product-name > span")
.each((index, item) => {
product_list[index].item_name = $(item)[0].textContent.trim();
});
$(".cart-items")
.find(".product-name > span > a ")
.each((index, item) => {
// console.log($(item).attr('href').split('p_')[1].replace('.html',''))
product_list[index].item_id = $(item)
.attr("href")
.split("p_")[1]
.replace(".html", "");
});
$(".cart-items")
.find(".product-image span")
.each((index, item) => {
product_list[index].quantity = $(item)[0].textContent;
});
let sub_total = 0;
product_list.map((p) => {
sub_total += p.price * Number(p.quantity);
});
window.carItems = [];
window.cartItems = product_list;
gtag("event", "begin_checkout", {
currency: "USD",
value: parseFloat(sub_total),
coupon: "",
items: product_list,
});
console.log(product_list);
window.gaProcessDone = false;
$('#submit-button').removeAttr("onclick");
function GAProcess() {
if (!window.gaProcessDone) {
let payment_info = "";
$('input[name="payment"]').each((index, item) => {
if ($(item).is(":checked")) {
if ($(item)[0].nextElementSibling !== null) {
payment_info = $(item)[0].nextElementSibling.textContent;
} else {
payment_info = $(item)[0].nextSibling.data.trim();
}
}
});
let shipping_tier = "";
let shipping_cost = 0;
$('input[name="shipping"]').each((index, item) => {
if ($(item).is(":checked")) {
shipping_tier = $(item)[0].nextElementSibling.textContent;
shipping_cost = $(item)
.parent()
.parent()
.parent()
.find(".shipper-option-price2")
.text()
.replace(",", "")
.replace('$', '');
}
});
let total_taxes = 0;
total_taxes = $(".total_taxes").text().replace(",", "").replace('$', '');
let total_amount = 0;
total_amount = $(".total_total").text().replace(",", "").replace('$', '');
gtag("event", "add_shipping_info", {
currency: "USD",
value: parseFloat(sub_total),
coupon: "",
shipping_tier: shipping_tier,
items: window.cartItems,
});
gtag("event", "add_payment_info", {
currency: "USD",
payment_type: payment_info,
value: parseFloat(sub_total),
coupon: "",
shipping_tier: shipping_tier,
items: window.cartItems,
});
window.shipping_cost = shipping_cost;
window.total_taxes = total_taxes;
window.total_amount = parseFloat(total_amount);
window.shipping_tier = shipping_tier;
window.gaProcessDone = true;
window.localStorage.setItem("shipping_cost", JSON.stringify(shipping_cost));
window.localStorage.setItem("total_taxes", JSON.stringify(total_taxes));
window.localStorage.setItem("total_amount", JSON.stringify(total_amount));
window.localStorage.setItem("cartItems", JSON.stringify(window.cartItems));
}
}
$('#submit-button').on("click", (e) => {
console.log("submit is started!");
if ($('#submit-button').attr("onclick") === undefined) {
e.preventDefault();
GAProcess();
$('#submit-button').attr(
"onclick",
"doCheckout(this.form,'checkoutButton');"
);
setTimeout(() => {
$('#submit-button').trigger("click");
}, 3000);
}
});
frame.html append before the </body>
tag -- ORDER SUCCESS
if (window.location.pathname === "/checkout_thankyou.asp") {
let orderId = $(".checkout4_invoicemessage").text().split('#')[1];
let shipping_cost = JSON.parse(window.localStorage.getItem("shipping_cost"));
let total_taxes = JSON.parse(window.localStorage.getItem("total_taxes"));
let total_amount = JSON.parse(window.localStorage.getItem("total_amount"));
let cartItems = JSON.parse(window.localStorage.getItem("cartItems"));
gtag("event", "purchase", {
transaction_id: orderId,
value: total_amount,
tax: total_taxes,
shipping: shipping_cost,
currency: "USD",
coupon: "",
items: cartItems,
});
window.localStorage.removeItem("cartItems");
window.localStorage.removeItem("shipping_cost");
window.localStorage.removeItem("total_taxes");
window.localStorage.removeItem("total_amount");
}
view_cart.html append before the </body>
tag
var cartItems = [];
document.querySelectorAll("[data-oitem]").forEach(function (item, index) {
var name,
price,
quantity,
id,
total = null;
Array.from(item.children).forEach(function (chitem, childex) {
if (chitem.children[1] !== undefined) {
if (chitem.children[1].classList.value.match(/right/) !== null) {
id = chitem.children[1].children[0].children[0]
.getAttribute("href")
.split("itemid=")[1];
}
}
if (chitem.classList.value.match(/name/gi) !== null) {
console.log();
name = chitem.textContent.trim().split("Delete")[0].trim();
} else if (chitem.classList.value.match(/price/gi) !== null) {
console.log();
price = parseFloat(
chitem.textContent.trim().split("$")[1].replace(",", "")
);
} else if (chitem.classList.value.match(/quantity/gi) !== null) {
console.log();
quantity = chitem.children[0].children[0].value;
} else if (chitem.classList.value.match(/total/gi) !== null) {
console.log();
total = parseFloat(
chitem.textContent.trim().split("$")[1].replace(",", "")
);
} else {
console.log("nope");
}
});
cartItems.push({
name: name,
price: price,
total: total,
quantity: quantity,
id: id,
});
});
console.log(cartItems);
var items = [];
var subTotal = 0;
gtag("set", "page_title", "Cart");
cartItems.map(function (citem) {
subTotal += citem.total;
items.push({
item_id: citem.id,
item_name: citem.name,
currency: "USD",
item_brand: "",
price: parseFloat(citem.price),
quantity: citem.quantity,
item_category: "",
});
});
gtag("event", "view_cart", {
currency: "USD",
value: parseFloat(subTotal),
items: items,
});
listing_0.html append before the </body>
tag
var category = "";
if (
document.querySelectorAll('ol[aria-label="breadcrumbs"] li:nth-child(3)') !==
null
) {
category = document.querySelectorAll(
'ol[aria-label="breadcrumbs"] li:nth-child(3)'
)[0].textContent;
}
gtag("event", "view_item", {
currency: "USD",
value: parseFloat([price_prop]),
items: [
{
item_id: "[id]",
item_name: "[h1_tag]",
currency: "USD",
item_brand: "[manufacturer_name]",
price: parseFloat([price_prop]),
quantity: 1,
item_category: category,
},
],
});