Organizations that use Fonteva, such as associations, nonprofits, and membership groups, sell registrations, memberships, and products through a cart, even if the site doesn’t feel like a typical store.
GA4’s e-commerce events are the best way to measure this activity and send conversions to Google Ads, LinkedIn, or your ad platform of choice. The problem is that Fonteva doesn’t send GA4 events by default, and it's a single-page app (SPA), so “fire on /cart” pageview rules don't work.
This guide shows how to implement GA4’s add_to_cart in Google Tag Manager (GTM) without changing Fonteva’s code. We watch page elements and SPA route changes, send GA4’s recommended parameters, and avoid duplicates. It’s a first step toward full-funnel tracking (view_cart, begin_checkout, purchase).
The ideal long-term approach is a first-party data layer in Fonteva or Lightning, but this gets you started now.
Glossary
-
SPA (Single-Page App): The site loads once and then swaps screens with JavaScript instead of loading new pages.
-
Route: The screen an SPA shows. In Fonteva, the route usually includes everything after the # in the URL, for example #/store/browse/detail/….
-
SPA Hop: A screen change inside the app without a full page load. You see the #… route change.
-
Cart Modal (Mini-Cart): A pop-up that appears on the product page immediately after an add. It confirms the add and offers View Cart or Checkout.
-
Stash: A temporary snapshot of the item a user is adding (id, name, price, quantity). We save it at click time to know what the user selected.
-
Clear: This is the step where we immediately remove the stashed snapshot after sending GA4, so later actions do not double-count.
-
Session Storage (sessionStorage): Small, per-tab storage in the browser that disappears when the tab closes. It’s perfect for our short-lived, per-interaction stash.
Why This Works for Fonteva
-
Fonteva often keeps users on the product route and opens a cart modal after an add. If you only watch for a cart URL, you miss the real add moment or count it late.
-
We store the selection on click to preserve the correct item, price, and quantity, even if the DOM changes.
-
We fire add_to_cart when the cart modal is visible, which is the first reliable signal that the add succeeded.
-
We clear the stash immediately to prevent duplicate fires when someone later clicks View Cart or navigates into the cart.
What We’ll Build
-
Variables that assemble GA4-ready items[], value, and a simple pending flag.
-
Two small HTML tags will be used to store the item on click and clear it after sending GA4.
-
A GA4 Event tag for add_to_cart.
-
Triggers that are SPA-safe: Element Visibility for the cart modal and History Change as a fallback.
Everything below is ordered for a clean implementation and QA path. Names are suggestions; consistency helps.
One-Time GTM Updates
Enable these in GTM → Variables → Configure:
-
Click Element, Click Text, Click Classes, Click Target
-
New History Fragment, Old History Fragment, New/Old History State, History Source
-
Page URL, Page Path, Page Hostname, Event
Note: The page URL does not include the hash. Use the New History Fragment to test routes like #/store/browse/detail/…
Step 1: Create Variables
1) Currency (Constant)
2) Pending Flag (To Check if in The Middle Of An Add?)
Custom JavaScript variable JS – Fonteva Pending Add (bool):
function(){
try { return sessionStorage.getItem('fonteva_pending_add') === '1'; }
catch(e){ return false; }
}
Reason: Gates the modal and history triggers so they only fire when a product add just started.
**3) Product Items Array (for **
add_to_cart
)
Custom JavaScript variable JS – Fonteva Items Array:
function () {
try {
var frag = (location.hash || '').replace(/^#/, '');
if (/^\/store\/(cart|checkout)(\/|$)/i.test(frag)) { return []; }
var s = sessionStorage.getItem('fonteva_item');
if (s) { var o = JSON.parse(s); if (o && o.item_id) return [o]; }
} catch (e) {}
var nameEl = document.querySelector('.pfm-detail_discount_label');
var rawName = nameEl ? nameEl.textContent.trim() : (document.title || '(unknown)');
var parts = rawName.split(' - ');
var variant = parts.length > 1 ? parts.pop().trim() : undefined;
var baseName = parts.length ? parts.join(' - ').trim() : rawName;
var priceEl = document.querySelector('.pfm-detail_discount_price .FrameworkCurrencyField') ||
document.querySelector('.pfm-details_sub_price .FrameworkCurrencyField');
var price;
if (priceEl && priceEl.textContent) {
var p = priceEl.textContent.replace(/[^0-9.]/g, '');
price = p ? parseFloat(p) : undefined;
}
var qty = 1;
var selects = Array.prototype.slice.call(
document.querySelectorAll('.pfm-detail_quantity select.slds-select')
);
if (selects.length) {
var sel = selects.find(function(s){ return s.offsetParent !== null; }) || selects[selects.length-1];
var v = (sel.value || '').trim();
if (/^other$/i.test(v)) {
var wrap = sel.closest('.pfm-detail_quantity') || document;
var inp = wrap.querySelector('input[type="number"], input[type="text"]');
if (inp && inp.value) {
var n = inp.value.replace(/[^0-9]/g, '');
qty = n ? parseInt(n, 10) : 1;
}
} else {
var n2 = v.replace(/[^0-9]/g, '');
qty = n2 ? parseInt(n2, 10) : 1;
}
}
var idMatch = location.href.match(/\/(?:detail|merch_new)\/([^/?#]+)/i);
var itemId = idMatch && idMatch[1] ? decodeURIComponent(idMatch[1])
: baseName.replace(/\s+/g, '_').toLowerCase();
var item = { item_id: itemId || '(unknown)', item_name: baseName || '(unknown)', quantity: qty };
if (typeof price === 'number') item.price = price;
if (variant) item.item_variant = variant;
return [item];
}
Reason: GA4’s add_to_cart expects items[]. We provide a single object for the item being added.
4) Product Value (Price × Quantity)
Custom JavaScript variable JS – Fonteva Value:
function () {
try {
var frag = (location.hash || '').replace(/^#/, '');
if (/^\/store\/(cart|checkout)(\/|$)/i.test(frag)) { return undefined; }
} catch(e) {}
try {
var s = sessionStorage.getItem('fonteva_item');
if (s) {
var o = JSON.parse(s);
var q = parseInt(o && o.quantity, 10) || 1;
var p = (o && typeof o.price === 'number') ? o.price : undefined;
if (typeof p === 'number' && isFinite(p)) {
var v = p * q;
return Math.round(v * 100) / 100;
}
}
} catch(e) {}
try {
var priceEl = document.querySelector('.pfm-detail_discount_price .FrameworkCurrencyField') ||
document.querySelector('.pfm-details_sub_price .FrameworkCurrencyField');
var price;
if (priceEl && priceEl.textContent) {
var num = priceEl.textContent.replace(/[^0-9.]/g, '');
price = num ? parseFloat(num) : undefined;
}
var qtyVar = {{JS - Fonteva Quantity}}; // insert via GTM picker if present
var q2 = parseInt(qtyVar, 10) || 1;
if (typeof price === 'number' && isFinite(price)) {
return Math.round(price * q2 * 100) / 100;
}
} catch(e) {}
return undefined;
}
Reason: GA4 monetization reports and Ads imports rely on a numeric value.
Step 2: Add Two Small HTML Tags
A) GA4 – Product Stash (Custom HTML)
Attach to the product button click trigger in the next step.
(function () {
try {
var now = Date.now();
var lastTs = parseInt(sessionStorage.getItem('fonteva_item_ts') || '0', 10);
var pending = sessionStorage.getItem('fonteva_pending_add') === '1';
if (pending && (now - lastTs)
Reason: We snapshot the user’s selection at click time to send the correct data when the modal confirms the add.
B) GA4 – Product Clear (Custom HTML)
No trigger of its own; we will sequence it after the GA4 event.
try {
sessionStorage.removeItem('fonteva_item');
sessionStorage.removeItem('fonteva_pending_add');
sessionStorage.removeItem('fonteva_item_ts');
} catch(e){}
Reason: Clearing immediately prevents double-counting when someone later opens the cart.
Step 3: Create Triggers
1) Product Add Button (For Stash Only)
Trigger name: Click – Add to Cart – General
Type: Click – All Elements → Some Clicks
Click Element matches CSS selector:
.pfm-details button[data-name="addToCart"],
.pfm-details button.FrameworkButton[aria-label="Add to Order"],
.pfm-details button[data-label="Add to Order"],
.pfm-details button[data-name="addToCart"] *,
.pfm-details button.FrameworkButton[aria-label="Add to Order"] *
Reason: We only stash here. No GA4 events fire on this click.
2) Cart Modal Visible (ensures the add to cart completes and is captured)
Trigger name: Add to Cart – Cart Modal Visible
Type: Element Visibility
-
Element selector: .addToCartModal .LTEShoppingCart, .slds-modal__content .LTEShoppingCart
-
Fire: Once per element
-
Minimum percent visible: 1
-
Minimum on-screen duration: 200 ms
-
Observe DOM changes: checked
Some visibility events (AND):
Reason: Many Fonteva adds happen without a route change. The modal confirms the add succeeded.
3) History Fallback (safety net, de-dupe)
Trigger name: Add to Cart – History
Type: History Change → Some History Changes
-
History Source equals hashchange
-
New History Fragment matches RegEx ^/store/(cart|checkout)(/|$)
-
JS – Fonteva Pending Add (bool) equals true
Reason: It caters to edge cases where a route change confirms the addition. Restricting to hashchange prevents duplicate fires.
Step 4: Build The GA4 Event
Tag name: GA4 – add_to_cart
Type: GA4 Event
Parameters:
-
items → {{JS – Fonteva Items Array}}
-
value → {{JS – Fonteva Value}}
-
currency → {{Currency – Constant}}
Triggers (OR):
Tag Sequencing:
In GA4 → Admin → Events, mark add_to_cart as a Key Event and import it into Ads platforms.
QA Checklist
-
On the product page, select a quantity that is not one and click Add to Order. Only GA4 – Product Stash should fire.
-
When the cart modal appears, GA4 – add_to_cart should fire on the Element Visibility event, then GA4 – Product Clear.
-
GA4 DebugView should show add_to_cart with a populated items[0] object, a numeric value, and currency set to USD.
-
Clicking View Cart should not fire another add_to_cart.
If the GA4 tag does not fire on the modal, open the Element Visibility event, click the tag, and use Why Not. Confirm the selector matches your modal, and the New History Fragment contains /store/browse/detail/. Ensure that Observe DOM changes is checked.
What This Unlocks
-
Real add-to-cart data in GA4 Monetization reports, ready to mark as a Key Event and sync to Google Ads and LinkedIn.
-
A pattern you can extend to view_cart and begin_checkout using cart-level variables, and purchase on the confirmation page with a transaction ID (ideally via a data layer push for accuracy).
Why This Matters
For membership-driven organizations, registrations and dues often fund the mission. GA4 is powerful, but only when standard events flow in with item-level detail. This GTM build provides reliable add-to-cart data without a development sprint and is fully compatible with a future first-party data layer.
Recap — Everything We Added
Variables
Tags
-
GA4 – Product Stash (Custom HTML)
-
GA4 – add_to_cart (GA4 Event)
-
GA4 – Product Clear (Custom HTML; sequenced after GA4 event)
Triggers
If you want this implemented, QA’d, or documented for your organization, we can help.