Do I need to worry about the FPC here?
Yes, if you are using dynamic contents.
Should I be using a UI component for this?
It depends. UI component is an extended version of knockout js MVVM pattern. The main purpose of UI component is to add updates to DOM elements. Have a look at
app/code/Magento/Checkout/view/frontend/templates/cart/minicart.phtml
app/code/Magento/Checkout/view/frontend/web/js/view/minicart.js
app/code/Magento/Checkout/view/frontend/web/template/minicart/content.html
If you do not want to add any updates to the DOM you do not need to use UI component.
Check how they have implemented GoogleTagManager without UI components.
app/code/Magento/GoogleTagManager/view/frontend/templates/js.phtml
Most of the data in the front end are observable. So if you want to track events like add to cart you can subscribe observable related object.
E.g
define([
'Magento_Customer/js/customer-data'
], function (customerData) {
'use strict';
function initialize() {
var cartData = customerData.get('cart');
cartData.subscribe(function (updatedCart) {
// do what ever with updated cart
}, this);
}
document.observe('dom:loaded', function() {
initialize();
});
});
Would this be the recommended approach for implementing these kinds of things in Magento 2?
I think so. Have a look at the way Magento implemented the mini cart. They have stored data in local storage and bind to the DOM using observable. Check app/code/Magento/Customer/view/frontend/web/js/customer-data.js how they store, retrieve and update data from/to local storage.
There is a plugin that can be used to debug knockout js context. https://chrome.google.com/webstore/detail/knockoutjs-context-debugg/oddcpmchholgcjgjdnfjmildmlielhof
