@kompasid/lit-web-components 0.8.26 → 0.8.28

package/package.json

@@ -3,7 +3,7 @@
   "description": "Kompas.id reusable web components",
   "license": "MIT",
   "author": "kompas.id",
-  "version": "v0.8.26",
+  "version": "v0.8.28",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",

package/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.ts

@@ -3,7 +3,9 @@ import { customElement, property } from 'lit/decorators.js'
 import { TWStyles } from '../../../tailwind/tailwind.js'
 import { Post } from './types.js'
 import { useTimeDifference } from '../../utils/useTimeDIfference.js'
+import { createIntersectionObserverComponent } from '../../utils/IntersectionObserver.js'
 
+createIntersectionObserverComponent()
 @customElement('kompasid-widget-recirculations-default')
 export class KompasWidgetRecirculationsDefault extends LitElement {
   static styles = [
@@ -32,7 +34,7 @@ export class KompasWidgetRecirculationsDefault extends LitElement {
    * Props
    */
   @property({ type: Array }) posts: Post[][] = []
-  @property({ type: String }) accessToken = ''
+  @property({ type: String }) recoID = ''
   @property({ type: String }) permalinkArticle = ''
   @property({ type: String }) userGuid = '0'
   @property({ type: String }) slugs = ''
@@ -44,6 +46,18 @@ export class KompasWidgetRecirculationsDefault extends LitElement {
 
   @property({ type: Boolean }) isDark = false
 
+  // data dari artikel yg sedang dibuka, untuk datalayer reco_content_viewed
+  @property({ type: String }) tracker_content_id = '' //
+  @property({ type: String }) tracker_content_categories = ''
+  // datau user
+  @property({ type: String }) tracker_user_id = ''
+  @property({ type: String }) tracker_user_type = ''
+  @property({ type: String }) tracker_subscription_status = ''
+  @property({ type: String }) tracker_subscription_package = ''
+  @property({ type: String }) tracker_metered_wall_type = ''
+  @property({ type: Number }) tracker_metered_wall_balance = 0
+  @property({ type: String }) tracker_page_domain = ''
+
   /**
    * Fetch Data
    */
@@ -51,7 +65,6 @@ export class KompasWidgetRecirculationsDefault extends LitElement {
     super.connectedCallback()
     try {
       if (this.type === 'relatedArticle') {
-        await this.fetchAccessToken()
         await this.relatedArticles()
       } else if (this.type === 'otherArticle') {
         await this.otherArticles()
@@ -61,34 +74,7 @@ export class KompasWidgetRecirculationsDefault extends LitElement {
     }
   }
 
-  async fetchAccessToken() {
-    const response = await fetch(
-      'https://api.kompas.id/account/api/v1/login/guest',
-      {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          email: 'anonynous.user@kompas.id',
-        }),
-      }
-    )
-
-    const result = await response.json()
-
-    if (result?.data?.accessToken) {
-      this.accessToken = result.data.accessToken
-    } else {
-      throw new Error('Token akses tidak tersedia dalam respons')
-    }
-  }
-
   async relatedArticles() {
-    if (!this.accessToken) {
-      throw new Error('Token akses tidak tersedia')
-    }
-
     const kompasApiAi = 'https://ai.kompas.id/api/v1'
 
     // Constructing parameters
@@ -104,11 +90,14 @@ export class KompasWidgetRecirculationsDefault extends LitElement {
 
     const response = await fetch(endpoint, {
       headers: {
-        Authorization: `Bearer ${this.accessToken}`,
         'Content-Type': 'application/json',
       },
     })
 
+    // get x-request-id from headers
+    const recoId = response.headers.get('X-Request-Id') || ''
+    this.recoID = recoId
+
     const result = await response.json()
 
     if (result?.result) {
@@ -256,6 +245,55 @@ export class KompasWidgetRecirculationsDefault extends LitElement {
     `
   }
 
+  /**
+   * mengirim event ke datalayer
+   */
+  private recoContentClicked(post: Post, recoIndex: number) {
+    if (this.type !== 'relatedArticle') return // Hanya trigger event jika type 'relatedArticle'
+
+    window.dataLayer = window.dataLayer || []
+    window.dataLayer.push({
+      // data dari component
+      event: 'reco_content_clicked',
+      content_id: post.name,
+      content_categories: post.category?.map(cat => cat.name).join('|') || '',
+      reco_index: recoIndex,
+      reco_id: this.recoID || '',
+      reco_model: 'context',
+      // data dari implementor
+      user_id: this.tracker_user_id || 'NA',
+      user_type: this.tracker_user_type || '',
+      subscription_status: this.tracker_subscription_status || '',
+      subscription_package: this.tracker_subscription_package || '',
+      metered_wall_type: this.tracker_metered_wall_type || '',
+      metered_wall_balance: this.tracker_metered_wall_balance,
+      page_domain: this.tracker_page_domain || 'Kompas.id',
+    })
+  }
+
+  private recoContentViewed() {
+    window.dataLayer = window.dataLayer || []
+    window.dataLayer.push({
+      event: 'reco_content_viewed',
+      content_id: this.tracker_content_id || '',
+      content_categories: this.tracker_content_categories || '',
+      user_type: this.tracker_user_type || '',
+      subscription_status: this.tracker_subscription_status || '',
+      subscription_package: this.tracker_subscription_package || '',
+      metered_wall_type: this.tracker_metered_wall_type || '',
+      metered_wall_balance: this.tracker_metered_wall_balance,
+      page_domain: this.tracker_page_domain || 'Kompas.id',
+    })
+  }
+
+  handleObserver() {
+    if (this.type === 'relatedArticle') {
+      this.recoContentViewed()
+    } else {
+      // kalo mau implemen buat artikel lainnya
+    }
+  }
+
   render() {
     return html`
       <div class="w-full ${this.isDark ? 'bg-dark-5 ' : ''}">
@@ -264,18 +302,27 @@ export class KompasWidgetRecirculationsDefault extends LitElement {
           ? this.titleRelatedArticle()
           : this.titleOtherArticle()}
         <!-- end: widget title -->
-
+        <intersection-observer-component
+          .onTrigger="${() => this.handleObserver()}"
+        ></intersection-observer-component>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
           <!-- start: left-post-loop -->
           <div class="grid grid-cols-1 gap-6">
             ${this.posts[0]
               ? this.posts[0].map(
-                  post => html`
+                  (post, index) => html`
                     <div class="w-full">
                       <div class="flex">
                         <div class="w-1/2">${this.renderImage(post)}</div>
                         <div class="flex-grow pl-4 w-1/2">
-                          <a href="${post.permalink}">
+                          <a
+                            href="${post.permalink}?open_from=${this.type ===
+                            'relatedArticle'
+                              ? 'Artikel_Terkait'
+                              : 'Artikel_Lainnya'}"
+                            @click="${() =>
+                              this.recoContentClicked(post, index + 1)}"
+                          >
                             ${this.renderChips(post)}
                             <h5
                               class="hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this
@@ -306,12 +353,19 @@ export class KompasWidgetRecirculationsDefault extends LitElement {
           <div class="flex flex-col w-full">
             ${this.posts[1]
               ? this.posts[1].map(
-                  post => html`
+                  (post, index) => html`
                     <div class="mb-6">
                       <div class="flex">
                         <div class="w-1/2">${this.renderImage(post)}</div>
                         <div class="flex-grow pl-4 w-1/2">
-                          <a href="${post.permalink}">
+                          <a
+                            href="${post.permalink}?open_from=${this.type ===
+                            'relatedArticle'
+                              ? 'Artikel_Terkait'
+                              : 'Artikel_Lainnya'}"
+                            @click="${() =>
+                              this.recoContentClicked(post, index + 6)}"
+                          >
                             ${this.renderChips(post)}
                             <h5
                               class="hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this

package/src/components/kompasid-widget-recirculations-default/readme.md

@@ -15,33 +15,48 @@ const widgetOtherPost = {
   titleLink: '/kategori/opini'
 }
 
-<div>
 <kompasid-widget-recirculations-default
-  .permalinkArticle=${widgetRelatedPost.permalinkArticle}
-  .slugs=${widgetRelatedPost.slugs}
+  permalinkArticle=${widgetRelatedPost.permalinkArticle}
+  slugs=${widgetRelatedPost.slugs}
+  tracker_content_id="slug artikel yg dibuka"
+  tracker_content_categories="kategori artikel yg dibuka"
+  tracker_user_id="user guid"
+  tracker_user_type="S" --> // G/R/S
+  tracker_subscription_status="AC" -->  // IA/AC/EX/GP
+  tracker_subscription_package="paket-langganan" --> // contoh: `cash-app-kdd1-reguler`
+  tracker_metered_wall_type="" --> // "" atau MP/HP/MRW
+  tracker_metered_wall_balance=0 --> // sisa kuota metered 5/4/3/2/1
+  tracker_page_domain="" --> // default "Kompas.id"
 ></kompasid-widget-recirculations-default>
 
+
 <kompasid-widget-recirculations-default
-  .titleName=${widgetOtherPost.titleName}
-  .titleLink=${widgetOtherPost.titleLink}
+  titleName=${widgetOtherPost.titleName}
+  titleLink=${widgetOtherPost.titleLink}
   type='otherArticle'
   mainCategory='opini'
 ></kompasid-widget-recirculations-default>
-</div>
 ```
 
 ## Properti
-
-| Property           | Attribute       | Deskripsi                                                                                           | Tipe     | Default         | Konten                                      |
-| ------------------ | --------------- | -------------------------------------------------------------------------------------------------- | -------- | --------------- | ------------------------------------------- |
-| `titleName`       | `titleName`    | Nama judul yang akan ditampilkan di widget. (Digunakan jika memakai props type=otherArticle)                             | `String`     | `''`                             |
-| `titleLink`       | `titleLink`    | Tautan yang akan ditetapkan pada judul di widget. (Digunakan jika memakai props type=otherArticle)                            | `String`     | `''`                            |
-| `userGuid`         | `userGuid`      | GUID pengguna yang sedang menggunakan aplikasi untuk fetch data artikel terkait.                                                    | `String` | `'0'`           |                                             |
-| `slugs`            | `slugs`         | Daftar slug kategori atau tag yang terkait dengan artikel untuk artikel terkait.                                          | `String` | `''`            |                                             |
-| `permalinkArticle` | `permalinkArticle` | Tautan kategori artikel yang sedang ditampilkan atau dibaca untuk rekomendasi artikel terkait.                                     | `String` | `''`            |                                             |
-| `type`             | `type`          | Tipe widget untuk membedakan antara pengambilan data artikel terkait (`relatedArticle`) atau lainnya dalam kategori (`otherArticle`). | `String` | `'relatedArticle'` | `"relatedArticle" \| "otherArticle"` |
-| `mainCategory`     | `mainCategory`  | Kategori utama artikel yang akan ditampilkan jika menggunakan tipe `otherArticle` untuk lainnya dalam kategori.                  | `String` | `''`            |                                             |
-
+| Property                      | Attribute                   | Deskripsi                                                                                                  | Tipe     | Default             | Konten                                      |
+| ----------------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------- | -------- | ------------------- | ------------------------------------------- |
+| `titleName`                   | `titleName`                 | Nama judul yang akan ditampilkan di widget. (Digunakan jika memakai props `type=otherArticle`)            | `String` | `''`                |                                             |
+| `titleLink`                   | `titleLink`                 | Tautan yang akan ditetapkan pada judul di widget. (Digunakan jika memakai props `type=otherArticle`)      | `String` | `''`                |                                             |
+| `userGuid`                    | `userGuid`                  | GUID pengguna yang sedang menggunakan aplikasi untuk fetch data artikel terkait.                          | `String` | `'0'`               |                                             |
+| `slugs`                       | `slugs`                     | Daftar slug kategori atau tag yang terkait dengan artikel untuk artikel terkait.                          | `String` | `''`                |                                             |
+| `permalinkArticle`            | `permalinkArticle`          | Tautan kategori artikel yang sedang ditampilkan atau dibaca untuk rekomendasi artikel terkait.            | `String` | `''`                |                                             |
+| `type`                        | `type`                      | Tipe widget untuk membedakan antara `relatedArticle` atau `otherArticle`.                                | `String` | `'relatedArticle'`  | `"relatedArticle" \| "otherArticle"`       |
+| `mainCategory`                | `mainCategory`              | Kategori utama artikel yang akan ditampilkan jika menggunakan tipe `otherArticle`.                        | `String` | `''`                |                                             |
+| `tracker_content_id`          | `tracker_content_id`        | ID dari artikel (slug) yang sedang dibuka.                                                                | `String` | `''`                |                                             |
+| `tracker_content_categories`  | `tracker_content_categories`| Kategori artikel yang sedang dibuka.                                                                      | `String` | `''`                |                                             |
+| `tracker_user_id`             | `tracker_user_id`           | ID pengguna yang sedang mengakses konten.                                                                | `String` | `'NA'`              |                                             |
+| `tracker_user_type`           | `tracker_user_type`         | Tipe pengguna (`G/R/S`).                                                                                  | `String` | `''`                |                                             |
+| `tracker_subscription_status` | `tracker_subscription_status` | Status langganan pengguna (`IA/AC/EX/GP`).                                                              | `String` | `''`                |                                             |
+| `tracker_subscription_package`| `tracker_subscription_package` | Paket langganan pengguna (contoh: `cash-app-kdd1-reguler`).                                              | `String` | `''`                |                                             |
+| `tracker_metered_wall_type`   | `tracker_metered_wall_type` | Tipe metered wall pada artikel (`MRW/MP/HP`).                                                             | `String` | `''`                |                                             |
+| `tracker_metered_wall_balance`| `tracker_metered_wall_balance` | Sisa kuota metered wall (`5/4/3/2/1`).                                                                   | `Number` | `0`                 |                                             |
+| `tracker_page_domain`         | `tracker_page_domain`       | Domain halaman yang sedang diakses.                                                                       | `String` | `'Kompas.id'`       |                                             |
 
 ### Digunakan oleh
 

package/src/components/kompasid-widget-recirculations-default/types.ts

@@ -1,9 +1,18 @@
+interface Category {
+  id: number
+  name: string
+  slug: string
+}
+
 interface PostTag {
   slug: string
 }
 
 export interface Post {
+  id: number
   title: string
+  name: string
+  category: Category[]
   isAnalisis?: boolean
   isEksklusif?: boolean
   isFreemium?: boolean

package/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.ts

@@ -164,6 +164,15 @@ export class KompasWidgetRecirculationsList extends LitElement {
     return chips
   }
 
+  getSectionName() {
+    const sectionMapping = {
+      Terbaru: 'Section_Terbaru',
+      Terpopuler: 'Section_Terpopuler',
+    } as const
+
+    return sectionMapping[this.widgetTitle as keyof typeof sectionMapping] || ''
+  }
+
   render() {
     return html`
       <div class="${this.isDark ? 'bg-dark-5 ' : ''}">
@@ -187,7 +196,7 @@ export class KompasWidgetRecirculationsList extends LitElement {
                     <div class="flex flex-col w-full">
                       ${this.renderChips(item)}
                       <a
-                        href="${item.permalink}"
+                        href="${item.permalink}?open_from=${this.getSectionName()}"
                         class="font-bold font-lora hover:underline leading-normal text-xl ${this
                           .isDark
                           ? 'text-white'

package/src/utils/IntersectionObserver.ts

@@ -0,0 +1,97 @@
+import { html, LitElement } from 'lit'
+import { property, query } from 'lit/decorators.js'
+
+export class IntersectionObserverComponent extends LitElement {
+  @property({ type: String }) rootMargin: string = '0px 0px 0px 0px'
+  @property({ type: Number }) threshold: number = 1
+  @property({ type: Boolean }) multipleTrigger: boolean = false
+  @property({ type: Boolean }) forceTrigger: boolean = false
+  @property({ type: Number }) timer: number = 0
+  @property({ attribute: false }) onTrigger?: () => void
+
+  @query('#elementTarget') elementTarget!: HTMLElement
+
+  private intersectionObserver: IntersectionObserver | null = null
+  private timerId: number | null = null
+
+  connectedCallback(): void {
+    super.connectedCallback()
+    this.intersectionObserver = new IntersectionObserver(
+      this.handleIntersection.bind(this),
+      {
+        threshold: this.threshold,
+        rootMargin: this.rootMargin,
+      }
+    )
+  }
+
+  firstUpdated(): void {
+    if (this.elementTarget) {
+      this.intersectionObserver?.observe(this.elementTarget)
+    }
+    if (this.forceTrigger) {
+      this.emitTrigger()
+    }
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback()
+    this.intersectionObserver?.disconnect()
+    this.clearTimer()
+  }
+
+  private handleIntersection(entries: IntersectionObserverEntry[]): void {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        this.handleEntryInView()
+      } else {
+        this.clearTimer()
+      }
+    })
+  }
+
+  private handleEntryInView(): void {
+    if (this.timer > 0) {
+      this.clearTimer()
+      this.timerId = window.setTimeout(() => {
+        this.emitTrigger()
+        if (!this.multipleTrigger) {
+          this.intersectionObserver?.disconnect()
+        }
+      }, this.timer)
+    } else {
+      this.emitTrigger()
+      if (!this.multipleTrigger) {
+        this.intersectionObserver?.disconnect()
+      }
+    }
+  }
+
+  private clearTimer(): void {
+    if (this.timerId !== null) {
+      clearTimeout(this.timerId)
+      this.timerId = null
+    }
+  }
+
+  private emitTrigger(): void {
+    this.dispatchEvent(new CustomEvent('trigger'))
+    if (this.onTrigger) {
+      this.onTrigger()
+    }
+  }
+
+  render() {
+    return html`<div id="elementTarget"><slot></slot></div>`
+  }
+}
+
+export const createIntersectionObserverComponent = () => {
+  if (!customElements.get('intersection-observer-component')) {
+    customElements.define(
+      'intersection-observer-component',
+      IntersectionObserverComponent
+    )
+  }
+  return IntersectionObserverComponent
+}