@kompasid/lit-web-components 0.7.4 → 0.7.6

package/demo/index.html

@@ -262,7 +262,7 @@
             .tracker_page_domain=${trackerPageDomain}
           ></kompasid-metered-wall-register>
 
-          <!-- <kompasid-grace-period totalGracePeriod="5" subscriptionId="9802032"></kompasid-grace-period> -->
+          <!-- <kompasid-grace-period totalGracePeriod="5"></kompasid-grace-period> -->
         `,
         document.querySelector('#demo')
       )

package/dist/src/components/kompasid-grace-period/KompasGracePeriod.d.ts

@@ -8,12 +8,40 @@ export declare class KompasGracePeriod extends LitElement {
      * property totalGracePeriod = how many days are left in grace period
      * property isColumn = changes how the component looks on different screen sizes
      * property isShowButton = shows or hides a subscription button
-     * property subscriptionId = used for renewal subs
+     * property paywall_location = the location where user encounter the paywall
+     * property paywall_subscription_package = the name of the subscription package viewed by user
+     * property paywall_subscription_id = the ID of the subscription package viewed by user
+     * property paywall_subscription_price = the price of the subscriprtion package viewed by user
+     * property paywall_position = the position of the subscription package viewed by user
+     * property tracker_page_type = type of the page
+     * property tracker_content_id = ID of article (slug)
+     * property tracker_content_type = whether it's free article or paid article
+     * property tracker_content_title = the title of article
+     * property tracker_content_categories = the category of the content
+     * property tracker_user_type = type of user based on their subscription
+     * property tracker_subscription_status = status of their subscription
+     * property tracker_page_domain = page Domain
+     * property tracker_metered_wall_type = the type of Metered Wall
+     * property tracker_metered_wall_balance = the balance of their metered wall
      */
     totalGracePeriod: number;
     isColumn: boolean;
     isShowButton: boolean;
-    subscriptionId: string;
+    paywall_location: string;
+    paywall_subscription_package: string;
+    paywall_subscription_id: number;
+    paywall_subscription_price: number;
+    paywall_position: number;
+    tracker_page_type: string;
+    tracker_content_id: string;
+    tracker_content_title: string;
+    tracker_content_categories: string;
+    tracker_content_type: string;
+    tracker_user_type: string;
+    tracker_subscription_status: string;
+    tracker_page_domain: string;
+    tracker_metered_wall_type: string;
+    tracker_metered_wall_balance: number;
     /**
      * State
      */
@@ -21,6 +49,8 @@ export declare class KompasGracePeriod extends LitElement {
     private updateSubscription;
     private getCountdownGracePeriod;
     private redirectToBerlangganan;
+    private getGtmParams;
+    private sendGtmEvent;
     private dataLayeronPerbaruiLanggananButton;
     private dataLayeronGracePeriod;
     private gracePeriodTemplate;

package/dist/src/components/kompasid-grace-period/KompasGracePeriod.js

@@ -13,12 +13,40 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
          * property totalGracePeriod = how many days are left in grace period
          * property isColumn = changes how the component looks on different screen sizes
          * property isShowButton = shows or hides a subscription button
-         * property subscriptionId = used for renewal subs
+         * property paywall_location = the location where user encounter the paywall
+         * property paywall_subscription_package = the name of the subscription package viewed by user
+         * property paywall_subscription_id = the ID of the subscription package viewed by user
+         * property paywall_subscription_price = the price of the subscriprtion package viewed by user
+         * property paywall_position = the position of the subscription package viewed by user
+         * property tracker_page_type = type of the page
+         * property tracker_content_id = ID of article (slug)
+         * property tracker_content_type = whether it's free article or paid article
+         * property tracker_content_title = the title of article
+         * property tracker_content_categories = the category of the content
+         * property tracker_user_type = type of user based on their subscription
+         * property tracker_subscription_status = status of their subscription
+         * property tracker_page_domain = page Domain
+         * property tracker_metered_wall_type = the type of Metered Wall
+         * property tracker_metered_wall_balance = the balance of their metered wall
          */
         this.totalGracePeriod = 0;
         this.isColumn = false;
         this.isShowButton = false;
-        this.subscriptionId = '';
+        this.paywall_location = '';
+        this.paywall_subscription_package = '';
+        this.paywall_subscription_id = 0;
+        this.paywall_subscription_price = 0;
+        this.paywall_position = 0;
+        this.tracker_page_type = '';
+        this.tracker_content_id = '';
+        this.tracker_content_title = '';
+        this.tracker_content_categories = '';
+        this.tracker_content_type = '';
+        this.tracker_user_type = '';
+        this.tracker_subscription_status = '';
+        this.tracker_page_domain = '';
+        this.tracker_metered_wall_type = '';
+        this.tracker_metered_wall_balance = 0;
         /**
          * State
          */
@@ -49,7 +77,42 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
     }
     redirectToBerlangganan() {
         this.dataLayeronPerbaruiLanggananButton();
-        window.open(`${this.updateSubscription}/kdp?productId=${this.subscriptionId}`);
+        const originHost = encodeURIComponent(window.location.href);
+        this.sendGtmEvent('subscribe_button_clicked');
+        window.open(`${this.updateSubscription}/kdp?productId=${this.paywall_subscription_id}&referrer=${originHost}&source=article`);
+    }
+    getGtmParams() {
+        return {
+            paywall_location: this.paywall_location,
+            paywall_subscription_package: this.paywall_subscription_package,
+            paywall_subscription_id: this.paywall_subscription_id,
+            paywall_subscription_price: this.paywall_subscription_price,
+            paywall_position: this.paywall_position,
+            page_type: this.tracker_page_type,
+            content_id: this.tracker_content_id,
+            content_title: this.tracker_content_title,
+            content_categories: this.tracker_content_categories,
+            content_type: this.tracker_content_type,
+            user_type: this.tracker_user_type,
+            subscription_status: this.tracker_subscription_status,
+            page_domain: this.tracker_page_domain || 'Kompas.id',
+            metered_wall_type: this.tracker_metered_wall_type || 'GP',
+            metered_wall_balance: this.tracker_metered_wall_balance,
+        };
+    }
+    sendGtmEvent(event) {
+        let gtmParams = { event };
+        if (event === 'paywall_viewed') {
+            gtmParams.impressions = [
+                {
+                    ...this.getGtmParams(),
+                },
+            ];
+        }
+        else {
+            gtmParams = { ...gtmParams, ...this.getGtmParams() };
+        }
+        window.dataLayer.push(gtmParams);
     }
     dataLayeronPerbaruiLanggananButton() {
         window.dataLayer.push({
@@ -96,6 +159,7 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
     }
     async connectedCallback() {
         super.connectedCallback();
+        this.sendGtmEvent('paywall_viewed');
         this.dataLayeronGracePeriod();
     }
     render() {
@@ -132,7 +196,49 @@ __decorate([
 ], KompasGracePeriod.prototype, "isShowButton", void 0);
 __decorate([
     property({ type: String })
-], KompasGracePeriod.prototype, "subscriptionId", void 0);
+], KompasGracePeriod.prototype, "paywall_location", void 0);
+__decorate([
+    property({ type: String })
+], KompasGracePeriod.prototype, "paywall_subscription_package", void 0);
+__decorate([
+    property({ type: Number })
+], KompasGracePeriod.prototype, "paywall_subscription_id", void 0);
+__decorate([
+    property({ type: Number })
+], KompasGracePeriod.prototype, "paywall_subscription_price", void 0);
+__decorate([
+    property({ type: Number })
+], KompasGracePeriod.prototype, "paywall_position", void 0);
+__decorate([
+    property({ type: String })
+], KompasGracePeriod.prototype, "tracker_page_type", void 0);
+__decorate([
+    property({ type: String })
+], KompasGracePeriod.prototype, "tracker_content_id", void 0);
+__decorate([
+    property({ type: String })
+], KompasGracePeriod.prototype, "tracker_content_title", void 0);
+__decorate([
+    property({ type: String })
+], KompasGracePeriod.prototype, "tracker_content_categories", void 0);
+__decorate([
+    property({ type: String })
+], KompasGracePeriod.prototype, "tracker_content_type", void 0);
+__decorate([
+    property({ type: String })
+], KompasGracePeriod.prototype, "tracker_user_type", void 0);
+__decorate([
+    property({ type: String })
+], KompasGracePeriod.prototype, "tracker_subscription_status", void 0);
+__decorate([
+    property({ type: String })
+], KompasGracePeriod.prototype, "tracker_page_domain", void 0);
+__decorate([
+    property({ type: String })
+], KompasGracePeriod.prototype, "tracker_metered_wall_type", void 0);
+__decorate([
+    property({ type: Number })
+], KompasGracePeriod.prototype, "tracker_metered_wall_balance", void 0);
 __decorate([
     state()
 ], KompasGracePeriod.prototype, "maxGracePeriod", void 0);

package/dist/src/components/kompasid-grace-period/KompasGracePeriod.js.map

@@ -1 +1 @@
-{"version":3,"file":"KompasGracePeriod.js","sourceRoot":"","sources":["../../../../src/components/kompasid-grace-period/KompasGracePeriod.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { deviceType } from '../../utils/deviceType.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\n\n@customElement('kompasid-grace-period')\nexport class KompasGracePeriod extends LitElement {\n  static styles = [\n    css`\n      :host {\n        font-family: 'PT Sans', sans-serif;\n      }\n\n      .body {\n        position: sticky;\n        top: 0;\n        height: 100%;\n        width: 100%;\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * Props\n   */\n  /**\n   * property totalGracePeriod = how many days are left in grace period\n   * property isColumn = changes how the component looks on different screen sizes\n   * property isShowButton = shows or hides a subscription button\n   * property subscriptionId = used for renewal subs\n   */\n\n  @property({ type: Number }) totalGracePeriod = 0\n  @property({ type: Boolean }) isColumn = false\n  @property({ type: Boolean }) isShowButton = false\n  @property({ type: String }) subscriptionId = ''\n\n  /**\n   * State\n   */\n  @state() private maxGracePeriod = 7\n  @state() private updateSubscription = 'https://checkoutv2.kompas.id'\n\n  private getCountdownGracePeriod() {\n    const { totalGracePeriod } = this\n    const { maxGracePeriod } = this\n    if (totalGracePeriod === 7) {\n      return html`\n        <p>\n          Anda dalam <b class=\"text-orange-500\"> hari terakhir</b> masa tenggang\n          langganan. Segera perbarui paket langganan untuk tetap mengakses\n          konten premium tanpa batas.\n        </p>\n      `\n    }\n    return html`\n      <p>\n        Masa tenggang langganan Anda tersisa\n        <b class=\"text-orange-500\"\n          >${maxGracePeriod - totalGracePeriod + 1} hari lagi</b\n        >. Segera perbarui paket langganan untuk tetap mengakses konten premium\n        tanpa batas.\n      </p>\n    `\n  }\n\n  private redirectToBerlangganan(): void {\n    this.dataLayeronPerbaruiLanggananButton()\n    window.open(\n      `${this.updateSubscription}/kdp?productId=${this.subscriptionId}`\n    )\n  }\n\n  private dataLayeronPerbaruiLanggananButton(): void {\n    window.dataLayer.push({\n      event: 'gracePeriodClick',\n      interface: deviceType(),\n      dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n      urlName: window.location.href,\n    })\n  }\n\n  private dataLayeronGracePeriod(): void {\n    window.dataLayer.push({\n      event: 'gracePeriodImpression',\n      interface: deviceType(),\n      dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n      urlName: window.location.href,\n    })\n  }\n\n  private gracePeriodTemplate() {\n    return html`\n      <div\n        class=\"${this.isColumn\n          ? 'rounded-lg'\n          : 'md:flex-row lg:px-8'} flex flex-col w-full justify-end py-4 md:space-x-4 px-4 bottom-0 max-w-7xl mx-auto\"\n      >\n        <div class=\"text-grey-600 text-sm md:text-base self-center text-left\">\n          ${this.getCountdownGracePeriod()}\n        </div>\n        ${!this.isShowButton\n          ? html`\n              <div\n                class=\"flex self-center w-full md:w-1/2 justify-end pt-4 md:pt-0\"\n              >\n                <button\n                  @click=${this.redirectToBerlangganan}\n                  class=\"bg-green-500 p-2 px-5 rounded-md font-bold text-grey-100 text-sm md:text-base w-full md:w-auto\"\n                >\n                  Perbarui Langganan\n                </button>\n              </div>\n            `\n          : nothing}\n      </div>\n    `\n  }\n\n  override async connectedCallback() {\n    super.connectedCallback()\n    this.dataLayeronGracePeriod()\n  }\n\n  render() {\n    return html`\n      <div class=\"sticky bottom-0 w-full h-full bg-orange-100\">\n        ${this.totalGracePeriod > 0 ? this.gracePeriodTemplate() : nothing}\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"KompasGracePeriod.js","sourceRoot":"","sources":["../../../../src/components/kompasid-grace-period/KompasGracePeriod.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { deviceType } from '../../utils/deviceType.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\n\n@customElement('kompasid-grace-period')\nexport class KompasGracePeriod extends LitElement {\n  static styles = [\n    css`\n      :host {\n        font-family: 'PT Sans', sans-serif;\n      }\n\n      .body {\n        position: sticky;\n        top: 0;\n        height: 100%;\n        width: 100%;\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * Props\n   */\n  /**\n   * property totalGracePeriod = how many days are left in grace period\n   * property isColumn = changes how the component looks on different screen sizes\n   * property isShowButton = shows or hides a subscription button\n   * property paywall_location = the location where user encounter the paywall\n   * property paywall_subscription_package = the name of the subscription package viewed by user\n   * property paywall_subscription_id = the ID of the subscription package viewed by user\n   * property paywall_subscription_price = the price of the subscriprtion package viewed by user\n   * property paywall_position = the position of the subscription package viewed by user\n   * property tracker_page_type = type of the page\n   * property tracker_content_id = ID of article (slug)\n   * property tracker_content_type = whether it's free article or paid article\n   * property tracker_content_title = the title of article\n   * property tracker_content_categories = the category of the content\n   * property tracker_user_type = type of user based on their subscription\n   * property tracker_subscription_status = status of their subscription\n   * property tracker_page_domain = page Domain\n   * property tracker_metered_wall_type = the type of Metered Wall\n   * property tracker_metered_wall_balance = the balance of their metered wall\n   */\n\n  @property({ type: Number }) totalGracePeriod = 0\n  @property({ type: Boolean }) isColumn = false\n  @property({ type: Boolean }) isShowButton = false\n  @property({ type: String }) paywall_location = ''\n  @property({ type: String }) paywall_subscription_package = ''\n  @property({ type: Number }) paywall_subscription_id = 0\n  @property({ type: Number }) paywall_subscription_price = 0\n  @property({ type: Number }) paywall_position = 0\n  @property({ type: String }) tracker_page_type = ''\n  @property({ type: String }) tracker_content_id = ''\n  @property({ type: String }) tracker_content_title = ''\n  @property({ type: String }) tracker_content_categories = ''\n  @property({ type: String }) tracker_content_type = ''\n  @property({ type: String }) tracker_user_type = ''\n  @property({ type: String }) tracker_subscription_status = ''\n  @property({ type: String }) tracker_page_domain = ''\n  @property({ type: String }) tracker_metered_wall_type = ''\n  @property({ type: Number }) tracker_metered_wall_balance = 0\n\n  /**\n   * State\n   */\n  @state() private maxGracePeriod = 7\n  @state() private updateSubscription = 'https://checkoutv2.kompas.id'\n\n  private getCountdownGracePeriod() {\n    const { totalGracePeriod } = this\n    const { maxGracePeriod } = this\n    if (totalGracePeriod === 7) {\n      return html`\n        <p>\n          Anda dalam <b class=\"text-orange-500\"> hari terakhir</b> masa tenggang\n          langganan. Segera perbarui paket langganan untuk tetap mengakses\n          konten premium tanpa batas.\n        </p>\n      `\n    }\n    return html`\n      <p>\n        Masa tenggang langganan Anda tersisa\n        <b class=\"text-orange-500\"\n          >${maxGracePeriod - totalGracePeriod + 1} hari lagi</b\n        >. Segera perbarui paket langganan untuk tetap mengakses konten premium\n        tanpa batas.\n      </p>\n    `\n  }\n\n  private redirectToBerlangganan(): void {\n    this.dataLayeronPerbaruiLanggananButton()\n    const originHost: string = encodeURIComponent(window.location.href)\n\n    this.sendGtmEvent('subscribe_button_clicked')\n\n    window.open(\n      `${this.updateSubscription}/kdp?productId=${this.paywall_subscription_id}&referrer=${originHost}&source=article`\n    )\n  }\n\n  private getGtmParams(): Record<string, any> {\n    return {\n      paywall_location: this.paywall_location,\n      paywall_subscription_package: this.paywall_subscription_package,\n      paywall_subscription_id: this.paywall_subscription_id,\n      paywall_subscription_price: this.paywall_subscription_price,\n      paywall_position: this.paywall_position,\n      page_type: this.tracker_page_type,\n      content_id: this.tracker_content_id,\n      content_title: this.tracker_content_title,\n      content_categories: this.tracker_content_categories,\n      content_type: this.tracker_content_type,\n      user_type: this.tracker_user_type,\n      subscription_status: this.tracker_subscription_status,\n      page_domain: this.tracker_page_domain || 'Kompas.id',\n      metered_wall_type: this.tracker_metered_wall_type || 'GP',\n      metered_wall_balance: this.tracker_metered_wall_balance,\n    }\n  }\n\n  private sendGtmEvent(event: string) {\n    let gtmParams: Record<string, any> = { event }\n\n    if (event === 'paywall_viewed') {\n      gtmParams.impressions = [\n        {\n          ...this.getGtmParams(),\n        },\n      ]\n    } else {\n      gtmParams = { ...gtmParams, ...this.getGtmParams() }\n    }\n\n    window.dataLayer.push(gtmParams)\n  }\n\n  private dataLayeronPerbaruiLanggananButton(): void {\n    window.dataLayer.push({\n      event: 'gracePeriodClick',\n      interface: deviceType(),\n      dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n      urlName: window.location.href,\n    })\n  }\n\n  private dataLayeronGracePeriod(): void {\n    window.dataLayer.push({\n      event: 'gracePeriodImpression',\n      interface: deviceType(),\n      dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n      urlName: window.location.href,\n    })\n  }\n\n  private gracePeriodTemplate() {\n    return html`\n      <div\n        class=\"${this.isColumn\n          ? 'rounded-lg'\n          : 'md:flex-row lg:px-8'} flex flex-col w-full justify-end py-4 md:space-x-4 px-4 bottom-0 max-w-7xl mx-auto\"\n      >\n        <div class=\"text-grey-600 text-sm md:text-base self-center text-left\">\n          ${this.getCountdownGracePeriod()}\n        </div>\n        ${!this.isShowButton\n          ? html`\n              <div\n                class=\"flex self-center w-full md:w-1/2 justify-end pt-4 md:pt-0\"\n              >\n                <button\n                  @click=${this.redirectToBerlangganan}\n                  class=\"bg-green-500 p-2 px-5 rounded-md font-bold text-grey-100 text-sm md:text-base w-full md:w-auto\"\n                >\n                  Perbarui Langganan\n                </button>\n              </div>\n            `\n          : nothing}\n      </div>\n    `\n  }\n\n  override async connectedCallback() {\n    super.connectedCallback()\n\n    this.sendGtmEvent('paywall_viewed')\n\n    this.dataLayeronGracePeriod()\n  }\n\n  render() {\n    return html`\n      <div class=\"sticky bottom-0 w-full h-full bg-orange-100\">\n        ${this.totalGracePeriod > 0 ? this.gracePeriodTemplate() : nothing}\n      </div>\n    `\n  }\n}\n"]}