feat(TDP-1639): live flag analytics param renaming (newsuk#2900)

* renaming tracking key * lint fix * minor ammendments * renaming tracking key * lint fix * minor ammendments * fixing test * minor ammendments
lili2311 · Apr 5, 2022 · 39099ab · 39099ab
1 parent ee3e1a4
commit 39099ab
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 26 deletions.
diff --git a/packages/article-skeleton/__tests__/web/__snapshots__/tracking.web.test.js.snap b/packages/article-skeleton/__tests__/web/__snapshots__/tracking.web.test.js.snap
@@ -8,6 +8,7 @@ Array [
       "article_locked_status": "locked",
       "attrs": Object {
         "articleId": "198c4b2f-ecec-4f34-be53-c89f83bc1b44",
+        "article_flag": "no flag",
         "article_topic_tags": Array [
           "Football",
           "Manchester United FC",
@@ -21,7 +22,6 @@ Array [
         "headline": "Caribbean islands devastated by Hurricane Irma, the worst Atlantic storm on record",
         "isLocked": "locked",
         "label": "HURRICANE IRMA",
-        "other_details": "",
         "pageName": "france-defies-may-over-russia-37b27qd2s",
         "parent_site": "TIMES",
         "publishedTime": "2015-03-13T18:54:58.000Z",
@@ -46,6 +46,7 @@ Array [
       "article_locked_status": "locked",
       "attrs": Object {
         "articleId": "198c4b2f-ecec-4f34-be53-c89f83bc1b44",
+        "article_flag": "no flag",
         "article_topic_tags": Array [
           "Football",
           "Manchester United FC",
@@ -59,7 +60,6 @@ Array [
         "headline": "Caribbean islands devastated by Hurricane Irma, the worst Atlantic storm on record",
         "isLocked": "locked",
         "label": "HURRICANE IRMA",
-        "other_details": "",
         "pageName": "france-defies-may-over-russia-37b27qd2s",
         "parent_site": "TIMES",
         "publishedTime": "2015-03-13T18:54:58.000Z",
@@ -84,6 +84,7 @@ Array [
       "article_locked_status": "locked",
       "attrs": Object {
         "articleId": "198c4b2f-ecec-4f34-be53-c89f83bc1b44",
+        "article_flag": "no flag",
         "article_topic_tags": Array [
           "Football",
           "Manchester United FC",
@@ -97,7 +98,6 @@ Array [
         "headline": "Caribbean islands devastated by Hurricane Irma, the worst Atlantic storm on record",
         "isLocked": "locked",
         "label": "HURRICANE IRMA",
-        "other_details": "",
         "pageName": "france-defies-may-over-russia-37b27qd2s",
         "parent_site": "TIMES",
         "publishedTime": "2015-03-13T18:54:58.000Z",
@@ -122,6 +122,7 @@ Array [
       "article_locked_status": "locked",
       "attrs": Object {
         "articleId": "198c4b2f-ecec-4f34-be53-c89f83bc1b44",
+        "article_flag": "no flag",
         "article_topic_tags": Array [
           "Football",
           "Manchester United FC",
@@ -135,7 +136,6 @@ Array [
         "headline": "Caribbean islands devastated by Hurricane Irma, the worst Atlantic storm on record",
         "isLocked": "locked",
         "label": "HURRICANE IRMA",
-        "other_details": "",
         "pageName": "france-defies-may-over-russia-37b27qd2s",
         "parent_site": "TIMES",
         "publishedTime": "2015-03-13T18:54:58.000Z",

diff --git a/packages/article-skeleton/src/tracking/article-tracking-context.js b/packages/article-skeleton/src/tracking/article-tracking-context.js
@@ -50,7 +50,7 @@ export default Component =>
         template: get(data, "template", "Default"),
         registrationType: getRegistrationType(),
         shared: getSharedStatus(),
-        other_details: getIsLiveOrBreakingFlag(flags) || ""
+        article_flag: getIsLiveOrBreakingFlag(flags) || "no flag"
       };
     },
     trackingObjectName: "Article"

diff --git a/packages/key-facts/__tests__/web/key-facts.web.test.js b/packages/key-facts/__tests__/web/key-facts.web.test.js
@@ -123,7 +123,7 @@ describe("Key moments", () => {
         event_navigation_action: "navigation",
         event_navigation_browsing_method: "scroll",
         article_name: "some headline",
-        other_details: "breaking",
+        article_flag: "breaking",
         eventTime: "2021-05-03T00:00:00.000Z"
       },
       action: "Scrolled",
@@ -141,7 +141,7 @@ describe("Key moments", () => {
         event_navigation_browsing_method: "click",
         article_parent_name: "a link title",
         article_name: "some headline",
-        other_details: "breaking",
+        article_flag: "breaking",
         eventTime: "2021-05-03T00:00:00.000Z"
       },
       action: "Clicked",

diff --git a/packages/key-facts/src/key-facts-text.js b/packages/key-facts/src/key-facts-text.js
@@ -36,20 +36,26 @@ const handleClickEventScrollTo = (event, url) => {
   }
 };
 
-const handleClickEventAnalytics = (fireAnalyticsEvent, title) => {
+const handleClickEventAnalytics = (fireAnalyticsEvent, title, articleFlag) => {
   if (fireAnalyticsEvent) {
     fireAnalyticsEvent({
       action: "Clicked",
       attrs: {
         event_navigation_name: "in-article component clicked : key moments",
         event_navigation_browsing_method: "click",
-        article_parent_name: title
+        article_parent_name: title,
+        article_flag: articleFlag
       }
     });
   }
 };
 
-const KeyFactsText = ({ listIndex, keyFactItem, fireAnalyticsEvent }) => (
+const KeyFactsText = ({
+  listIndex,
+  keyFactItem,
+  fireAnalyticsEvent,
+  articleFlag
+}) => (
   <BulletContainer key={`key-facts-${listIndex}`}>
     <Bullet />
     <Text>
@@ -66,7 +72,11 @@ const KeyFactsText = ({ listIndex, keyFactItem, fireAnalyticsEvent }) => (
                 <KeyFactTextLink
                   key={key}
                   onClick={event => {
-                    handleClickEventAnalytics(fireAnalyticsEvent, title);
+                    handleClickEventAnalytics(
+                      fireAnalyticsEvent,
+                      title,
+                      articleFlag
+                    );
                     handleClickEventScrollTo(event, url);
                   }}
                   href={url.charAt(0) === "#" ? null : url}

diff --git a/packages/key-facts/src/key-facts.js b/packages/key-facts/src/key-facts.js
@@ -14,6 +14,8 @@ const KeyFacts = ({ ast, section, headline, isLiveOrBreaking }) => {
 
   const { children: keyFactsItems } = children[0];
 
+  const articleFlag = isLiveOrBreaking || "no flag";
+
   return (
     <TrackingContextProvider
       context={{
@@ -24,7 +26,7 @@ const KeyFacts = ({ ast, section, headline, isLiveOrBreaking }) => {
           component_name: title,
           section_details: `section : ${section}`,
           article_name: headline,
-          other_details: isLiveOrBreaking
+          article_flag: articleFlag
         }
       }}
       scrolledEvent={{
@@ -43,6 +45,7 @@ const KeyFacts = ({ ast, section, headline, isLiveOrBreaking }) => {
               listIndex={index}
               keyFactItem={keyFactItem}
               fireAnalyticsEvent={fireAnalyticsEvent}
+              articleFlag={articleFlag}
             />
           ))}
         </KeyFactsContainer>

diff --git a/packages/ts-components/src/components/in-article-puff/InArticlePuff.tsx b/packages/ts-components/src/components/in-article-puff/InArticlePuff.tsx
@@ -43,12 +43,12 @@ const scrollEvent = {
   }
 };
 
-const clickEvent = (buttonLabel: string, isLiveOrBreaking?: string) => ({
+const clickEvent = (buttonLabel: string, flag?: string) => ({
   action: 'Clicked',
   attrs: {
     event_navigation_name: `button : ${buttonLabel}`,
     event_navigation_browsing_method: 'click',
-    other_details: isLiveOrBreaking
+    article_flag: flag
   }
 });
 
@@ -57,12 +57,13 @@ export const InArticlePuff: React.FC<{
   forceImageAspectRatio?: AspectRatios;
   isLiveOrBreaking?: string;
 }> = ({ sectionColour, forceImageAspectRatio, isLiveOrBreaking }) => {
+  const articleFlag = isLiveOrBreaking || 'no flag';
   const handleClick = (
     fireAnalyticsEvent: (evt: TrackingContext) => void,
     buttonLabel: string
   ) => {
     fireAnalyticsEvent &&
-      fireAnalyticsEvent(clickEvent(buttonLabel, isLiveOrBreaking));
+      fireAnalyticsEvent(clickEvent(buttonLabel, articleFlag));
   };
 
   const { loading, error, data } = useFetch<InArticlePuffDeckData>();
@@ -98,7 +99,7 @@ export const InArticlePuff: React.FC<{
           component_type: 'in-article component : puff : interactive',
           event_navigation_action: 'navigation',
           component_name: `${headline}`,
-          other_details: isLiveOrBreaking
+          article_flag: articleFlag
         }
       }}
       scrolledEvent={scrollEvent}

diff --git a/packages/ts-components/src/components/in-article-puff/__tests__/InArticlePuff.test.tsx b/packages/ts-components/src/components/in-article-puff/__tests__/InArticlePuff.test.tsx
@@ -169,13 +169,13 @@ describe('InArticlePuff', () => {
           event_navigation_action: 'navigation',
           event_navigation_browsing_method: 'scroll',
           event_navigation_name: 'in-article component displayed : puff',
-          section: 'section'
+          section: 'section',
+          article_flag: 'no flag'
         }
       });
     });
 
     it('fires click event when Read more clicked', () => {
-      mockIsLiveOrBreakingFlag = 'live';
       (useFetch as jest.Mock).mockReturnValue(
         deckApiPayloadWrapper(optionalFields)
       );
@@ -187,12 +187,12 @@ describe('InArticlePuff', () => {
             attrs: {
               articleHeadline: 'articleHeadline',
               section: 'section',
-              other_details: 'live'
+              article_flag: 'live'
             }
           }}
           analyticsStream={analyticsStream}
         >
-          <InArticlePuff {...requiredProps} />
+          <InArticlePuff sectionColour="yellow" isLiveOrBreaking={'live'} />
         </TrackingContextProvider>
       );
 
@@ -213,13 +213,12 @@ describe('InArticlePuff', () => {
           event_navigation_browsing_method: 'click',
           event_navigation_name: 'button : Read the full article',
           section: 'section',
-          other_details: 'live'
+          article_flag: 'live'
         }
       });
     });
 
     it('fires click event when headline clicked', () => {
-      mockIsLiveOrBreakingFlag = 'breaking';
       (useFetch as jest.Mock).mockReturnValue(
         deckApiPayloadWrapper(optionalFields)
       );
@@ -231,12 +230,12 @@ describe('InArticlePuff', () => {
             attrs: {
               articleHeadline: 'articleHeadline',
               section: 'section',
-              other_details: 'breaking'
+              article_flag: 'breaking'
             }
           }}
           analyticsStream={analyticsStream}
         >
-          <InArticlePuff {...requiredProps} />
+          <InArticlePuff sectionColour="yellow" isLiveOrBreaking={'breaking'} />
         </TrackingContextProvider>
       );
 
@@ -257,7 +256,7 @@ describe('InArticlePuff', () => {
           event_navigation_browsing_method: 'click',
           event_navigation_name: 'button : headline',
           section: 'section',
-          other_details: 'breaking'
+          article_flag: 'breaking'
         }
       });
     });
@@ -297,7 +296,8 @@ describe('InArticlePuff', () => {
           event_navigation_action: 'navigation',
           event_navigation_browsing_method: 'click',
           event_navigation_name: 'button : image',
-          section: 'section'
+          section: 'section',
+          article_flag: 'no flag'
         }
       });
     });