Documentation

# How to Implement Product Analytics for Fundraise Up

# Code Usage

The integration uses FundraiseUp JavaScript API (opens new window) to listen for FundraiseUp events. FundraiseUp will call standard Luminate functions identified below to trigger analytics code. All other dependencies will get automatically triggered by the analytics functions.

# Events that need to be tracked

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

  • Product view - recorded when the FundraiseUp form is rendered
  • Addition to cart - no corresponding event in FundraiseUp API
  • Removal from cart - no corresponding event in FundraiseUp API
  • Cart view, if cart is present - no corresponding event in FundraiseUp API
  • Billing view, if present - no corresponding event in FundraiseUp API
  • Shipping view, if present - no corresponding event in FundraiseUp API
  • Checkout, attempt to purchase - no corresponding event in FundraiseUp API
  • Purchase & check for auto user login, on successful transaction

# Product tracking

# 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.



 
 











{
  price: {
    basePrice: pricePerItem,
    totalPrice: totalPriceForItem
  },
  productInfo: {
    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 id, name, and category patterns

  • product category ''Donation: Form: ' + fundName' for standard donations
  • product id 'donation-form-' + formId + '-' + donationFrequency
  • product name 'Donation: ' + appealName + ': ' + donationFrequency

appealName - name of the appeal from the donation form name. formId - donation form id. donationFrequency - recurring frequency of the donation one-time or monthly.

# Functions for tracking analytics events

# Page view tracking

If there is a unique page view or a virtual page view that needs to be recorded, call trackPageViewAnalytics() or trackVirtualPageViewAnalytics(pageName) respectively. trackPageViewAnalytics() will read the title of the page, while the name of the virtual page can be passed through as a parameter to the trackVirtualPageViewAnalytics(pageName).

# Product view

Use function setProductViewAnalytics(products) to set the product details into the data layer. The parameter products should contain an array of objects in the format defined above. The data set with this function will appear in digitalData.cart.productView.

If at any time the product details are updated, like quantity or price use the function updateProductViewAnalytics(product) to update the data layer. Note, this is necessary as other functions will rely on data already set in the data layer. This function accepts an object in the format defined above and will update the item only if the product ids match.

Once the details are set, function trackProductView() must be called to record the product view event. Note that it is done slightly differently on the existing Luminate Online donation forms, as there we record a page view and product view all at once, since the data is available on page load.

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

# Add product to cart

Once the product is added to cart, call the function setProductToCartFromProductViewAnalytics(productId) to trigger add to cart analytics event. This function assumes that product view was already called on this page and will be read from the data layer set by the product view details in the data layer. For donations, the cart addition occurs whenever the amount changes from 0 to any valid value. For donations, when a tip-up product is selected the tip-up product should be added. When a donation recurrence changes from one-time to monthly, or vice versa the old product needs to be removed from cart and a new one added.

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

Once the product is removed from cart, call the function removeFromCartFromProductViewAnalytics(productId) to trigger remove from cart analytics event. This function assumes that product view was already called on this page and will be read from the data layer set by the product view details in the data layer. For donations, the cart removal occurs whenever the amount changes from any valid value to 0. For donations, when a tip-up product is removed. When a donation recurrence changes from one-time to monthly, or vice versa the old product needs to be removed from cart and a new one added.

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

# Cart and shipping view

There is no cart view in donation flow so this is omitted.

# Billing view

When a billing page is presented to the user we need to set all the products that are in the symbolic cart into the data layer. Call setCartContents(products) to set the data. products must be an array of objects in the format defined above. Note, that this functions puts the data into a different place in a data layer than page view, indicating that we have a transaction. The data passed to this function will appear in digitalData.transaction.item;

After the details are set into the data layer call trackBillingPageViewAnalytics() to record a billing page view.

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

# Review, confirmation, or checkout view

This is the last page a user sees before the transaction is processed. Call setCartContents(products) to set cart details into the data layer. products must be an array of objects in the format defined above. Note, that if there was no page reload event after the viewing of the billing page, resetting of the data is not necessary, unless it has changed.

After the details are set into the data layer call trackReviewPageViewAnalytics() to record a review page view.

If there is no separate screen to review the transaction, execute the function when the user clicks on the last submit button right before the transaction is processed.

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

# Purchase view

In general, the purchase event is recorded as soon as the transaction is processed.

Use setCartContents(products) to set the cart contents on page load, if it wasn't already set.

Use setTransactionAnalytics(trackingCode, trackingCodePrefix, sourceCode, paymentType) to set the transaction details into analytics for reconciliation and accurate tracking. Each parameter must be as follows:

  • {String} trackingCode - A transaction confirmation code.
  • {String} trackingCodePrefix - Three character code denoting the module, in this case 'don'.
  • {String} sourceCode - A special source code that is set on donation forms only to aid with BBIS integration.
  • {String} paymentType - Type of payment that was used for a transaction. Common values are 'credit', 'paypal'.

Both these functions will set information in the data layer at digitalData.transaction.

Once the data is set, call trackTransactionSuccessAnalytics() function to fire off the successful transaction event. This function was defined to send the information to analytics only once even if it's called multiple times.

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

← Generic product scripts →