Related Collections
Master Template: Beacon Integration /* Axon Analytic - Shpoify Pixel SDK --------- */ // Initiatlize Axon async queue window._axq = window._axq || function () { (_axq.q = _axq.q || []).push(arguments); }; // Initizlie Axon data layer window.axonData = {}; // Initialize Edgetag async queue window.edgetag = window.edgetag || function () { (edgetag.stubs = edgetag.stubs || []).push(arguments); }; // Trigger consent check callback const getConsent = async () => { const checkConsent = async () => { const storeRaw = await browser.localStorage.getItem("_workerStoreMultiple"); try { const storageData = JSON.parse(storeRaw || "{}"); const edgeUrl = "https://" + $AXON.core._build.edgeUrl; const consent = storageData?.[edgeUrl]?.edgeTag?.consent; if (consent) { window.edgetag("consent", consent, { localSave: true }); } } catch {} }; await checkConsent(); setInterval(async () => { await checkConsent(); }, 1000); }; getConsent(); // Load AXON core library (for client) !(function () { // [1] Load Axon Beacone const axonBeaconURL = "https://insights.neurograph.io/beacon/genteal-apparel/uncommonlogic.beacon.js"; const elementAxonBeacon = document.createElement("script"); elementAxonBeacon.src = axonBeaconURL; const scriptAxonBeacon = document.getElementsByTagName("script")[0]; if (scriptAxonBeacon && scriptAxonBeacon.parentNode) { scriptAxonBeacon.parentNode.insertBefore(elementAxonBeacon, scriptAxonBeacon); } // Trigger consent lookup //getConsent(); // Edgetag Init const start = (sessionData) => { // Decode session let session; if(sessionData) { session = JSON.parse(decodeURIComponent(sessionData)); } // Set session properties window.axonData.visitor = { userId: session ? session.user_id : null, sessionId: session ? session.session_id : null, connection: session ? session.connection: null }; }; // Check cookies for visitor ID and trigger browser.cookie .get("_axon_") .then((sessionData) => start(sessionData)) .catch(() => start()); // Edgetag - set data on window ref if (!window.edgetagData) { window.edgetagData = {}; } window.edgetagData.pageUrl = init.context.document.location.href; })(); /* * Helper / Support Functions */ const getCustomerId = () => { try { let curr = window.ShopifyAnalytics.meta.page.customerId; if (curr !== undefined && curr !== null && curr !== "") { return curr; } } catch(e) { } try { let curr = window.meta.page.customerId; if (curr !== undefined && curr !== null && curr !== "") { return curr; } } catch (e) { } try { let curr = _st.cid; if (curr !== undefined && curr !== null && curr !== "") { return curr; } } catch (e) { } try { let curr = ShopifyAnalytics.lib.user().traits().uniqToken; if (curr !== undefined && curr !== null && curr !== "") { return curr; } } catch (e) { } return null; } // Prepare User const prepareUser = (data) => { const user = {}; if (data.email) { user.email = data.email; } const address = data.shippingAddress; if (address) { if (address.city) { user.city = address.city; } if (address.countryCode) { user.country = address.countryCode; } if (address.provinceCode) { user.state = address.provinceCode; } if (address.firstName) { user.firstName = address.firstName; } if (address.lastName) { user.lastName = address.lastName; } if (address.phone) { user.phone = address.phone; } } if (data.phone) { user.phone = data.phone; } if (data.firstName) { user.firstName = data.firstName; } if (data.lastName) { user.lastName = data.lastName; } return user; }; // Send User Data const sendUserData = (userData) => { if (!userData || !Object.keys(userData).length) { return; } // Send Edgetag edgetag("data", userData); // Trigger Axon _axq("customer:update", { data: userData }); // Format identity let userTraits = {}; // Determine if we need to identify const customerId = getCustomerId(); if(customerId) { userTraits.shopify_customer_id = customerId; } // Name if(userData.firstName && userData.lastName) { userTraits.full_name = userData.firstName + " " + userData.lastName; } // Personal Email if(userData.email) { userTraits.personal_email = userData.email; } // Personal Phone if(userData.phone) { userTraits.mobile = userData.phone; } // Send data if(Object.keys(userTraits).length > 0) { _axq("customer:identify", { traits: userTraits }); } }; // Format URL const formatUrl = (url) => { if (!url) { return ""; } if (url.startsWith("http://") || url.startsWith("https://")) { return url; } if (url.startsWith("//")) { return window.location.protocol + url; } return "https://" + url; }; // Prepare Image const prepareImage = (imageUrl) => { if (!imageUrl) { return ""; } return imageUrl.replace(/_d+xd+.(jpg|jpeg|png|webp)/g, ".$1"); }; // Get Checkout Payload const getPayload = (checkout, origin, fullPayload) => { let currency = checkout.totalPrice.currencyCode; let value = checkout.totalPrice.amount; const lineItems = checkout.lineItems; let total = 0; // Determine small payload if(fullPayload) { const contents = lineItems.map((item) => { total += item.variant.price.amount * item.quantity; const title = item.variant.product.title + (item.variant.title && !false ? " - " + item.variant.title : ""); return { id: item.variant.product.id, variantId: item.variant.id, sku: item.variant.sku, quantity: item.quantity, item_price: item.variant.price.amount, title, brand: item.variant.product.vendor || "", category: item.variant.product.type || "", image: prepareImage(formatUrl(item.variant.image?.src)), url: origin + item.variant.product.url, type: "product", }; }); if (lineItems.length && currency !== lineItems[0].variant.price.currencyCode) { currency = lineItems[0].variant.price.currencyCode; value = total; } return { currency, value, contents }; } else { const contents = lineItems.map((item) => { total += item.variant.price.amount * item.quantity; return { id: item.variant.product.id, variantId: item.variant.id, sku: item.variant.sku, quantity: item.quantity, item_price: item.variant.price.amount, brand: item.variant.product.vendor || "", category: item.variant.product.type || "", type: "product", }; }); if (lineItems.length && currency !== lineItems[0].variant.price.currencyCode) { currency = lineItems[0].variant.price.currencyCode; value = total; } return { currency, value, contents }; } }; // Get Title const getTitle = (item) => { if (!false) { return item.product.title; } return item.product.title.replace(" - " + item.title, ""); }; /* * Shopify Default Analytics Events */ // Event: Add to Cart analytics.subscribe("product_added_to_cart", async (event) => { const cost = event.data.cartLine.cost.totalAmount; const item = event.data.cartLine.merchandise; const title = getTitle(item); const cookie = ((await browser.localStorage.getItem("cartToken")) || "").replace(/"/g, ""); let checkoutUrl = ""; if (cookie) { checkoutUrl = event.context.document.location.origin + "/checkouts/cn/" + cookie; } if (!((item?.product?.id || item?.id) && item?.price?.amount && cost?.amount)) { return; } // Trigger Edgetag edgetag("tag", "AddToCart", { currency: cost.currencyCode, value: event.data.cartLine.quantity < 0 ? item.price.amount : cost.amount, contents: [ { id: item.product.id, variantId: item.id, sku: item.sku, quantity: event.data.cartLine.quantity < 0 ? 1 : event.data.cartLine.quantity, item_price: item.price.amount, title, image: prepareImage(formatUrl(item.image?.src)), brand: item.product.vendor || "", category: item.product.type || "", url: event.context.document.location.origin + item.product.url, type: "product", }, ], checkoutUrl }); // Trigger Axon _axq("analytics:send", { namespace: "Add to Cart", data: { currency: cost.currencyCode, value: event.data.cartLine.quantity < 0 ? item.price.amount : cost.amount, contents: [ { id: item.product.id, variantId: item.id, sku: item.sku, quantity: event.data.cartLine.quantity < 0 ? 1 : event.data.cartLine.quantity, item_price: item.price.amount, brand: item.product.vendor || "", category: item.product.type || "", type: "product", }, ], ...(window.axonData.visitor && window.axonData.visitor) } }); }); // Event: Checkout Started analytics.subscribe("checkout_started", (event) => { const checkout = event.data.checkout; const userData = prepareUser(checkout); sendUserData(userData); // Trigger Edgetag edgetag("tag", "InitiateCheckout", { ...getPayload(checkout, event.context.document.location.origin, true), checkoutUrl: event.context.document.location.href }); // Trigger Axon _axq("analytics:send", { namespace: "Initiate Checkout", data: { ...getPayload(checkout, event.context.document.location.origin), checkoutUrl: event.context.document.location.href, ...(window.axonData.visitor && window.axonData.visitor) } }); }); // Event: Payment Info Submitted analytics.subscribe("payment_info_submitted", (event) => { const checkout = event.data.checkout; const userData = prepareUser(checkout); sendUserData(userData); // Trigger Edgetag edgetag("tag", "AddPaymentInfo", { currency: checkout.totalPrice.currencyCode, value: checkout.totalPrice.amount }); _axq("analytics:send", { namespace: "Added Payment Info", data: { currency: checkout.totalPrice.currencyCode, value: checkout.totalPrice.amount, ...(window.axonData.visitor && window.axonData.visitor) } }); }); // Event: Checkout Started analytics.subscribe("checkout_completed", (event) => { const checkout = event.data.checkout; const userData = prepareUser(checkout); sendUserData(userData); const orderId = checkout.order.id.toString().replace("gid://shopify/OrderIdentity/", ""); // Trigger Edgetag edgetag("tag", "Purchase", { ...getPayload(checkout, event.context.document.location.origin, true), orderId, eventId: orderId }); // Trigger Axon _axq("analytics:send", { namespace: "Purchase", data: { orderId, eventId: orderId, ...(window.axonData.visitor && window.axonData.visitor) } }); }); // Event: Search Submitted analytics.subscribe("search_submitted", (event) => { // Trigger Edgetag edgetag("tag", "Search", { search: event.data.searchResult?.query || "" }); // Trigger Axon _axq("analytics:send", { namespace: "Search", data: { search: event.data.searchResult?.query || "", ...(window.axonData.visitor && window.axonData.visitor) } }); }); // Event: Checkout Address Info Submitted analytics.subscribe("checkout_address_info_submitted", (event) => { const userData = prepareUser(event.data.checkout); sendUserData(userData); }); // Event: Checkout Contact Info Submitted analytics.subscribe("checkout_contact_info_submitted", (event) => { const userData = prepareUser(event.data.checkout); sendUserData(userData); }); // Event: Checkout Shipping Info Submitted analytics.subscribe("checkout_shipping_info_submitted", (event) => { const userData = prepareUser(event.data.checkout); sendUserData(userData); //console.log(" - Checkout Shipping: ", event.data.checkout); }); // Event: Viewed Checkout analytics.subscribe("page_viewed", (event) => { // Setup target terms let checkoutKeywords = ['cart', 'checkout']; // Check URL const url = event.context.document.location.href; if(checkoutKeywords.some(function(v) { return url.indexOf(v) > -1 })) { // Trigger Edgetag edgetag("tag", "PageView"); _axq("analytics:send", { namespace: "Viewed Checkout", data: { url: url, ...(window.axonData.visitor && window.axonData.visitor) } }); } }); // Event: Viewed Product analytics.subscribe("product_viewed", (event) => { const item = event.data.productVariant; const title = getTitle(item); // Trigger Edgetag edgetag("tag", "ViewContent", { currency: item.price.currencyCode, value: item.price.amount, contents: [ { id: item.product.id, variantId: item.id, sku: item.sku, quantity: 1, item_price: item.price.amount, title, image: prepareImage(formatUrl(item.image?.src)), brand: item.product.vendor || "", category: item.product.type || "", url: event.context.document.location.href, type: "product", }, ], }); // Trigger Axon _axq("analytics:send", { namespace: "Viewed Product", data: { currency: item.price.currencyCode, value: item.price.amount, contents: [ { id: item.product.id, variantId: item.id, sku: item.sku, quantity: 1, item_price: item.price.amount, brand: item.product.vendor || "", category: item.product.type || "", type: "product", }, ], ...(window.axonData.visitor && window.axonData.visitor) } }); // Identify customer (if possible) const customerId = getCustomerId(); if(customerId) { _axq("customer:identify", { traits: { shopify_customer_id: customerId } }); } });
Related Collections