Tracking

File Structure

index.js

• Initialize the api, repository, and service with context passsed in (set in ecommerce Core)
• Register UI components for global use within the site (using Vue.use(component))
• Set the context equal to the service, routing all method calls to the Service file
• Call TrackerFactory to initialize each tracking provider available within the region (using tracking/factory.js)

service.js

• Initialize repository passed in from index.js
• Route each method call to the repository to be processed ::: warning Note trackEvent() expects a string type event (‘purchase’, ‘cart-updated’, etc.) and the eventData (formatted cart data, shipping address, etc.) :::

repository.js

• Initialize api, context, cartRepository, cart, order, and trackerConfigs passed in from index.js
• configureTrackers()
  • Loop through trackerConfigs and add an instantiated tracker instance to an array
  • Return array of trackers to frontend
• getCookieAccept()
  • Get the accepted cookie from the user’s local storage
• setCookieAccept()
  • Create an item on local storage that signifies the user has accepted cookies for the site
• optIn()
  • Call each tracker’s optIn() abstracted method
• optOut()
  • Call each tracker’s optOut() abstracted method
• getTrackerServices()
  • Return all trackers within the site (region)
• trackEvent()
  • Call API to track event, passing in event and event data

api.js

• Initialize store and api passed in from index.js
• trackEvent()
  • Call HQ to route the event and eventData to each tracker
  • If the tracker has an event that matches, it will use the eventData and return the resulting data (likely API call data)

factory.js

• Using a switch statment, loop through each imported tracker directory available and return the directory that matches the trackerConfig.type requested

Providers

For each provider, an index.js file is provided. This file extends the SiteTracker and overrides the optIn() method at least. This method is used to initiate loading the tracker’s script on the site, used to track user interactions with the site. Current providers are listed below:

• Drip
  • Download Python scripts for bulk updating and creating products
  • Download HTML email footers for OZ and BOL
  • Documentation Links
    • Cart, Order, or Product Activity
    • JS Identifying users
    • JS Track Event
• Facebook
• GTag
• GTM
• Hotjar
• Misc
• Pinterest
• Rakuten
• Tiktok

Components

index.js

• Register CookiePopup as a globally available component (ec-cookie-popup)

items.vue

• Provide an interface built using <slot> tags to allow sites to customize based on this template
• Popup displays the bodyCopy and two buttons that are used to Accept or Deny the cookies for the site (which call optIn() and optOut() respectively)