Documentation

# Generic Analytic Scripts for All Products

This is a new configuration for tracking all products across the checkout flow. These functions should be used for all transactions. Note that due to historical reasons some of the old modules do not rely on these functions. These functions were written to be standard, universal and not opinionated.

# Events that need to be tracked

Any product will need to have the following steps recorded in analytics:

  • Product view
  • Addition to cart
  • Removal from cart
  • Cart view, if cart is present
  • Billing view, if present
  • Shipping view, if present
  • Checkout, attempt to purchase
  • Purchase & check for auto user login, on successful transaction.

# Generic product details object format

For simplicity, one product format was configured to be used in all functions. The format was defined by Adobe in the original scope for e-commerce products only and does not follow any legible naming convention. However, this nonstandard naming is currently being parsed by the DTM (Adobe's tag manager), so we must leave it in place. Some functions take an array of products and others only one product, the format for each product is always the same. Note, that for some events price is optional. However, it is required for the purchase event to accurately record the transaction value. The value variables that are prefixed with a name of the module like donation or sponsorship are only set in those modules and should not be set in other modules as they don't apply.



 
 













 
 
 
 




{
  price: {
    basePrice: pricePerItem,
    totalPrice: totalPriceForItem
  },
  productInfo: {
    age: sponsorshipOnlyChildage,
    birthDay: sponsorshipOnlyChildBirthDay,
    birthMonth: sponsorshipOnlyChildBirthMonth,
    childID: sponsorshipOnlyChildChildID,
    country: sponsorshipOnlyChildCountry,
    daysWaiting: sponsorshipOnlyChildDaysWaiting,
    frequency: sponsorshipOnlyFrequency,
    gender: sponsorshipOnlyChildGender,
    hasupcomingbirthday: sponsorshipOnlyChildHasUpcomingBirthday,
    sog: sponsorshipOnlyChildSog,
    fundName: donationProductsOnlyFundName,
    productcategory: productCategory,
    productID: productId,
    productname: productName,
    productQty: productQuantity,
    renewalFrequency: donationOnlyAutoRenewalFrequency
  }
}

The data provided will be set in the data layer and with DTM propagated into Adobe Analytics. For all calls, we utilize the standard product string s.products to send information to Adobe Analytics. Some product details are set as variables as they are not present in the product string, many of them are set for redundancy. These variables are the product name, product category, fund, and donation frequency in the checkout flow. On the transaction success, the variables for payment method, transaction ids, how did you hear about us are also set.

# Product name and id convention

Please see the naming patterns document for more information on the standard product naming pattern.

# Functions for tracking analytics events

# Product view

Use function setProductViewAnalytics(products) in /src/js/lib/transaction-analytics/. See above and function documentation for details on what is the expected format of the function arguments. This function will add the product details into the data layer and keep it there. Ex: Tip-up product only on a donation form (opens new window)

If at any time the product pricing or anything but id has changed, use function updateProductViewAnalytics(product) to update the product details in the data layer. The function is also located in /src/js/lib/transaction-analytics/ folder.

To record that the product was viewed call trackProductView() function.

Product view event calls ecommerce_product_view DTM event, which in turn calls prodView Adobe Analytics event.

# Add product to cart

The product should be added to cart when the quantity changes from 0 to a number greater than 0. The add to cart event should not fire when product quantity changes. For donation products, the add to cart event should fire when the donation amount changes from 0 to a number greater than 0.

We have two functions for adding a product to cart.

  1. Use function setProductToCart() in /src/js/lib/transaction-analytics/ if we haven't set the product view on the page yet or product view wasn't tracked. See above and function documentation for details on what is the expected format of the function arguments. Ex: Tip-up product only on a donation form (opens new window) TODO: Move into global /src/js/lib/transaction-analytics folder for reuse across all modules, if other modules starts to use it.

  2. Use function setProductToCartFromProductViewAnalytics(productId) in /src/js/lib/transaction-analytics/ if we have registered the product view on the page. This function is added for simplicity, so the product object doesn't have to be created after the product view, we just look it up as is in the data layer. Ex: Tip-up product only on a donation form (opens new window)

Add product to cart event calls the ecommerce_add_to_cart DTM event, which in turn calls scAdd Adobe Analytics event.

# Remove product from cart

We have only one standard function for removing a product from cart, it assumes that we have viewed the product on the existing page and all the information about the product is available in the data layer. The generic version of the function can be added once the need for it arises.

The remove product from cart should be fired when it's explicity removed from cart or the quanity changes to 0. For donation products, the remove from cart event should fire when the donation amount changes from a number greater than 0 to 0.

Use function removeFromCartFromProductViewAnalytics(productId) in /src/js/donation/library/ if we have registered the product view on the page. This function is added for simplicity, so the product object doesn't have to be created after the product view, we just look it up as is in the data layer. Ex: Tip-up product only on a donation form (opens new window) TODO: Move into global /src/js/lib/transaction-analytics folder for reuse across all modules, if other modules starts to use it.

Remove product from cart event calls the ecommerce_remove_cart DTM event, which in turn calls scRemove Adobe Analytics event.

# E-commerce & sponsorship

E-commerce & Sponsorship have their own function for product removal it can be called using window.ecommCart.removeProductFromCart(productType, productInfo). The function is scoped to E-commerce cart and is not used outside of it.

# Cart view

Only E-commerce has a true cart view. Functions inside the combo cart code handle this view.

# Billing & shipping views

For all products, except for the E-commerce and the combo cart, the billing view is recorded on the page view, the separate event call is not required. However, we need to ensure that the products that are set to 'cart' are recorded. Use setCartContents(products) function in src/js/lib/transaction-analytics/. This function was created for global reuse across generic products & E-commerce and combo cart.

Use trackBillingPageViewAnalytics() to record a billing page view after cart contents have been set.

Billing view event calls ecommerce_billing_view DTM event which maps to the event55 in Adobe Analytics.

# Checkout, review confirmation view

In general, the form submission on the last page should be recorded when the user submits the form. As long as the cart contents are set on the page with the function setCartContents(products).

Use trackReviewPageViewAnalytics() to record a review page view after cart contents have been set.

Review, checkout view event calls ecommerce_review_view DTM event, which in turn callsscCheckout Adobe Analytics event.

# Purchase view

In general, the purchase event must be recorded only one time once the transactions goes through successfully.

Use setCartContents(products) to set the cart contents on page load.

Use setTransactionAnalytics(trackingCode, trackingCodePrefix, sourceCode, paymentType) function in /src/js/lib/transaction-analytics/ to set the transaction number into analytics for reconciliation and accurate tracking.

Use trackTransactionSuccessAnalytics() function to fire off the successful transaction event. This event will only record a transaction and will not do anything about a page view. If necessary call trackPageViewAnalytics() or trackVirtualPageViewAnalytics(pageName) to record a page view event.

Purchase view calls event ecommerce_thankyou_view DTM event, which in turn calls purchase Adobe Analytics event.

← Interaction tracking →