Manage Subscription

Tutorial

Watch this tutorial to follow along!

Pixelflow - SquareSpace

IMPORTANT: Please copy the code below, then go to your Framer site's Settings -> In General settings, scroll down to the Custom code option -> Paste your code in the Head code section and save it.

<script> Your Square Space Script ...</script>

Warning Update your code

Please copy this code and paste it into your head
code. Make sure you remove your previous code.‍

IMPORTANT: Please copy the code below, then go to your Framer site's Settings -> In General settings, scroll down to the Custom code option -> Paste your code in the Head code section and save it.

<script> Your Square Space Script ...</script>

<script>
     
  const currency="usd";
  const siteId="{{siteId}}";const apiKey="{{apiKey}}";function generateFbp(){const versionPrefix="fb";const subdomainIndex=1;let firstCreationTime=localStorage.getItem("firstCreationTime");let randomNumber=localStorage.getItem("randomNumber");if(!firstCreationTime||!randomNumber){firstCreationTime=(new Date).getTime();randomNumber=Math.floor(Math.random()*1e10);localStorage.setItem("firstCreationTime",firstCreationTime);localStorage.setItem("randomNumber",randomNumber)}return versionPrefix+"."+subdomainIndex+"."+firstCreationTime+"."+randomNumber}function generateFbc(){const versionPrefix="fb";const subdomainIndex=1;const urlParams=new URLSearchParams(window.location.search);const fbclid=urlParams.get("fbclid");if(fbclid){let creationTime=localStorage.getItem("fcCretnTm");if(!creationTime){creationTime=(new Date).getTime();localStorage.setItem("fcCretnTm",creationTime)}const fbcValue=versionPrefix+"."+subdomainIndex+"."+creationTime+"."+fbclid;return fbcValue}return null}async function getGeoLocation(){try{let locInfo;locInfo=JSON.parse(localStorage.getItem("loc_pf"));if(!locInfo||Object.keys(locInfo).length===0){const response=await fetch("https://ipinfo.io/json");if(!response.ok){throw new Error("HTTP error! Status:",response.status)}const json_data=await response.json();locInfo={st:json_data?.region,zp:json_data?.postal,ct:json_data?.city,country:json_data?.country};const hashedEntries=await Promise.all(Object.entries(locInfo).map(async([key,val])=>[key,await sha256(val.toLowerCase())]));locInfo=Object.fromEntries(hashedEntries);localStorage.setItem("loc_pf",JSON.stringify(locInfo))}return locInfo}catch(error){console.error("Fetch error:",error);return error}}const getCustomerData=async container=>{const elementSelectors={em:".info-cust-em-pf",fn:".info-cust-fn-pf",ph:".info-cust-ph-pf",ln:".info-cust-ln-pf"};const customerData={};if(!container){let keys=["em","fn","ph","ln"];keys.map(async key=>{customerData[key]=await sha256("")});return customerData}for(const[key,selector]of Object.entries(elementSelectors)){const element=container.querySelector(selector);customerData[key]=await sha256(element?element.innerText.toLowerCase():"")}return customerData};async function sendData(eventName,eventTime,siteURL,additionalData,customerData){const apiEndpoint="https://pixelflow-5f2c02572bf1.herokuapp.com/event";let locInfo=await getGeoLocation();let eventData={eventName:eventName,eventTime:eventTime,siteURL:siteURL,additionalData:additionalData,customerData:Object.assign(customerData,locInfo),actionSource:"website",clkId:generateFbc(),fbpValue:generateFbp()};let payload={eventData:eventData,siteId:siteId,testEvents:false,apiKey:apiKey};navigator.sendBeacon(apiEndpoint,JSON.stringify(payload))}let extractPrice=text=>{if(!text)return null;const numericRegex=/\d+(\.\d+)?/;const matches=text.match(numericRegex);return matches?parseFloat(matches[0]):null};async function sha256(str){str=str?.toLowerCase();const buffer=(new TextEncoder).encode(str);const hashBuffer=await crypto.subtle.digest("SHA-256",buffer);const hashArray=Array.from(new Uint8Array(hashBuffer));const hashHex=hashArray.map(byte=>byte.toString(16).padStart(2,"0")).join("");return hashHex}function handleButtonClick(button,eventName){button.addEventListener("click",async function(e){let additionalData={};let customerData={};const frmCntnr=button.closest(".info-frm-cntr-pf");switch(eventName){case"AddToCart":const parentContainer=button.closest(".product-details");let productName;let productPrice;if(parentContainer){productName=parentContainer.querySelector(".ProductItem-details-title")?.innerText;let priceText=parentContainer.querySelector(".product-price")?.innerText;productPrice=parseFloat(priceText.replace(/[^0-9.]/g,""))}if(productName)additionalData.contentName=productName;if(productPrice)additionalData.value=productPrice;customerData=await getCustomerData();additionalData.currency=currency;additionalData.contentType="Product";break;case"AddPaymentInfo":case"CompleteRegistration":case"Lead":case"StartTrial":case"Contact":case"SubmitApplication":if(frmCntnr){const value=extractPrice(frmCntnr.querySelector(".info-val-pf")?.innerText);if(value)additionalData.value=value;customerData=await getCustomerData(frmCntnr)}additionalData.currency=currency;break;case"Subscribe":const formContainer=document.querySelector(".newsletter-form-body");const emailInput=formContainer.querySelector('input[name="email"]');const email=emailInput.value.trim();if(email){additionalData.custom_data={email:email}}customerData=await getCustomerData();break;default:customerData=await getCustomerData();break}const eventTime=Math.floor(Date.now()/1e3);const siteURL=window.location.href;sendData(eventName,eventTime,siteURL,additionalData,customerData)})}async function handleSearch(input,eventName,btn){const eventTime=Math.floor(Date.now()/1e3);const siteURL=window.location.href;const additionalData={searchStr:input.value};const customerData=await getCustomerData();const sendDataHandler=()=>sendData(eventName,eventTime,siteURL,additionalData,customerData);input.addEventListener("keypress",event=>event.key==="Enter"&&sendDataHandler());btn&&btn.addEventListener("click",e=>{e.preventDefault();sendDataHandler()})}async function handlePageVisit(){let eventTime=Math.floor(Date.now()/1e3);let siteURL=window.location.href;const customerData=await getCustomerData();sendData("ViewContent",eventTime,siteURL,{},customerData);const trackedData={{trackingUrl}};trackedData.forEach(data=>{if(siteURL.startsWith(data.url)){sendData(data.event,eventTime,siteURL,{},customerData)}})}handlePageVisit();let addListeners=()=>{const buttonsAndEvents=[{selector:".action-btn-pymt-001-pf",eventName:"AddPaymentInfo"},{selector:".newsletter-form-button",eventName:"Subscribe"},{selector:".action-btn-cntct-003-pf",eventName:"Contact"},{selector:".action-btn-trial-012-pf",eventName:"StartTrial"},{selector:".cart-checkout-button",eventName:"Purchase"}];buttonsAndEvents.forEach(({selector,eventName})=>{const button=document.querySelector(selector);if(button)handleButtonClick(button,eventName)});const otherActions=[{buttons:".action-btn-lead-011-pf",eventName:"Lead"},{buttons:".sqs-add-to-cart-button",eventName:"AddToCart"},{buttons:".action-btn-wl-006-pf",eventName:"AddToWishlist"},{buttons:".action-btn-reg-007-pf",eventName:"CompleteRegistration"},{buttons:".action-btn-cstm-008-pf",eventName:"CustomizeProduct"},{buttons:".action-btn-don-009-pf",eventName:"Donate"},{buttons:".action-btn-buy-004-pf",eventName:"InitiateCheckout"},{buttons:".action-btn-submit-013-pf",eventName:"SubmitApplication"}];otherActions.forEach(({buttons,eventName})=>{const buttonElements=document.querySelectorAll(buttons);if(buttonElements)buttonElements.forEach(button=>handleButtonClick(button,eventName))});function hndlBtnClk(eventName,btn,inputSelector){const prntCntnr=btn.closest(".info-srch-ctnr-pf");const inputElement=prntCntnr.querySelector(inputSelector);handleSearch(inputElement,eventName,btn)}document.querySelectorAll(".action-inpt-srch-014-pf").forEach(input=>handleSearch(input,"Search"));document.querySelectorAll(".action-btn-srch-015-pf").forEach(btn=>hndlBtnClk("Search",btn,".action-inpt-srch-014-pf"));document.querySelectorAll(".action-inpt-loc-016-pf").forEach(input=>handleSearch(input,"FindLocation"));document.querySelectorAll(".action-btn-loc-017-pf").forEach(btn=>hndlBtnClk("FindLocation",btn,".action-inpt-loc-016-pf"))};const handleCheckoutClick=async event=>{event.preventDefault();const cartItemsContainer=document.querySelector("#sqs-cart-container .cart-container");if(cartItemsContainer){const cartRows=Array.from(cartItemsContainer.querySelectorAll(".cart-row"));const products=cartRows.map((row,index)=>{const name=row.querySelector(".cart-row-title")?.innerText.trim();const quantity=Number(row.querySelector(".cart-row-qty-input")?.value)||null;const priceText=row.querySelector(".cart-row-price")?.innerText.trim();const price=priceText?parseFloat(priceText.replace(/[^0-9.]/g,"")):null;return{id:name,item_price:price,quantity:quantity}});const filteredProducts=products.filter(product=>Object.values(product).some(value=>value!==null));const subtotalText=document.querySelector(".cart-subtotal-price")?.innerText.trim();const subtotal=subtotalText?parseFloat(subtotalText.replace(/[^0-9.]/g,"")):null;const additionalData={contents:filteredProducts,currency:"USD",value:subtotal||1};const eventTime=Math.floor(Date.now()/1e3);const siteURL=window.location.href;let customerData=await getCustomerData();sendData("InitiateCheckout",eventTime,siteURL,additionalData,customerData)}else{}};const addCheckoutButtonListener=()=>{const cartContainer=document.querySelector("#sqs-cart-container");if(cartContainer){setTimeout(()=>{const checkoutButton=cartContainer.querySelector(".cart-checkout-button");if(checkoutButton){checkoutButton.addEventListener("click",handleCheckoutClick)}},1200)}};const sendPurchaseEvent=async()=>{let products;const allProductLists=document.querySelectorAll("ul.css-31bpaj");allProductLists.forEach((productList,index)=>{const productLink=productList.querySelector("a[id*='item-0-product-page-link-name']");if(productLink){const productElements=productList.querySelectorAll(":scope > li");products=Array.from(productElements).map((row,index)=>{const name=row.querySelector("a[id*='product-page-link-name']")?.innerText.trim();const quantityText=row.querySelector("span[id*='quantity']")?.innerText.trim();const quantity=quantityText?parseInt(quantityText.replace("Qty: ",""),10):null;const priceText=row.querySelector("p[id*='price']")?.innerText.trim();const price=priceText?parseFloat(priceText.replace(/[^0-9.]/g,"")):null;return{id:name||`item-${index}`,item_price:price,quantity:quantity}})}});const totalText=document.getElementById("total-price")?.innerText.trim()||"0";const totalAmount=parseFloat(totalText.replace(/[^0-9.]/g,""));const filteredProducts=products.filter(product=>Object.values(product).some(value=>value!==null));
const additionalData={contents:filteredProducts,contentType:"Product",currency:"USD",value:totalAmount||1};let customerData=await getCustomerData();const eventTime=Math.floor(Date.now()/1e3);const siteURL=window.location.href;sendData("Purchase",eventTime,siteURL,additionalData,customerData)};async function checkAndSendEvent(){if(window.location.pathname.includes("/commerce/orders")){let customerData=await getCustomerData();const eventTime=Math.floor(Date.now()/1e3);const siteURL=window.location.href;sendData("AddPaymentInfo",eventTime,siteURL,{currency:currency},customerData);setTimeout(()=>{sendPurchaseEvent()},6000)}}document.addEventListener("DOMContentLoaded",event=>{addListeners();const observeCartContainer=()=>{const cartContainerParent=document.body;const observer=new MutationObserver(mutations=>{mutations.forEach(mutation=>{if(mutation.type==="childList"){const cartContainer=document.querySelector("#sqs-cart-container");if(cartContainer){addCheckoutButtonListener();observer.disconnect()}}})});observer.observe(cartContainerParent,{childList:true,subtree:true})};observeCartContainer();window.addEventListener("popstate",checkAndSendEvent);window.addEventListener("hashchange",checkAndSendEvent);checkAndSendEvent()});

</script>

Pixels setting

Status	Name	Meta Pixel	Action

Tracking Urls

URL	Event