feat(@dpc-sdp/nuxt-ripple-analytics): add new print event

dpc-sdp · Aug 27, 2024 · d2a581d · d2a581d
1 parent 236da21
commit d2a581d
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 3 deletions.
diff --git a/examples/nuxt-app/test/features/publication/publication.feature b/examples/nuxt-app/test/features/publication/publication.feature
@@ -41,6 +41,10 @@ Feature: Publication page
       | title                                                    | url                                                                               | type | size    |
       | Victorian Skills Plan Implementation Update October 2023 | /sites/default/files/2023-10/16686-VSA-Implementation-Plan-Section_FA_Digital.pdf | pdf  | 4.61 MB |
       | Print full document                                      | /victorian-skills-plan-2023-implementation-update/print-all                       |      |         |
+    When I click on the document "Print full document"
+    Then the dataLayer should include the following events
+      | event          | element_text        | link_url                                                    | component    |
+      | print_document | Print full document | /victorian-skills-plan-2023-implementation-update/print-all | rpl-document |
 
   @mockserver
   Example: Publication print all

diff --git a/packages/nuxt-ripple-analytics/lib/index.ts b/packages/nuxt-ripple-analytics/lib/index.ts
@@ -168,6 +168,19 @@ export default {
       })
     }
   },
+  'rpl-document/print': () => {
+    return (payload: any) => {
+      trackEvent({
+        event: `${payload.action}_document`,
+        element_id: payload?.id,
+        element_text: payload?.text,
+        link_url: payload?.value,
+        name: payload?.name,
+        component: 'rpl-document',
+        platform_event: 'print'
+      })
+    }
+  },
   'rpl-file/download': () => {
     return (payload: any) => {
       const { $app_origin } = useNuxtApp()

diff --git a/packages/ripple-test-utils/step_definitions/common/site/analytics.ts b/packages/ripple-test-utils/step_definitions/common/site/analytics.ts
@@ -18,7 +18,9 @@ Then(
           }
         }, {})
 
-        cy.wrap(event).should('include', updatedRow)
+        Object.keys(updatedRow).forEach((key) => {
+          expect(event[key]).to.contain(updatedRow[key])
+        })
       })
     })
   }

diff --git a/packages/ripple-tide-publication/components/TidePublicationPageActions.vue b/packages/ripple-tide-publication/components/TidePublicationPageActions.vue
@@ -4,17 +4,24 @@
       <template v-if="documents.length > 0" #upper>
         <RplFile v-for="file in documents" :key="file.id" v-bind="file" />
       </template>
-      <RplDocument :url="printUrl">
+      <RplDocument
+        :url="printUrl"
+        :global-events="false"
+        @download="handleDownload"
+      >
         <template #icon>
           <RplIcon name="icon-print-lined" size="l" colour="default" />
         </template>
-        <template #name> Print full document </template>
+        <template #name>Print full document</template>
       </RplDocument>
     </RplPageAction>
   </div>
 </template>
 
 <script setup lang="ts">
+import { useRippleEvent } from '@dpc-sdp/ripple-ui-core'
+import type { rplEventPayload } from '@dpc-sdp/ripple-ui-core'
+
 interface Props {
   documents?: any
   printUrl: string
@@ -23,4 +30,21 @@ interface Props {
 withDefaults(defineProps<Props>(), {
   documents: () => []
 })
+
+const emit = defineEmits<{
+  (e: 'print', payload: rplEventPayload): void
+}>()
+
+const { emitRplEvent } = useRippleEvent('rpl-document', emit)
+
+const handleDownload = (payload: rplEventPayload) => {
+  emitRplEvent(
+    'print',
+    {
+      ...payload,
+      action: 'print'
+    },
+    { global: true }
+  )
+}
 </script>