@streamscloud/embeddable 6.3.2 → 6.3.3

package/dist/short-videos/short-video-viewer/cmp.attachments-inline.svelte

@@ -1,18 +1,76 @@
 <script lang="ts">import { Icon, IconColor } from '../../ui/icon';
 import { ImageRounded } from '../../ui/image';
 import IconTargetArrow from '@fluentui/svg-icons/icons/target_arrow_20_regular.svg?raw';
-let { model } = $props();
+import { onMount } from 'svelte';
+let { model, on } = $props();
 const attachmentsToShow = $derived.by(() => {
-    const products = model.products.filter((p) => !!p.image).map((p) => ({ isAd: false, image: p.image, link: p.link }));
-    const ads = (model.ad ? [model.ad] : []).filter((a) => !!a.image).map((a) => { var _a; return ({ isAd: true, image: a.image, link: ((_a = a.ctaButton) === null || _a === void 0 ? void 0 : _a.url) || null }); });
+    const products = model.products
+        .filter((p) => !!p.image)
+        .map((p) => ({
+        isAd: false,
+        image: p.image,
+        link: p.link,
+        productId: p.id
+    }));
+    const ads = (model.ad ? [model.ad] : [])
+        .filter((a) => !!a.image)
+        .map((a) => {
+        var _a;
+        return ({
+            isAd: true,
+            image: a.image,
+            link: ((_a = a.ctaButton) === null || _a === void 0 ? void 0 : _a.url) || null,
+            productId: null
+        });
+    });
     return [...products, ...ads];
 });
+const handleAttachmentClick = (attachment) => {
+    if (attachment.productId && (on === null || on === void 0 ? void 0 : on.productClick)) {
+        on.productClick(attachment.productId);
+    }
+    if (attachment.link) {
+        window.open(attachment.link, '_blank');
+    }
+};
+let attachmentElements = {};
+onMount(() => {
+    if (on === null || on === void 0 ? void 0 : on.productImpression) {
+        // Track product impressions when they come into view
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
+                    const productId = entry.target.getAttribute('data-product-id');
+                    if (productId) {
+                        on.productImpression(productId, model.id);
+                        observer.unobserve(entry.target); // Only track once per session
+                    }
+                }
+            });
+        }, { threshold: 0.5 });
+        // Observe all product elements
+        Object.entries(attachmentElements).forEach(([key, element]) => {
+            if (element && key.startsWith('product-')) {
+                observer.observe(element);
+            }
+        });
+        return () => {
+            observer.disconnect();
+        };
+    }
+});
 </script>
 
 <div class="attachments-inline-container">
   <div class="attachments-inline">
