Merge pull request #340 from apivideo/create-analytics-tab

Create analytics tab

README.md

@@ -14,11 +14,11 @@ meta:
 
 </div>
 
-Welcome to the developer documentation of api.video! Our platform empowers developers and businesses to seamlessly integrate video functionality into their applications and services. Whether you're looking to offer video on demand, live streaming, or leverage our player and analytics features, the api.video API is designed to simplify the process.
+Welcome to the developer documentation of api.video! Our platform empowers developers and businesses to seamlessly integrate video functionality into their applications and services. Whether you're looking to offer video on demand, live streaming, or leverage our delivery and analytics features, the api.video API is designed to simplify the process.
 
 Check out the products!
 
-<Grid cols="3" gap="3">
+<Grid cols="2" gap="3">
     <Component.LandingPageCard heading="Video" subheading="on demand">
         <Flex dir="column" pad="0" justify="between" gap="2">
             api.video's hosting service enables you to upload and store videos, and then deliver and share them easily across various devices and platforms.
@@ -33,12 +33,18 @@ Check out the products!
            <Button href="/live-streaming">Learn More</Button>
         </Flex>
     </Component.LandingPageCard>
-    <Component.LandingPageCard heading="Delivery" subheading="& analytics">
+    <Component.LandingPageCard heading="Delivery" subheading="& players">
         <Flex dir="column" pad="0" justify="between" gap="2">
             api.video lets you customize a large part of the delivery, whether it's the player's branding or adding captions, chapters, and watermarks.
-
            
-           <Button href="/delivery-analytics">Learn More</Button>
+           <Button href="/delivery">Learn More</Button>
+        </Flex>
+    </Component.LandingPageCard>
+    <Component.LandingPageCard heading="Analytics" subheading="& data">
+        <Flex dir="column" pad="0" justify="between" gap="2">
+            api.video provides video and live stream analytics to track viewer engagement, offering real time data on views, watch time, demographics, and drop-off points.
+           
+           <Button href="/analytics">Learn More</Button>
         </Flex>
     </Component.LandingPageCard>
 </Grid>
@@ -61,7 +67,7 @@ Check out the products!
 
             [Live streaming quickstart](/live-streaming/create-a-live-stream)
 
-            [Delivery & analytics quickstart](/delivery-analytics/delivery-analytics-quickstart)
+            [Delivery & player quickstart](/delivery/quickstart)
         </Flex>
     </Component.LandingPageList>
 
@@ -73,7 +79,7 @@ Check out the products!
 
             [Live streaming libraries & SDKs](/sdks/livestream)
 
-            [Delivery & analytics SDKs](/sdks/player)
+            [Player SDKs](/sdks/player)
 
             [No-code solutions](/sdks/nocode)
         </Flex>

_assets/css/style.css

