@newskit-render/my-account 7.25.1 → 7.26.0-alpha.0

package/README.md

@@ -36,7 +36,9 @@ ACCOUNT_PROVIDER_INTERNAL_AUTH0_DOMAIN, ACCOUNT_PROVIDER_INTERNAL_CLIENT_ID, and
 If you are interested in my-account - CPS integration and you want some in-depth info about it, you can have a look at our space in [confluence](https://nidigitalsolutions.jira.com/wiki/spaces/NPP/pages/3004694700/PP+My+Account+-+MAIN)
 
 ### **Step-up MFA**
+
 To enable step-up MFA both `@newskit-render/api` and `@newskit-render/my-account` should have following environment variables:
+
 ```
 ENABLE_STEPUP_MFA="true"
 STEPUP_MFA_GO_TO_URI=""
@@ -45,6 +47,112 @@ STEPUP_MFA_GO_TO_URI=""
 ENABLE_STEPUP_MFA: disables MFA if set to anything other then 'true' or excluded
 STEPUP_MFA_GO_TO_URI: used to decide where to redirect user on succesfull MFA calls.
 
+### **Tracking user interactions - Tealium config**
+
+We rely on Tealium in combination with Newskit to track user interaction. In the my-account package we track user interactions ( such as clicking ) in two ways, depending on what component we want to track:
+
+When using Newskit components that are by nature interactive ( buttons, switches, links, etc. ) we pass an `eventContext` object, with the following shape:
+
+```
+eventContext: {
+    key[string]: string
+}
+```
+
+which contains the Tealium key-value pairs needed for analytics (e.g. `event_navigation_name: "sidebar option selection"`)
+And an
+
+```
+eventOriginator: string
+```
+
+used to pass information on which interactive element was used to trigger the event ( e.g. `eventOriginator: "primary button"`).
+Wrapper components, exported form shared-components, such as the ButtonGroup, use the `eventOriginator` and `eventContext` internally.
+
+For example, when using the ButtonGroup component, exported from shared-components, we can pass the Teallium configuration for the buttons as such:
+
+```
+props: {
+        buttonGroupProps: {
+          primaryButton: {
+            text: 'Save',
+            eventContext: {
+              event_navigation_action: 'navigation',
+              event_navigation_name: 'button:save',
+              event_navigation_browsing_method: EventTrigger.Click,
+            },
+            ariaLabel: 'Save and go back to ...',
+          },
+          secondaryButton: {
+            eventContext: {
+              event_navigation_action: 'navigation',
+              event_navigation_name: 'button:cancel',
+              event_navigation_browsing_method: EventTrigger.Click,
+            },
+            ariaLabel: 'Cancel and go back to ...',
+            href: '[baseURL]/my-url',
+          },
+        },
+        ...moreContext,
+      },
+
+```
+
+The ButtonGroup will add the event originator automatically.
+
+For the components that are _NOT_ naturally interactive ( like the StructuredListItem ), but we have added interactivity to them, the Tealium tracking can be added with the function `createClickEvent`, which is exported from [shared-components](https://github.com/newscorp-ghfb/ncu-newskit-render/blob/0863db264f900d618688d908bad3b07f0ce65a03/packages/shared-components/src/utils/tracking.tsx) package.
+
+It takes the following params:
+
+```
+createClickEvent(
+originator: string,
+text: string,
+label?: string,
+articleParentName?: string,
+pageName?: string,
+event_navigation_action = 'navigation'
+)
+```
+
+And returns a Tealium configuration object for a click event.
+
+When using this function, we rely on the `PUBLISHER` environment variable to keep the tracking title agnostic. In the future, we will move the Teallium configuration for these cases to the contexts.
+
+**Page loading events**
+
+In many cases we want to track visitor’s landing on a page. To do this, we use the [usePageViewTracking](https://github.com/newscorp-ghfb/ncu-newskit-render/blob/0863db264f900d618688d908bad3b07f0ce65a03/packages/shared-components/src/utils/tracking.tsx) hook, exported from `shared-components`. The hook accepts an object as an argument:
+
+```
+interface TealiumEventContext {
+  originator: string
+  context: Record<string, string>
+}
+```
+
+And is triggered only if such an object is passed to it via the page’s context.
+
+The context’s key for page view tracking is `tealiumContext`. For example:
+
+```
+const personalDetailsContext = {
+  …otherContextValues,
+  tealiumContext: {
+    originator: 'page view',
+    context: {
+      page_site_name: ‘you ‘site name,
+      page_section: 'my account',
+      page_type: ‘personal ‘details,
+      page_restrictions: 'restricted',
+      page_name: 'personal details',
+      ‘some_other_key’: ‘some other value’
+    },
+  },
+}
+```
+
+For contributors: the rules for keeping the package title agnostic are the same.
+
 ### **Theming**
 
 The my-account package appearance can be controlled by a custom theme. The package uses NewsKit's theming system to enable customisation. See [Newskit theming](https://www.newskit.co.uk/theming/overview)
@@ -743,6 +851,7 @@ infoBanner {
   disableClose?: boolean
 }
 ```
+
 When the close button is clicked, a new object with the key as the banner name and the value as "dismissed" will be added to the local storage. The banner will remain invisible as long as this local storage value is present.
 
 ## Address Form - Loqate

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/my-account",
-  "version": "7.25.1",
+  "version": "7.26.0-alpha.0",
   "description": "Newskit Render",
   "author": "",
   "license": "UNLICENSED",