Merge pull request #1385 from dpc-sdp/feature/route-topics-and-tags

[SD-504] routeChange topic and tags
dpc-sdp · Nov 19, 2024 · bb07d60 · bb07d60
2 parents 0d7ebf2 + 3c8f9ae
commit bb07d60
Show file tree

Hide file tree

Showing 10 changed files with 1,004 additions and 14 deletions.
diff --git a/examples/nuxt-app/test/features/site/analytics.feature b/examples/nuxt-app/test/features/site/analytics.feature
@@ -9,8 +9,12 @@ Feature: Analytics
     And the page endpoint for path "/" returns fixture "/landingpage/home" with status 200
     Given I visit the page "/"
     Then the dataLayer should include the following events
-      | event       | page_title        | page_url | content_type | content_status |
-      | routeChange | Demo Landing Page | /        | landing_page | published      |
+      | event       | page_title        | page_url | content_type | content_status | content_topic |
+      | routeChange | Demo Landing Page | /        | landing_page | published      | Demo Topic    |
+    Then the dataLayer should have the following tags
+      | name             |
+      | Demo Tag         |
+      | Another Demo Tag |
 
   @mockserver
   Scenario: Breadcrumbs

diff --git a/examples/nuxt-app/test/features/site/shared-elements.feature b/examples/nuxt-app/test/features/site/shared-elements.feature
@@ -101,9 +101,10 @@ Feature: Shared site elements
     Given I visit the page "/some-random-page"
 
     Then the page should have the following topic tags
-      | text       | url               |
-      | Demo Topic | /topic/demo-topic |
-      | Demo Tag   | /tags/demo-tag    |
+      | text             | url                    |
+      | Demo Topic       | /topic/demo-topic      |
+      | Demo Tag         | /tags/demo-tag         |
+      | Another Demo Tag | /tags/another-demo-tag |
 
   @mockserver
   Scenario: Content Rating (visible)

diff --git a/examples/nuxt-app/test/fixtures/landingpage/home.json b/examples/nuxt-app/test/fixtures/landingpage/home.json
@@ -14,6 +14,24 @@
     {
       "text": "Demo Tag",
       "url": "/tags/demo-tag"
+    },
+    {
+      "text": "Another Demo Tag",
+      "url": "/tags/another-demo-tag"
+    }
+  ],
+  "topic": {
+    "text": "Demo Topic",
+    "url": "/topic/demo-topic"
+  },
+  "tags": [
+    {
+      "text": "Demo Tag",
+      "url": "/tags/demo-tag"
+    },
+    {
+      "text": "Another Demo Tag",
+      "url": "/tags/another-demo-tag"
     }
   ],
   "sidebar": {

diff --git a/packages/nuxt-ripple-analytics/lib/routeChange.ts b/packages/nuxt-ripple-analytics/lib/routeChange.ts
@@ -4,13 +4,19 @@ import { getBreadcrumbs } from '#imports'
 const trimValue = (value: any) =>
   typeof value === 'string' ? value.trim() : value
 
+const mapTags = (items: { text: string }[]) => {
+  return (items || []).map((item) => item?.text)
+}
+
 export default function ({ route, site, page }): IRplAnalyticsEventPayload {
   const payload: IRplAnalyticsEventPayload = {
     event: 'routeChange',
     page_title: page?.title,
     page_url: route.fullPath,
     content_type: page?.type,
     content_status: page?.status,
+    content_topic: page?.topic?.text,
+    content_tags: mapTags(page?.tags),
     publication_name: page?.publication?.text,
     search_term: trimValue(route.query?.q),
     site_section: page?.siteSection?.name,

diff --git a/packages/nuxt-ripple-analytics/lib/tracker.ts b/packages/nuxt-ripple-analytics/lib/tracker.ts
@@ -32,6 +32,8 @@ export interface IRplAnalyticsEventPayload {
   status_code?: number
   content_type?: string
   content_status?: string
+  content_topic?: string
+  content_tags?: string[]
   search_term?: string
   site_section?: string
   publication_name?: string

diff --git a/packages/nuxt-ripple/mapping/base/index.ts b/packages/nuxt-ripple/mapping/base/index.ts
@@ -1,5 +1,7 @@
 import {
   map as topicTagsMapping,
+  tagMap as tagMapping,
+  topicMap as topicMapping,
   includes as topicTagsIncludes
 } from './topic-tags/topic-tags-mapping.js'
 import {
@@ -68,6 +70,8 @@ export const tidePageBaseMapping = ({
     sidebar: sidebar,
     status: 'moderation_state',
     topicTags: topicTagsMapping,
+    tags: (src) => tagMapping(src?.field_tags),
+    topic: (src) => topicMapping(src?.field_topic),
     siteSection: async (src) => {
       // With the correct site/section id, we can now choose the correct site data from 'field_node_site'
       const siteData = getSiteSection(src._sectionId, src)