@@ -409,15 +409,19 @@
 }
 
 .landing-page-card.Video .landing-page-card-header {
-  background: linear-gradient(215deg, #fa5b30 -5.18%, #f7b500 179.35%);
+  background: linear-gradient(76deg, #FA5B30 -24.15%, #F7B500 93.03%);
 }
 
 .landing-page-card.Live .landing-page-card-header {
-  background: linear-gradient(76deg, #642180 -24.15%, #af2a72 93.03%);
+  background: linear-gradient(76deg, #D71D76 -24.15%, #FA9130 93.03%);
 }
 
 .landing-page-card.Delivery .landing-page-card-header {
-  background: linear-gradient(76deg, #4eb2dd -24.15%, #642180 93.03%);
+  background: linear-gradient(76deg, #642180 -24.15%, #AF2A72 93.03%);
+}
+
+.landing-page-card.Analytics .landing-page-card-header {
+  background: linear-gradient(76deg, #186EB0 -24.15%, #3BC8F4 93.03%);
 }
 
 .landing-page-card-header {

analytics/README.md

@@ -0,0 +1,40 @@
+---
+title: Analytics overview
+toc: false
+breadcrumbs: false
+meta:
+  description: This page serves as a foundational guide to integrating api.video's solutions for video and live streaming analytics.
+---
+
+<div class="section-header no-toc">
+
+# How does <span style="color: var(--accent-10)">analytics</span> work?
+
+  api.video enables you to collect and segment viewer interactions with your content, giving you detailed insights on view events in real time. Analytics helps you  collect metrics like total number of plays, impressions, average watch time, and so on. You can also filter the data using custom date ranges, and a large selection of dimensions like countries, browsers, and even device types. 
+
+  Check out the most relevant metrics on all your videos and live streams in the api.video [dashboard](https://dashboard.api.video/data)!
+
+</div>
+
+---
+
+## Start analyzing with api.video
+
+<Grid cols="2" gap="3">
+<Card pad="3">
+    ![Analytics & data](/_assets/icons/analytics.svg)
+
+    **Analytics & data**\
+    Understand how you can collect delivery event data about your videos and live streams.
+
+    [Learn more ›](/analytics/overview)
+</Card>
+<Card pad="3">
+    ![Analytics SDKs](/_assets/icons/analytics.svg)
+
+    **Analytics SDKs**\
+    Check out api.video's dedicated libraries and SDKs for video and live stream analytics.
+
+    [Learn more ›](/sdks/player#player-analytics-sdks)
+</Card>
+</Grid>

analytics/navigation.yaml

@@ -0,0 +1,9 @@
+---
+- heading: Get started
+  items:
+  - label: How does analytics work? 
+    href: /analytics/README.md
+  - label: Analytics overview
+    href: /analytics/overview.md
+  - label: Analytics SDKs
+    href: /sdks/player/README.md#player-analytics-sdks

delivery-analytics/analytics.md → analytics/overview.md

@@ -1,10 +1,11 @@
 ---
 title: Analytics
+breadcrums: false
 meta: 
   description: Learn how you can get data insights for your videos and live streams using api.video's Analytics solution.
 ---
 
-# Analytics
+# Analytics overview
 
 api.video's Analytics enables you to retrieve complex event data about your videos and live streams.
 
@@ -20,15 +21,24 @@ Visit the **[Analytics](https://dashboard.api.video/data)** page on the Dashboar
 
 ## How it works
 
-Analytics uses player events to analyze and segment your viewers' interactions with your content. Here are some key aspects that can help you ensure that your Analytics implementation runs smoothly:
+Analytics uses player events to analyze and segment your viewers' interactions with your content. Here are some key aspects:
 
+- api.video retains analytics data for 30 days.
 - Player events are generated when your viewers engage with a video or live stream session.
 - Data is refreshed in real time, with a frequency of `<5s`.
-- api.video retains analytics data for 30 days.
-- Data does not carry over from the previous version of Analytics.
+- Data does not carry over from the previous versions of Analytics.
 - Video re-plays using the dedicated re-play button in the player do not generate player events.
 - If a user is viewing your content via a browser, refreshes the tab, and plays the content again, a new event is generated.
 
+<Callout pad="2" type="success">
+api.video provides calculates the total number of plays through 2 dedicated endpoints:
+
+- `/data/metrics/play/total`
+- `/data/buckets/play-total/media-id`
+
+These 2 endpoints return data that is not limited to 30 days of retention, and can return data from earlier versions of Analytics.
+</Callout>
+
 ### Requirements
 
 <Callout pad="2" type="info">

delivery-analytics/README.md → delivery/README.md

@@ -1,14 +1,14 @@
 ---
-title: "Delivery & analytics overview"
+title: "Delivery overview"
 toc: false
 breadcrumbs: false
 meta:
-  description: This page serves as a foundational guide to integrating api.video's solutions for video delivery, player customization, and analytics.
+  description: This page serves as a foundational guide to integrating api.video's solutions for video delivery and player customization.
 ---
 
 <div class="section-header no-toc">
 
-# How does <span style="color: var(--accent-10)">video delivery</span> work?
+# How does <span style="color: var(--accent-10)">video and live stream delivery</span> work?
 
   api.video lets you customize a large part of the delivery, from the branding of the player, to adding captions, chapters, and watermarks. You have full control over how you deliver the content to your users. The flexibility does not end with player customization, you can build your own player in order to deliver the content in the best form you see fit.
 
@@ -20,52 +20,44 @@ meta:
 
 <Grid cols="2" gap="3">
 <Card pad="3">
-    ![Delivery & analytics quickstart](/_assets/icons/player-customization.svg)
+    ![Delivery quickstart](/_assets/icons/player-customization.svg)
 
-    **Delivery & analytics quickstart**\
-    Learn how to make the most of your content delivery through branding, customization, and gathering analytics.
+    **Delivery quickstart**\
+    Learn how to make the most of your content delivery through branding and customization.
 
-    [Learn more ›](/delivery-analytics/delivery-analytics-quickstart)
-</Card>
-<Card pad="3">
-    ![Analytics & data](/_assets/icons/analytics.svg)
-
-    **Analytics & data**\
-    Start collecting delivery event data about your videos and live streams.
-
-    [Learn more ›](/delivery-analytics/analytics)
+    [Learn more ›](/delivery/quickstart)
 </Card>
 <Card pad="3">
     ![Using custom domains](/_assets/icons/custom-domains.svg)
 
     **Using custom domains**\
     Maintain your company branding by delivering through custom domains
 
-    [Learn more ›](/delivery-analytics/using-custom-domains)
+    [Learn more ›](/delivery/using-custom-domains)
 </Card>
 <Card pad="3">
     ![Domain referrer restrictions](/_assets/icons/domain_referrer.png)
 
     **Domain referrer restrictions**\
     Make sure that your videos and live streams are delivered securely, and only through your domains.
 
-    [Learn more ›](/delivery-analytics/domain-referrer)
+    [Learn more ›](/delivery/domain-referrer)
 </Card>
 <Card pad="3">
     ![In-stream ads](/_assets/icons/ads.png)
 
     **In-stream ads**\
     Implement in-stream ads to monetize your videos and live streams conveniently.
 
-    [Learn more ›](/delivery-analytics/ads)
+    [Learn more ›](/delivery/ads)
 </Card>
 <Card pad="3">
     ![Private videos](/_assets/icons/private_videos.png)
 
     **Private videos**\
     Learn how you can secure and manage access to your videos.
 
-    [Learn more ›](/delivery-analytics/private-video-get-started)
+    [Learn more ›](/delivery/private-video-get-started)
 </Card>
 <Card pad="3">
     ![Player SDKs](/_assets/icons/player-sdks.svg)
@@ -75,12 +67,4 @@ meta:
 
     [Learn more ›](/sdks/player#player-sdks)
 </Card>
-<Card pad="3">
-    ![Analytics SDKs](/_assets/icons/analytics.svg)
-
-    **Analytics SDKs**\
-    Check out api.video's dedicated libraries and SDKs for delivery analytics.
-
-    [Learn more ›](/sdks/player#player-analytics-sdks)
-</Card>
 </Grid>

delivery-analytics/ads.md → delivery/ads.md

@@ -15,7 +15,7 @@ In-stream ads are a very convenient way of monetization of videos and streams. [
 
 Including ads in your videos and stream is easy. There are multiple ways you can do that:
 
-- [api.video Player features](/delivery-analytics/video-playback-features.md)
+- [api.video Player features](/delivery/video-playback-features.md)
 - [api.video Player SDK](/sdks/player/apivideo-player-sdk)
 - [React Player SDK](/sdks/player/apivideo-react-player)
 

delivery-analytics/domain-referrer.md → delivery/domain-referrer.md

@@ -18,7 +18,7 @@ An edge case to consider:
 
 - The feature is only supported for browser users.
 
-If you are looking to secure your videos and live streams in a more advanced way, for example by using a native mobile player or through securing and limiting access granularly, please visit our guide to [Private Videos](/delivery-analytics/video-privacy-access-management.md).
+If you are looking to secure your videos and live streams in a more advanced way, for example by using a native mobile player or through securing and limiting access granularly, please visit our guide to [Private Videos](/delivery/video-privacy-access-management.md).
 
 ## How it works?
 

delivery/navigation.yaml

@@ -0,0 +1,42 @@
+---
+- heading: Get started
+  items:
+  - label: How does video delivery work? 
+    href: /delivery/README.md
+  - label: Delivery quickstart
+    href: /delivery/quickstart.md
+- heading: Features
+  items:
+  - label: Using custom domains for delivery
+    href: /delivery/using-custom-domains.md
+  - label: Domain referrer restrictions
+    href: /delivery/domain-referrer.md
+  - label: In-stream ads
+    href: /delivery/ads.md
+  - label: Private videos
+    href: /delivery/video-privacy-access-management.md
+    collapsed: true
+    items:
+    - label: Get started with private videos
+      href: /delivery/private-video-get-started.md
+    - label: Delivery with api.video players
+      href: /delivery/private-video-delivery-web-browser.md
+    - label: Delivery with hls or external players
+      href: /delivery/private-video-on-hls-or-external-players.md
+    - label: Delivery with mp4 built in players
+      href: /delivery/private-video-delivery-with-mp4-built-in-players.md
+    - label: Custom players session retention
+      href: /delivery/private-videos-with-custom-players-session-retention.md
+    - label: Private video session tokens
+      href: /delivery/private-video-session-tokens.md
+
+- heading: Players
+  items:
+  - label: Player SDKs
+    href: /sdks/player/README.md#player-sdks
+  - label: api.video Player features
+    href: /delivery/video-playback-features.md
+  - label: Player customization
+    href: /delivery/player-customization.md
+  - label: No-code solutions
+    href: /sdks/nocode/README.md

delivery-analytics/private-video-delivery-web-browser.md → delivery/private-video-delivery-web-browser.md

@@ -25,7 +25,7 @@ When delivering the embedded video, we will use our in-house player to playback
 **iframes in incognito mode**
 
 When playing an embedded private video in a browser that runs in incognito mode you'll have to leverage sessions.
-Check out the guide for retaining a private session [here](/delivery-analytics/private-videos-with-custom-players-session-retention).
+Check out the guide for retaining a private session [here](/delivery/private-videos-with-custom-players-session-retention).
 </Callout>
 
 In order to build a dynamically served private videos, you can leverage the [/videos](/reference/api/Videos#retrieve-a-video-object) endpoint in order to get the url of the video and private token. For example the following steps are possible:

delivery-analytics/private-video-delivery-with-mp4-built-in-players.md → delivery/private-video-delivery-with-mp4-built-in-players.md

@@ -7,7 +7,7 @@ meta:
 # Private Video Delivery With Mp4 Built In Players
 
 <Callout pad="2" type="info">
-api.video recommends that you read [Private Videos](/delivery-analytics/video-privacy-access-management) to ensure that you understand the concept of private videos before proceeding.
+api.video recommends that you read [Private Videos](/delivery/video-privacy-access-management) to ensure that you understand the concept of private videos before proceeding.
 </Callout>
 
 There are cases where you would want to use built-in players that are not api.video. We support private video delivery via other players other than our in-house. In this article you can find how to deliver private videos with MP4 built-in player