GOTH-603 Add nativo ids to recirculation module (#294)

add nativo div id to recirc modules on article pages and section pages
nypublicradio · Jul 13, 2023 · 238c20a · 238c20a
1 parent bca7dec
commit 238c20a
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 5 deletions.
diff --git a/components/ArticleRecirculation.vue b/components/ArticleRecirculation.vue
@@ -8,10 +8,12 @@ const props = withDefaults(defineProps<{
   article?: ArticlePage
   slug?: string
   trackingComponentLocation?: string
+  nativoId?: string
 }>(), {
   article: null,
   slug: 'news',
-  trackingComponentLocation: "Recirculation Module"
+  trackingComponentLocation: "Recirculation Module",
+  nativoId: ""
 })
 
 const trackingComponent = "Recirculation Module"
@@ -43,5 +45,6 @@ onMounted(async () => {
     :collection="{data: articlesFiltered}"
     trackingComponent="Recirculation Module"
     trackingComponentLocation="Recirculation Module"
+    :nativoId="nativoId"
   />
 </template>
diff --git a/components/LeftFeature.vue b/components/LeftFeature.vue
@@ -5,11 +5,14 @@ const props = withDefaults(defineProps<{
   collection: {label?: string, data: ArticlePage[]},
   trackingComponent?: string
   trackingComponentLocation?: string
+  nativoId?: string
 }>(), {
   trackingComponent: "Left Feature",
-  trackingComponentLocation: "Left Feature"
+  trackingComponentLocation: "Left Feature",
+  nativoId: ""
 })
 
+const { $nativo } = useNuxtApp()
 const articleLg = ref(normalizeArticlePage(props.collection.data?.[0]))
 const articleMd = ref(normalizeArticlePage(props.collection.data?.[1]))
 const articlesSm = ref([])
@@ -57,6 +60,8 @@ props.collection.data?.[4] && articlesSm.value.push(normalizeArticlePage(props.c
               v-if="articleMd"
               v-slot="card"
               :article="articleMd"
+              :id="nativoId"
+              @vue:mounted="$nativo.refresh"
               class="hidden xl:flex article-md mod-vertical mod-large mb-5"
               :width="433"
               :height="289"
@@ -81,6 +86,7 @@ props.collection.data?.[4] && articlesSm.value.push(normalizeArticlePage(props.c
               v-if="articleMd"
               v-slot="card"
               :article="articleMd"
+              :id="nativoId"
               class="flex xl:hidden article-md mod-horizontal mod-left tag-small mb-5"
               :width="318"
               :height="212"

diff --git a/components/SectionPageTemplate.vue b/components/SectionPageTemplate.vue
@@ -7,7 +7,7 @@ const props = defineProps<{
   page: Page
 }>()
 const route = useRoute()
-
+const sectionSlug = computed(() => route?.params?.sectionSlug as string)
 const loadMoreStoryCount = ref(10)
 const loadMoreContainer = ref('#articleList')
 const featuredStoryCount = ref(5)
@@ -58,10 +58,11 @@ const newsletterSubmitEvent = () => {
       <!-- featured area -->
       <h2 class="sr-only">Featured {{ page.title }} Stories</h2>
       <article-recirculation
-        :slug="(route?.params?.sectionSlug as string)"
+        :slug="sectionSlug"
         id="article-recirculation"
         trackingComponentLocation="Section Page Recirculation Module"
         class="my-6"
+        :nativoId="`ntv-section-1`"
       />
       <div class="mb-6">
         <HtlAd layout="rectangle" slot="htlad-gothamist_interior_midpage_1" />

diff --git a/cypress/e2e/article.cy.ts b/cypress/e2e/article.cy.ts
@@ -37,6 +37,8 @@ describe('An article page', () => {
         cy.get('.author-profile').should('exist')
         cy.get('.recirculation').should('exist')
         cy.get('.recirculation .gothamist-card:not(.hidden)').should('have.length', 5)
+        cy.get('.recirculation .gothamist-card:not(.hidden)').should('have.length', 5)
+        cy.get('.recirculation .gothamist-card:not(.hidden)').eq(1).should('have.attr', 'id', 'ntv-article-1')
     })
     it('shows the marketing CTAs', () => {
         cy.intercept(
@@ -66,6 +68,7 @@ describe('An article page', () => {
         cy.get('.author-profile').should('exist')
         cy.get('.recirculation').should('exist')
         cy.get('.recirculation .gothamist-card:not(.hidden)').should('have.length', 5)
+        cy.get('.recirculation .gothamist-card:not(.hidden)').eq(1).should('have.attr', 'id', 'ntv-article-1')
     })
     it('shows articles without lead images', () => {
         cy.intercept({

diff --git a/pages/[sectionSlug]/[articleSlug].vue b/pages/[sectionSlug]/[articleSlug].vue
@@ -54,6 +54,7 @@ const trackingData = useArticlePageTrackingData(article)
 const adTargetingData = useArticlePageAdTargetingData(article)
 const sensitiveContent = useSensitiveContent()
 const headMetadata = useArticlePageHeadMetadata(article)
+const sectionSlug = computed(() => route?.params?.sectionSlug as string)
 
 useHead({
   title: `${article.seoTitle} - Gothamist`
@@ -289,9 +290,10 @@ const tagSlug = computed(() => article?.sponsoredContent ? "" : `/${article?.sec
           MORE {{ article.section.slug }}
         </p>
         <article-recirculation
-          :slug="(route?.params?.sectionSlug as string)"
+          :slug="sectionSlug"
           :article="article"
           trackingComponentLocation="Article Page Recirculation Module"
+          :nativoId="`ntv-article-1`"
         />
         <div class="mt-6 mb-5">
           <hr class="black mb-4" />