-    {#each attachmentsToShow as attachment (attachment)}
-      <div class="attachments-inline__item" onclick={() => attachment.link && window.open(attachment.link, '_blank')} onkeydown={() => {}} role="none">
+    {#each attachmentsToShow as attachment, index (attachment)}
+      <div
+        class="attachments-inline__item"
+        onclick={() => handleAttachmentClick(attachment)}
+        onkeydown={() => {}}
+        role="none"
+        bind:this={attachmentElements[attachment.productId ? `product-${attachment.productId}` : `ad-${index}`]}
+        data-product-id={attachment.productId || undefined}>
         <ImageRounded src={attachment.image} alt="" />
         {#if attachment.isAd}
           <div class="attachments-inline__item-icon">

package/dist/short-videos/short-video-viewer/cmp.attachments-inline.svelte.d.ts

@@ -1,6 +1,10 @@
 import type { ShortVideoViewerModel } from './types';
 type Props = {
     model: ShortVideoViewerModel;
+    on?: {
+        productClick?: (productId: string) => void;
+        productImpression?: (productId: string, videoId: string) => void;
+    };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/short-videos/short-video-viewer/cmp.attachments.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { AdCard } from '../../ads/ad-card';
-import { ProductCard } from '../../products/product-card';
+import { default as ShortVideoProductCard } from './cmp.short-video-product-card.svelte';
 import { ShortVideoAttachmentsLocalization } from './short-video-attachments-localization';
 import {} from './types';
 let { shortVideo, localization: localizationInit = 'en', on } = $props();
@@ -14,7 +14,14 @@ const localization = $derived(new ShortVideoAttachmentsLocalization(localization
 
     {#if shortVideo.products.length}
       {#each shortVideo.products as product (product.id)}
-        <ProductCard product={product} localization={localization.productLocalization} on={on} />
+        <ShortVideoProductCard
+          product={product}
+          videoId={shortVideo.id}
+          localization={localization.productLocalization}
+          on={{
+            productClick: on?.productClick,
+            impression: on?.productImpression
+          }} />
       {/each}
     {/if}
   </div>

package/dist/short-videos/short-video-viewer/cmp.attachments.svelte.d.ts

@@ -6,6 +6,7 @@ type Props = {
     localization?: IShortVideoAttachmentsLocalization | Locale;
     on?: {
         productClick?: (productId: string) => void;
+        productImpression?: (productId: string, videoId: string) => void;
     };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;

package/dist/short-videos/short-video-viewer/cmp.short-video-product-card.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">import { ProductCard } from '../../products/product-card';
+import { onMount } from 'svelte';
+let { product, videoId, localization, includeBeforeNowPrefix, inert = false, on } = $props();
+let productElement;
+const productData = product;
+onMount(() => {
+    if (productElement && (on === null || on === void 0 ? void 0 : on.impression)) {
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
+                    on.impression(product.id, videoId);
+                    observer.unobserve(entry.target);
+                }
+            });
+        }, { threshold: 0.5 });
+        observer.observe(productElement);
+        return () => {
+            observer.disconnect();
+        };
+    }
+});
+</script>
+
+<div bind:this={productElement}>
+  <ProductCard product={productData} localization={localization} includeBeforeNowPrefix={includeBeforeNowPrefix} inert={inert} on={on} />
+</div>

package/dist/short-videos/short-video-viewer/cmp.short-video-product-card.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Locale } from '../../core/locale';
+import type { IProductCardLocalization } from '../../products/product-card/product-card-localization';
+import type { ShortVideoProductCardModel } from './types';
+type Props = {
+    product: ShortVideoProductCardModel;
+    videoId: string;
+    localization?: IProductCardLocalization | Locale;
+    includeBeforeNowPrefix?: boolean;
+    inert?: boolean;
+    on?: {
+        productClick?: (id: string) => void;
+        impression?: (productId: string, videoId: string) => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/short-videos/short-video-viewer/cmp.short-video-viewer.svelte

@@ -36,7 +36,12 @@ $effect(() => {
 
   <div class="short-video-viewer__actions-panel" class:short-video-viewer__actions-panel--inside-frame={true}>
     {#if uiManager.showAttachments}
-      <AttachmentsInline model={model} />
+      <AttachmentsInline
+        model={model}
+        on={{
+          productClick: on?.productClick,
+          productImpression: on?.productImpression
+        }} />
     {/if}
     {#if uiManager.showControls}
       <ShortVideoControls model={model} socialInteractionsHandler={socialInteractionsHandler} on={{ attachmentsClicked: uiManager.toggleEnableAttachments }} />

package/dist/short-videos/short-video-viewer/cmp.short-video-viewer.svelte.d.ts

@@ -10,6 +10,8 @@ type Props = {
     localization?: IShortVideoViewerLocalization | Locale;
     on?: {
         progress?: (progress: number) => void;
+        productClick?: (productId: string) => void;
+        productImpression?: (productId: string, videoId: string) => void;
     };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;

package/dist/short-videos/short-videos-player/cmp.short-videos-player.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { MediaCenter, MediaCenterMode } from '../../media-center/media-center';
 import { createShadowRoot } from '../../ui/shadow-dom';
 import { mount, unmount } from 'svelte';
-let { dataProvider, socialInteractionsHandler, localization, showStreamsCloudWatermark, disableBackground, on, mediaCenterDataProvider } = $props();
+let { dataProvider, socialInteractionsHandler, localization, showStreamsCloudWatermark, disableBackground, analyticsHandler, on, mediaCenterDataProvider } = $props();
 const initHost = (node) => {
     const shadowRoot = createShadowRoot(node);
     const mounted = mount(MediaCenter, {
@@ -16,6 +16,7 @@ const initHost = (node) => {
                     disableBackground,
                     localization,
                     showStreamsCloudWatermark,
+                    analyticsHandler,
                     on
                 }
             }

package/dist/short-videos/short-videos-player/index.d.ts

@@ -3,9 +3,9 @@ import type { ShortVideoViewerModel } from '../short-video-viewer';
 import type { IPlayerItemsProvider } from '../../ui/player';
 import { default as ShortVideosPlayer } from './cmp.short-videos-player.svelte';
 import type { IShortVideosPlayerLocalization } from './short-videos-player-localization';
-import { type PlayerSettings } from './types';
+import { type PlayerSettings, type IShortVideoAnalyticsHandler } from './types';
 export { ShortVideosPlayer };
-export type { IShortVideosPlayerLocalization, IMediaCenterDataProvider, IPlayerItemsProvider };
+export type { IShortVideosPlayerLocalization, IMediaCenterDataProvider, IPlayerItemsProvider, IShortVideoAnalyticsHandler };
 /**
  * Opens the short videos player modal.
  *

package/dist/short-videos/short-videos-player/index.js

@@ -3,6 +3,7 @@ import { InternalMediaCenterDataProvider } from '../../media-center/data-provide
 import { MediaCenter, MediaCenterMode } from '../../media-center/media-center';
 import { ModalShadowHost } from '../../ui/shadow-dom';
 import { default as ShortVideosPlayer } from './cmp.short-videos-player.svelte';
+import { InternalShortVideoAnalyticsHandler } from './internal-short-video-analytics-handler';
 import { InternalShortVideoPlayerProvider } from './internal-short-video-player-provider';
 import {} from './types';
 import { mount, unmount } from 'svelte';
@@ -21,6 +22,10 @@ export function openShortVideosPlayer(init) {
     if (!mediaCenterDataProvider && init.mediaPageId) {
         mediaCenterDataProvider = new InternalMediaCenterDataProvider(init.mediaPageId, graphqlOrigin);
     }
+    let analyticsHandler = init.analyticsHandler;
+    if (!analyticsHandler && !init.shortVideosProvider && initiator) {
+        analyticsHandler = new InternalShortVideoAnalyticsHandler(graphqlOrigin);
+    }
     const shadowHost = new ModalShadowHost();
     const mounted = mount(MediaCenter, {
         target: shadowHost.shadowRoot,
@@ -34,6 +39,7 @@ export function openShortVideosPlayer(init) {
                     disableBackground,
                     localization,
                     showStreamsCloudWatermark,
+                    analyticsHandler,
                     on: {
                         playerClosed: async () => {
                             await unmount(mounted);

package/dist/short-videos/short-videos-player/internal-short-video-analytics-handler.d.ts

@@ -0,0 +1,8 @@
+import type { IShortVideoAnalyticsHandler } from './types';
+export declare class InternalShortVideoAnalyticsHandler implements IShortVideoAnalyticsHandler {
+    constructor(graphqlOrigin: string | undefined);
+    setOrganizationId: (organizationId: string) => void;
+    trackShortVideoView: (videoId: string) => void;
+    trackShortVideoProductImpression: (productId: string, videoId: string) => void;
+    trackShortVideoProductClicked: (productId: string, videoId: string) => void;
+}

package/dist/short-videos/short-videos-player/internal-short-video-analytics-handler.js

@@ -0,0 +1,13 @@
+import { getOrCreateProfileId } from '../../core/analytics.profile-id';
+import { constructGraphQLUrl } from '../../core/graphql';
+import { AppEventsTracker } from '@streamscloud/streams-analytics-collector';
+export class InternalShortVideoAnalyticsHandler {
+    constructor(graphqlOrigin) {
+        AppEventsTracker.setEndpoint(constructGraphQLUrl(graphqlOrigin));
+        AppEventsTracker.setProfileId(getOrCreateProfileId());
+    }
+    setOrganizationId = (organizationId) => AppEventsTracker.setOrganizationId(organizationId);
+    trackShortVideoView = (videoId) => AppEventsTracker.trackShortVideoView(videoId);
+    trackShortVideoProductImpression = (productId, videoId) => AppEventsTracker.trackShortVideoProductImpression(productId, videoId);
+    trackShortVideoProductClicked = (productId, videoId) => AppEventsTracker.trackShortVideoProductClick(productId, videoId);
+}

package/dist/short-videos/short-videos-player/short-videos-player-view.svelte

@@ -19,7 +19,7 @@ import { InternalShortVideoPlayerProvider } from './internal-short-video-player-
 import { ShortVideosPlayerLocalization } from './short-videos-player-localization';
 import { ShortVideosPlayerUiManager } from './ui-manager.svelte';
 import { untrack } from 'svelte';
-let { dataProvider, socialInteractionsHandler, localization: localizationInit = 'en', showStreamsCloudWatermark, disableBackground, on, categoriesSwitcher, playerLogo = null, fadeContent = false } = $props();
+let { dataProvider, socialInteractionsHandler, localization: localizationInit = 'en', showStreamsCloudWatermark, disableBackground, analyticsHandler, on, categoriesSwitcher, playerLogo = null, fadeContent = false } = $props();
 const localization = $derived(new ShortVideosPlayerLocalization(localizationInit));
 let everTouched = $state(false);
 let background = $state(null);
@@ -56,6 +56,7 @@ const onItemActivated = (id) => {
         return;
     }
     background = resolveVideoCover(shortVideo);
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoView(id);
     (_a = on === null || on === void 0 ? void 0 : on.videoActivated) === null || _a === void 0 ? void 0 : _a.call(on, id);
 };
 const resolveVideoCover = (shortVideo) => {
@@ -87,6 +88,12 @@ const onPlayerClose = () => {
     var _a;
     (_a = on === null || on === void 0 ? void 0 : on.playerClosed) === null || _a === void 0 ? void 0 : _a.call(on);
 };
+const onShortVideoProductClick = (productId, videoId) => {
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductClicked(productId, videoId);
+};
+const onShortVideoProductImpression = (productId, videoId) => {
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductImpression(productId, videoId);
+};
 </script>
 
 <svelte:document onkeydown={(e) => handleEsc(e, onPlayerClose)} />
@@ -127,7 +134,11 @@ const onPlayerClose = () => {
                 autoplay="on-appearance"
                 showAttachments={uiManager.showShortVideoOverlay}
                 showControls={uiManager.showShortVideoOverlay}
-                localization={localization.shortVideoViewerLocalization} />
+                localization={localization.shortVideoViewerLocalization}
+                on={{
+                  productClick: (productId: string) => onShortVideoProductClick(productId, item.id),
+                  productImpression: (productId: string, videoId: string) => onShortVideoProductImpression(productId, videoId)
+                }} />
             {/snippet}
           </PlayerSlider>
           {#if uiManager.isMobileView && buffer.loaded.length > 1 && !everTouched}

package/dist/short-videos/short-videos-player/types.d.ts

@@ -2,14 +2,22 @@ import type { Locale } from '../../core/locale';
 import type { ShortVideoViewerModel, IPostSocialInteractionsHandler } from '../short-video-viewer';
 import type { IPlayerItemsProvider } from '../../ui/player';
 import type { IShortVideosPlayerLocalization } from './short-videos-player-localization';
+export interface IShortVideoAnalyticsHandler {
+    setOrganizationId: (organizationId: string) => void;
+    trackShortVideoView: (videoId: string) => void;
+    trackShortVideoProductImpression: (productId: string, videoId: string) => void;
+    trackShortVideoProductClicked: (productId: string, videoId: string) => void;
+}
 export type ShortVideoPlayerProps = PlayerSettings & {
     dataProvider: IPlayerItemsProvider<ShortVideoViewerModel>;
+    analyticsHandler?: IShortVideoAnalyticsHandler;
 };
 export type PlayerSettings = {
     socialInteractionsHandler?: IPostSocialInteractionsHandler;
     disableBackground?: boolean;
     localization?: IShortVideosPlayerLocalization | Locale;
     showStreamsCloudWatermark?: boolean;
+    analyticsHandler?: IShortVideoAnalyticsHandler;
     on?: {
         playerClosed?: () => void;
         videoActivated?: (id: string) => void;

package/dist/streams/cmp.stream-product-card.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">import { ProductCard } from '../products/product-card';
+import { onMount } from 'svelte';
+let { product, streamId, localization, includeBeforeNowPrefix, inert = false, on } = $props();
+let productElement;
+onMount(() => {
+    if (productElement && (on === null || on === void 0 ? void 0 : on.impression)) {
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
+                    on.impression(product.id, streamId);
+                    observer.unobserve(entry.target);
+                }
+            });
+        }, { threshold: 0.5 });
+        observer.observe(productElement);
+        return () => {
+            observer.disconnect();
+        };
+    }
+});
+</script>
+
+<div bind:this={productElement}>
+  <ProductCard product={product} localization={localization} includeBeforeNowPrefix={includeBeforeNowPrefix} inert={inert} on={on} />
+</div>

package/dist/streams/cmp.stream-product-card.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Locale } from '../core/locale';
+import type { IProductCardLocalization } from '../products/product-card/product-card-localization';
+import type { ProductCardModel } from '../products/product-card/types';
+type Props = {
+    product: ProductCardModel;
+    streamId: string;
+    localization?: IProductCardLocalization | Locale;
+    includeBeforeNowPrefix?: boolean;
+    inert?: boolean;
+    on?: {
+        productClick?: (id: string) => void;
+        impression?: (productId: string, streamId: string) => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/streams/layout/cmp.slot-content.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import { Utils } from '../../core/utils';
 import { StreamElementView } from './element-views';
 import { StreamComponentDataType } from './enums';
+import { onMount } from 'svelte';
 let { model, localization, on } = $props();
 const component = $derived.by(() => {
     return model.components.find((c) => (model.data ? c.dataType === model.data.type : c.dataType === StreamComponentDataType.NoData));
@@ -39,6 +40,23 @@ const handleProductClick = (e) => {
         window.open(productModel.link, '_blank', 'noopener noreferrer');
     }
 };
+let productElement = $state();
+onMount(() => {
+    if (productElement && (productModel === null || productModel === void 0 ? void 0 : productModel.id) && (on === null || on === void 0 ? void 0 : on.productImpression)) {
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
+                    on.productImpression(productModel.id);
+                    observer.unobserve(entry.target);
+                }
+            });
+        }, { threshold: 0.5 });
+        observer.observe(productElement);
+        return () => {
+            observer.disconnect();
+        };
+    }
+});
 </script>
 
 {#snippet slotContent()}
@@ -49,11 +67,19 @@ const handleProductClick = (e) => {
   {/if}
 {/snippet}
 {#if productModel?.link}
-  <a class="stream-slot-content-product-link" href={productModel.link} onclick={handleProductClick} target="_blank" rel="noopener noreferrer">
+  <a
+    class="stream-slot-content-product-link"
+    href={productModel.link}
+    onclick={handleProductClick}
+    target="_blank"
+    rel="noopener noreferrer"
+    bind:this={productElement}>
     {@render slotContent()}
   </a>
 {:else}
-  {@render slotContent()}
+  <div bind:this={productElement}>
+    {@render slotContent()}
+  </div>
 {/if}
 
 <style>@keyframes fadeIn {

package/dist/streams/layout/cmp.slot-content.svelte.d.ts

@@ -6,6 +6,7 @@ type Props = {
     localization: IStreamElementLocalization | Locale;
     on?: {
         productClick: (productId: string) => void;
+        productImpression?: (productId: string) => void;
         progress?: (videoId: string, progress: number) => void;
     };
 };

package/dist/streams/stream-page-viewer/cmp.stream-page-viewer.svelte.d.ts

@@ -6,6 +6,7 @@ type Props = {
     localization: IStreamPageViewerLocalization | Locale;
     on?: {
         productClick: (productId: string) => void;
+        productImpression?: (productId: string) => void;
         progress?: (videoId: string, progress: number) => void;
     };
 };

package/dist/streams/stream-player/controls.svelte

@@ -82,7 +82,8 @@ const changeShowShortVideoAttachments = () => {
             shortVideo={shortVideo}
             localization={localization.shortVideoAttachmentsLocalization}
             on={{
-              productClick: on.productClick
+              productClick: on.productClick,
+              productImpression: on.productImpression
             }} />
         </div>
       {/if}

package/dist/streams/stream-player/controls.svelte.d.ts

@@ -10,6 +10,7 @@ type Props = {
     on: {
         closePlayer: () => void;
         productClick?: (productId: string) => void;
+        productImpression?: (productId: string) => void;
     };
 };
 declare const Controls: import("svelte").Component<Props, {}, "">;

package/dist/streams/stream-player/internal-stream-analytics-handler.d.ts

@@ -4,9 +4,13 @@ export declare class InternalStreamAnalyticsHandler implements IStreamAnalyticsH
     setOrganizationId: (organizationId: string) => void;
     trackStreamView: (streamId: string) => void;
     trackStreamPageView: (pageId: string, streamId: string) => void;
-    trackStreamProductClicked: (productId: string, streamId: string) => void;
     trackStreamEngagementTime: (streamId: string, engagementTime: number) => void;
     trackStreamScrollDepth: (streamId: string, scrollDepth: number) => void;
+    trackStreamProductImpression: (productId: string, streamId: string) => void;
+    trackStreamProductClicked: (productId: string, streamId: string) => void;
     reportPageVideoViews: (videoId: string, streamId: string) => void;
+    trackShortVideoView: (videoId: string) => void;
+    trackShortVideoProductImpression: (productId: string, videoId: string) => void;
+    trackShortVideoProductClicked: (productId: string, videoId: string) => void;
     trackShortVideoProgress: (pageId: string, videoId: string, progress: number, streamId: string) => void;
 }

package/dist/streams/stream-player/internal-stream-analytics-handler.js

@@ -9,9 +9,13 @@ export class InternalStreamAnalyticsHandler {
     setOrganizationId = (organizationId) => AppEventsTracker.setOrganizationId(organizationId);
     trackStreamView = (streamId) => AppEventsTracker.trackStreamView(streamId);
     trackStreamPageView = (pageId, streamId) => AppEventsTracker.trackStreamPageView(pageId, streamId);
-    trackStreamProductClicked = (productId, streamId) => AppEventsTracker.trackStreamProductClicked(productId, streamId);
     trackStreamEngagementTime = (streamId, engagementTime) => AppEventsTracker.trackStreamEngagementTime(streamId, engagementTime);
     trackStreamScrollDepth = (streamId, scrollDepth) => AppEventsTracker.trackStreamScrollDepth(streamId, scrollDepth);
+    trackStreamProductImpression = (productId, streamId) => AppEventsTracker.trackStreamProductImpression(productId, streamId);
+    trackStreamProductClicked = (productId, streamId) => AppEventsTracker.trackStreamProductClicked(productId, streamId);
     reportPageVideoViews = (videoId, streamId) => AppEventsTracker.reportPageVideoViews(videoId, streamId);
+    trackShortVideoView = (videoId) => AppEventsTracker.trackShortVideoView(videoId);
+    trackShortVideoProductImpression = (productId, videoId) => AppEventsTracker.trackShortVideoProductImpression(productId, videoId);
+    trackShortVideoProductClicked = (productId, videoId) => AppEventsTracker.trackShortVideoProductClick(productId, videoId);
     trackShortVideoProgress = (pageId, videoId, progress, streamId) => AppEventsTracker.trackShortVideoProgress(pageId, videoId, progress, streamId);
 }

package/dist/streams/stream-player/stream-player.svelte

@@ -134,6 +134,9 @@ const onPageActivated = (id) => {
     background = (page === null || page === void 0 ? void 0 : page.cover) || null;
     if (page) {
         analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamPageView(id, streamId);
+        if (page.type === 'short-video' && page.shortVideo) {
+            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoView(page.shortVideo.id);
+        }
         const currentIndex = buffer === null || buffer === void 0 ? void 0 : buffer.loaded.findIndex((p) => p.id === id);
         if (currentIndex !== undefined && currentIndex > maxPageIndexViewed) {
             maxPageIndexViewed = currentIndex;
@@ -143,6 +146,15 @@ const onPageActivated = (id) => {
 const onProductCardClick = (productId) => {
     analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamProductClicked(productId, streamId);
 };
+const onShortVideoProductClick = (productId, videoId) => {
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductClicked(productId, videoId);
+};
+const onStreamProductImpression = (productId) => {
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamProductImpression(productId, streamId);
+};
+const onShortVideoProductImpression = (productId, videoId) => {
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductImpression(productId, videoId);
+};
 const onPlayerClose = () => {
     var _a;
     stopActivityTracking();
@@ -191,13 +203,16 @@ const onProgress = (pageId, videoId, progress) => {
                   localization={localization.streamPageViewerLocalization}
                   on={{
                     progress: (videoId: String, progress: Number) => onProgress(item.id, videoId, progress),
-                    productClick: (productId: String) => onProductCardClick(productId)
+                    productClick: (productId: String) => onProductCardClick(productId),
+                    productImpression: (productId: String) => onStreamProductImpression(productId)
                   }} />
               {:else if item.type === 'short-video'}
                 <ShortVideoViewer
                   model={mapToShortVideoViewerModel(item.shortVideo)}
                   on={{
-                    progress: (progress) => onProgress(item.id, item.shortVideo.id, progress)
+                    progress: (progress) => onProgress(item.id, item.shortVideo.id, progress),
+                    productClick: (productId: string) => onShortVideoProductClick(productId, item.shortVideo.id),
+                    productImpression: (productId: string, videoId: string) => onShortVideoProductImpression(productId, videoId)
                   }}
                   autoplay="on-appearance"
                   socialInteractionsHandler={postSocialInteractionsHandler}
@@ -231,7 +246,8 @@ const onProgress = (pageId, videoId, progress) => {
         postSocialInteractionsHandler={postSocialInteractionsHandler}
         on={{
           closePlayer: () => onPlayerClose(),
-          productClick: (productId: String) => onProductCardClick(productId)
+          productClick: (productId: String) => onProductCardClick(productId),
+          productImpression: (productId: String) => onStreamProductImpression(productId)
         }} />
     {/if}
   </div>

package/dist/streams/stream-player/types.d.ts

@@ -44,9 +44,13 @@ export interface IStreamAnalyticsHandler {
     setOrganizationId: (organizationId: string) => void;
     trackStreamView: (streamId: string) => void;
     trackStreamPageView: (pageId: string, streamId: string) => void;
+    trackStreamProductImpression: (productId: string, streamId: string) => void;
     trackStreamProductClicked: (productId: string, streamId: string) => void;
     trackStreamEngagementTime: (streamId: string, engagementTime: number) => void;
     trackStreamScrollDepth: (streamId: string, scrollDepth: number) => void;
     reportPageVideoViews: (videoId: string, streamId: string) => void;
+    trackShortVideoView: (videoId: string) => void;
+    trackShortVideoProductImpression: (productId: string, videoId: string) => void;
+    trackShortVideoProductClicked: (productId: string, videoId: string) => void;
     trackShortVideoProgress: (pageId: string, videoId: string, progress: number, streamId: string) => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "6.3.2",
+  "version": "6.3.3",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -108,7 +108,7 @@
   },
   "peerDependencies": {
     "@fluentui/svg-icons": "^1.1.292",
-    "@streamscloud/streams-analytics-collector": "^2.0.1",
+    "@streamscloud/streams-analytics-collector": "^2.0.9",
     "@urql/core": "^5.1.1",
     "dompurify": "^3.2.6",
     "mobile-detect": "^1.4.5",