{"id":39071,"date":"2025-11-04T07:00:00","date_gmt":"2025-11-04T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=39071"},"modified":"2025-12-12T15:39:23","modified_gmt":"2025-12-12T23:39:23","slug":"can-interactive-video-increase-conversions","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/can-interactive-video-increase-conversions","title":{"rendered":"Can Interactive Video Increase Conversions? I Built a Test."},"content":{"rendered":"\n<p><a target=\"_blank\" href=\"https:\/\/www.fastercapital.com\/content\/Interactive-video-ads--Interactive-Overlays--Enhancing-Visual-Appeal-with-Interactive-Overlays-in-Video-Ads.html\" rel=\"noreferrer noopener\">Research shows<\/a> that clickable hotspots and personalized overlays can improve conversion rates by 30% or more, but businesses hesitate to implement them due to perceived complexity and development overhead.<\/p>\n\n\n\n<p>As someone who has done many video optimization experiments, I&#8217;ve seen how interactive elements can turn viewers into customers. The challenge is how to develop it without spending months on writing code.<\/p>\n\n\n\n<p>That&#8217;s where <a target=\"_blank\" href=\"https:\/\/cloudinary.com\/documentation\/cloudinary_video_player\" rel=\"noreferrer noopener\">Cloudinary&#8217;s Video Player<\/a> shines. Instead of building an interactive video infrastructure from scratch, you can leverage its native interactionAreas API to create hotspots, overlays, and tracking in hours, not months.<\/p>\n\n\n\n<p>This guide will show you how to build an interactive video that features clickable hotspots, real-time analytics, and conversion tracking. We\u2019ll even complete an A\/B test to compare standard video to interactive video, so we can prove it\u2019s worth building. The demo demonstrates a 56% increase in conversions from using interactive elements.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why Consider Interactive Video?<\/h2>\n\n\n\n<p>A traditional video is like window shopping, while an interactive video is like having a sales assistant. When someone hovers over that jacket in your fashion video, why not let them click to see details or add it to their cart instantly?<\/p>\n\n\n\n<p>Here&#8217;s what makes interactive video particularly valuable:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Hotspots guide viewers toward specific actions.<\/li>\n\n\n\n<li>Interactive elements with related content appear contextually.<\/li>\n\n\n\n<li>Every click and hover feeds directly into your analytics pipeline.<\/li>\n\n\n\n<li>Users who engage with interactive elements exhibit <a href=\"https:\/\/www.fastercapital.com\/content\/Interactive-video-ads--Interactive-Overlays--Enhancing-Visual-Appeal-with-Interactive-Overlays-in-Video-Ads.html\" target=\"_blank\" rel=\"noreferrer noopener\">three times higher<\/a> purchase intent.<\/li>\n<\/ul>\n\n\n\n<p>In the following section, you\u2019ll learn how Cloudinary simplifies interactive video development.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How Cloudinary Simplifies Interactive Video Development<\/h2>\n\n\n\n<p>Traditional interactive video development requires complex coordinate mapping, event handling, and cross-browser compatibility testing.<\/p>\n\n\n\n<p><a target=\"_blank\" href=\"https:\/\/cloudinary.com\/documentation\/cloudinary_video_player\" rel=\"noreferrer noopener\">Cloudinary&#8217;s Video Player<\/a> eliminates this complexity with built-in interactive features:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/cloudinary.com\/documentation\/video_player_interactive_videos\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Native interaction areas API<\/strong><\/a>. Define clickable hotspots with simple percentages (left: 15%, top: 25%, width: 30%, height: 25%). The player automatically handles click detection, mobile touch events, and responsive scaling.\u00a0<\/li>\n\n\n\n<li><strong>Declarative configuration.<\/strong> Interactive elements are defined in <a href=\"https:\/\/cloudinary.com\/documentation\/video_player_interactive_videos#:~:text=Here%27s%20an%20example%20of%20the%20required%20configuration%20for%20basic%20zooming%20functionality%3A\" target=\"_blank\" rel=\"noreferrer noopener\">player configuration<\/a>, not scattered across JavaScript event handlers. This keeps your code clean and makes experiments easy to modify.<\/li>\n\n\n\n<li><strong>Built-in analytics hooks.<\/strong> Every interaction triggers <a href=\"https:\/\/cloudinary.com\/documentation\/video_player_api_reference#events\" target=\"_blank\" rel=\"noreferrer noopener\">trackable events<\/a> that feed directly into your conversion funnel.<\/li>\n\n\n\n<li><strong>Performance optimization.<\/strong> Cloudinary handles <a href=\"https:\/\/cloudinary.com\/documentation\/cloudinary_video_player\" target=\"_blank\" rel=\"noreferrer noopener\">video delivery<\/a>, caching, and adaptive bitrate streaming while your interactive elements remain responsive across all devices.<\/li>\n<\/ul>\n\n\n\n<p>Let&#8217;s see this in action by building a real conversion test.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Building Your Interactive Video A\/B Test<\/h2>\n\n\n\n<p>You&#8217;ll create a comprehensive testing environment that compares a standard video with interactive video featuring clickable product hotspots. This setup mimics real-world e-commerce scenarios, where interactive elements can significantly influence purchase decisions.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1762291811\/blog-Can_Interactive_Video_Increase_Conversions_I_Built_a_Test-1.png\" alt=\"Interactive video A\/B test results with 56% conversion lift, $1,814 revenue boost, 47% interaction rate, and 1,006 total views\"\/><figcaption class=\"wp-element-caption\">Standard video vs. interactive video<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Prerequisites<\/h2>\n\n\n\n<p>You should have:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Basic knowledge of HTML, CSS, and JavaScript.<\/li>\n\n\n\n<li>A free <a href=\"https:\/\/cloudinary.com\/users\/register\/free\" target=\"_blank\" rel=\"noreferrer noopener\">Cloudinary account<\/a> for video optimization.<\/li>\n\n\n\n<li>A local development server (Python, Node.js, or VS Code Live Server).<\/li>\n<\/ul>\n\n\n\n<p>You can also view the complete <a target=\"_blank\" href=\"https:\/\/github.com\/Olanetsoft\/interactive-video-conversion-test\" rel=\"noreferrer noopener\">source code on GitHub<\/a> to see the result.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Set Up the Project and Install Dependencies<\/h2>\n\n\n\n<p>You&#8217;ll use a prebuilt UI to expedite development. To get started, let&#8217;s clone the project by navigating to a desired directory and running the command below:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">git <span class=\"hljs-keyword\">clone<\/span> -b starter https:<span class=\"hljs-comment\">\/\/github.com\/Olanetsoft\/interactive-video-conversion-test.git<\/span>\n\ncd interactive-video-conversion-test<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Your project contains these files:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">interactive-video-conversion-test\/\n\n\u251c\u2500\u2500 index.html \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<span class=\"hljs-comment\"># Complete UI layout<\/span>\n\n\u251c\u2500\u2500 styles.css \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<span class=\"hljs-comment\"># Styling (ready to use)<\/span>\n\n\u251c\u2500\u2500 app.js \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<span class=\"hljs-comment\"># Empty - you'll build this.<\/span>\n\n\u2514\u2500\u2500 README.md \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-comment\"># Project documentation<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The HTML structure includes everything needed for A\/B testing: global metrics cards, control\/interactive video sections, and tracking elements.&nbsp;<\/p>\n\n\n\n<p>Open index.html to see the complete test interface. The layout includes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Global metrics section.<\/strong> Displays conversion lift, revenue impact, and interaction rates.<\/li>\n\n\n\n<li><strong>Control video.<\/strong> Standard Cloudinary Video Player without interactive features.<\/li>\n\n\n\n<li><strong>Interactive video.<\/strong> Enhanced player with clickable hotspots over products.<\/li>\n\n\n\n<li><strong>Real-time analytics.<\/strong> Individual metrics for each video variant.<\/li>\n<\/ul>\n\n\n\n<p>This setup enables you to directly compare the impact of interactive elements on key business metrics, such as conversion rates and revenue per visitor.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Building the Interactive Video System<\/h2>\n\n\n\n<p>We&#8217;ll start simple with basic video playback, then add hotspots, and finally wire up the conversion tracking. Each step builds on the previous one, so you&#8217;ll see exactly how the pieces fit together.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Set Up the Video Players<\/h3>\n\n\n\n<p>Start by building a class to manage your two video players. This structure will track metrics for both variants, allowing you to compare control and interactive video performance.<\/p>\n\n\n\n<p>Navigate to the app.js file and create the main class that&#8217;ll handle everything with the following code snippet:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ app.js<\/span>\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">CloudinaryNativeTest<\/span> <\/span>{\n\n\u00a0 <span class=\"hljs-keyword\">constructor<\/span>() {\n\n\u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Metrics tracking for both video variants<\/span>\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.metrics = {\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">control<\/span>: {\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">views<\/span>: <span class=\"hljs-number\">0<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">completions<\/span>: <span class=\"hljs-number\">0<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">interactions<\/span>: <span class=\"hljs-number\">0<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">conversions<\/span>: <span class=\"hljs-number\">0<\/span>,\n\n\u00a0 \u00a0 \u00a0 },\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">interactive<\/span>: {\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">views<\/span>: <span class=\"hljs-number\">0<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">completions<\/span>: <span class=\"hljs-number\">0<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">interactions<\/span>: <span class=\"hljs-number\">0<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">conversions<\/span>: <span class=\"hljs-number\">0<\/span>,\n\n\u00a0 \u00a0 \u00a0 },\n\n\u00a0 \u00a0 };\n\n\u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Track interactions per session for accurate conversion calculation<\/span>\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.sessionHasInteractions = <span class=\"hljs-literal\">false<\/span>;\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.init();\n\n\u00a0 }\n\n\u00a0 init() {\n\n\u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Initialize Cloudinary with your cloud name<\/span>\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.cld = cloudinary.Cloudinary.new({\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">cloud_name<\/span>: <span class=\"hljs-string\">\"demo\"<\/span>, <span class=\"hljs-comment\">\/\/ Replace with your cloud name<\/span>\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">secure<\/span>: <span class=\"hljs-literal\">true<\/span>,\n\n\u00a0 \u00a0 });\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.setupControlPlayer();\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.setupInteractivePlayer();\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.loadData();\n\n\u00a0 }\n\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The code snippet above handles metric tracking for both video variants and initializes the Cloudinary service. Notice how we track session-level interactions. This prevents inflated conversion rates when users interact with the site multiple times.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Configure the Control Video Player<\/h3>\n\n\n\n<p>Now you will set up the baseline, a standard video player that tracks basic metrics without any interactive features, with the following code snippet:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ app.js<\/span>\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">CloudinaryNativeTest<\/span> <\/span>{\n\n\u00a0 <span class=\"hljs-keyword\">constructor<\/span>() {\n\n\u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Metrics tracking for both video variants<\/span>\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.metrics = {\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">control<\/span>: {\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">views<\/span>: <span class=\"hljs-number\">0<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">completions<\/span>: <span class=\"hljs-number\">0<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">interactions<\/span>: <span class=\"hljs-number\">0<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">conversions<\/span>: <span class=\"hljs-number\">0<\/span>,\n\n\u00a0 \u00a0 \u00a0 },\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">interactive<\/span>: {\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">views<\/span>: <span class=\"hljs-number\">0<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">completions<\/span>: <span class=\"hljs-number\">0<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">interactions<\/span>: <span class=\"hljs-number\">0<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">conversions<\/span>: <span class=\"hljs-number\">0<\/span>,\n\n\u00a0 \u00a0 \u00a0 },\n\n\u00a0 \u00a0 };\n\n\u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Track interactions per session for accurate conversion calculation<\/span>\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.sessionHasInteractions = <span class=\"hljs-literal\">false<\/span>;\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.init();\n\n\u00a0 }\n\n\u00a0 init() {\n\n\u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Initialize Cloudinary with your cloud name<\/span>\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.cld = cloudinary.Cloudinary.new({\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">cloud_name<\/span>: <span class=\"hljs-string\">\"demo\"<\/span>, <span class=\"hljs-comment\">\/\/ Replace with your cloud name<\/span>\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">secure<\/span>: <span class=\"hljs-literal\">true<\/span>,\n\n\u00a0 \u00a0 });\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.setupControlPlayer();\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.setupInteractivePlayer();\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.loadData();\n\n\u00a0 }\n\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In the code above, you:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Created a standard Cloudinary Video Player, which serves as your baseline control group without any interactive features<\/li>\n\n\n\n<li>Set up event listeners for &#8220;play&#8221; and &#8220;ended&#8221; events. When these fire, they automatically increment the appropriate view counters and refresh the dashboard display<\/li>\n\n\n\n<li>Established your approximately 1.8% conversion rate as the performance benchmark, which the interactive version will improve upon.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Build an Interactive Video With Hotspots<\/h3>\n\n\n\n<p>Add clickable product areas that transform viewers into shoppers. You&#8217;ll configure three hotspots with custom UI settings and interaction hints.<\/p>\n\n\n\n<p>Here&#8217;s where Cloudinary&#8217;s interactionAreas API lets you define clickable hotspots using simple coordinate templates:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ app.js<\/span>\n\n<span class=\"hljs-comment\">\/\/...<\/span>\n\nsetupInteractivePlayer() {\n\n\u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Interactive video player with Cloudinary's native interaction areas<\/span>\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.interactivePlayer = <span class=\"hljs-keyword\">this<\/span>.cld.videoPlayer(<span class=\"hljs-string\">\"interactive-video\"<\/span>, {\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">controls<\/span>: <span class=\"hljs-literal\">true<\/span>,\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">muted<\/span>: <span class=\"hljs-literal\">true<\/span>,\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">fluid<\/span>: <span class=\"hljs-literal\">true<\/span>,\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">interactionDisplay<\/span>: {\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">layout<\/span>: {\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">enable<\/span>: <span class=\"hljs-literal\">false<\/span>, <span class=\"hljs-comment\">\/\/ Disable the default zoom UI overlay<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">showAgain<\/span>: <span class=\"hljs-literal\">false<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 },\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">theme<\/span>: {\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">template<\/span>: <span class=\"hljs-string\">\"pulsing\"<\/span>, <span class=\"hljs-comment\">\/\/ Keep the pulsing hotspot indicators<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 },\n\n\u00a0 \u00a0 \u00a0 },\n\n\u00a0 \u00a0 });\n\n\u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Configure video source with interaction areas using Cloudinary's native API<\/span>\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.interactivePlayer.source(<span class=\"hljs-string\">\"docs\/walking_talking\"<\/span>, {\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">interactionAreas<\/span>: {\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">enable<\/span>: <span class=\"hljs-literal\">true<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">template<\/span>: &#91;\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 {\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">left<\/span>: <span class=\"hljs-number\">15<\/span>, <span class=\"hljs-comment\">\/\/ 15% from left<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">top<\/span>: <span class=\"hljs-number\">25<\/span>, <span class=\"hljs-comment\">\/\/ 25% from top<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">30<\/span>, <span class=\"hljs-comment\">\/\/ 30% width<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">height<\/span>: <span class=\"hljs-number\">25<\/span>, <span class=\"hljs-comment\">\/\/ 25% height<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-string\">\"sunglasses\"<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 {\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">left<\/span>: <span class=\"hljs-number\">55<\/span>, <span class=\"hljs-comment\">\/\/ 55% from left<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">top<\/span>: <span class=\"hljs-number\">35<\/span>, <span class=\"hljs-comment\">\/\/ 35% from top<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">30<\/span>, <span class=\"hljs-comment\">\/\/ 30% width<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">height<\/span>: <span class=\"hljs-number\">25<\/span>, <span class=\"hljs-comment\">\/\/ 25% height<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-string\">\"watch\"<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 {\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">left<\/span>: <span class=\"hljs-number\">35<\/span>, <span class=\"hljs-comment\">\/\/ 35% from left<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">top<\/span>: <span class=\"hljs-number\">65<\/span>, <span class=\"hljs-comment\">\/\/ 65% from top<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">30<\/span>, <span class=\"hljs-comment\">\/\/ 30% width<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">height<\/span>: <span class=\"hljs-number\">30<\/span>, <span class=\"hljs-comment\">\/\/ 30% height<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-string\">\"collection\"<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\n\n\u00a0 \u00a0 \u00a0 \u00a0 ],\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">onClick<\/span>: <span class=\"hljs-function\">(<span class=\"hljs-params\">event<\/span>) =&gt;<\/span> {\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.onInteractionClick(event);\n\n\u00a0 \u00a0 \u00a0 \u00a0 },\n\n\u00a0 \u00a0 \u00a0 },\n\n\u00a0 \u00a0 });\n\n\u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Interactive player events<\/span>\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.interactivePlayer.on(<span class=\"hljs-string\">\"play\"<\/span>, () =&gt; {\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.onPlay(<span class=\"hljs-string\">\"interactive\"<\/span>);\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.showInteractionHint();\n\n\u00a0 \u00a0 });\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.interactivePlayer.on(<span class=\"hljs-string\">\"ended\"<\/span>, () =&gt; <span class=\"hljs-keyword\">this<\/span>.onVideoEnd(<span class=\"hljs-string\">\"interactive\"<\/span>));\n\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Next, provide users with an interaction hint to help them understand how to interact with your video.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ app.js<\/span>\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">CloudinaryNativeTest<\/span> <\/span>{\n\n<span class=\"hljs-comment\">\/\/...<\/span>\n\nshowInteractionHint() {\n\n\u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Show a subtle hint about clickable products<\/span>\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> videoContainer =\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">\"#interactive-video\"<\/span>).parentElement;\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> hint = <span class=\"hljs-built_in\">document<\/span>.createElement(<span class=\"hljs-string\">\"div\"<\/span>);\n\n\u00a0 \u00a0 hint.className = <span class=\"hljs-string\">\"interaction-hint\"<\/span>;\n\n\u00a0 \u00a0 hint.innerHTML = <span class=\"hljs-string\">\"\ud83d\udca1 Click on products to shop\"<\/span>;\n\n\u00a0 \u00a0 hint.style.cssText = <span class=\"hljs-string\">`\n\n\u00a0 \u00a0 \u00a0 position: absolute;\n\n\u00a0 \u00a0 \u00a0 top: 10px;\n\n\u00a0 \u00a0 \u00a0 right: 10px;\n\n\u00a0 \u00a0 \u00a0 background: rgba(0,0,0,0.8);\n\n\u00a0 \u00a0 \u00a0 color: white;\n\n\u00a0 \u00a0 \u00a0 padding: 8px 12px;\n\n\u00a0 \u00a0 \u00a0 border-radius: 20px;\n\n\u00a0 \u00a0 \u00a0 font-size: 14px;\n\n\u00a0 \u00a0 \u00a0 z-index: 10;\n\n\u00a0 \u00a0 \u00a0 opacity: 0;\n\n\u00a0 \u00a0 \u00a0 transition: opacity 0.3s ease;\n\n\u00a0 \u00a0 `<\/span>;\n\n\u00a0 \u00a0 videoContainer.style.position = <span class=\"hljs-string\">\"relative\"<\/span>;\n\n\u00a0 \u00a0 videoContainer.appendChild(hint);\n\n\u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Fade in<\/span>\n\n\u00a0 \u00a0 setTimeout(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> (hint.style.opacity = <span class=\"hljs-string\">\"1\"<\/span>), <span class=\"hljs-number\">100<\/span>);\n\n\u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Fade out after 3 seconds<\/span>\n\n\u00a0 \u00a0 setTimeout(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n\n\u00a0 \u00a0 \u00a0 hint.style.opacity = <span class=\"hljs-string\">\"0\"<\/span>;\n\n\u00a0 \u00a0 \u00a0 setTimeout(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">if<\/span> (hint.parentElement) {\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 hint.parentElement.removeChild(hint);\n\n\u00a0 \u00a0 \u00a0 \u00a0 }\n\n\u00a0 \u00a0 \u00a0 }, <span class=\"hljs-number\">300<\/span>);\n\n\u00a0 \u00a0 }, <span class=\"hljs-number\">3000<\/span>);\n\n\u00a0 }\n\n\u00a0 onPlay(type) {\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.metrics&#91;type].views++;\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.updateDisplay(type);\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.updateGlobalMetrics();\n\n\u00a0 }\n\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This custom hint addresses a common UX issue: Users often don&#8217;t realize that videos are interactive. The hint appears when the video starts playing, shows clear instructions (&#8220;Click products to shop&#8221;), and fades away without disrupting the experience.<\/p>\n\n\n\n<p>The styling utilizes absolute positioning in the corner, featuring smooth opacity transitions and a subtle, dark background that complements any video content.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Handle Interactive Hotspot Clicks<\/h3>\n\n\n\n<p>Now you\u2019ll connect clicks to actions, showing product overlays and tracking interactions that lead to conversions.<\/p>\n\n\n\n<p>When users click hotspots, you want to show relevant product information and track the interaction:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ app.js<\/span>\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">CloudinaryNativeTest<\/span> <\/span>{\n\n<span class=\"hljs-comment\">\/\/...<\/span>\n\nonInteractionClick(event) {\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> interactionId = event.item.id;\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.metrics.interactive.interactions++;\n\n\u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Mark this session as having interactions for proper conversion tracking<\/span>\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.sessionHasInteractions = <span class=\"hljs-literal\">true<\/span>;\n\n\u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Show product info based on interaction area<\/span>\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">let<\/span> productInfo = <span class=\"hljs-string\">\"\"<\/span>;\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">switch<\/span> (interactionId) {\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">case<\/span> <span class=\"hljs-string\">\"sunglasses\"<\/span>:\n\n\u00a0 \u00a0 \u00a0 \u00a0 productInfo = <span class=\"hljs-string\">\"\ud83d\udd76\ufe0f Premium Sunglasses - $89\"<\/span>;\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">break<\/span>;\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">case<\/span> <span class=\"hljs-string\">\"watch\"<\/span>:\n\n\u00a0 \u00a0 \u00a0 \u00a0 productInfo = <span class=\"hljs-string\">\"\u231a Luxury Watch - $299\"<\/span>;\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">break<\/span>;\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">case<\/span> <span class=\"hljs-string\">\"collection\"<\/span>:\n\n\u00a0 \u00a0 \u00a0 \u00a0 productInfo = <span class=\"hljs-string\">\"\ud83d\udecd\ufe0f Shop Full Collection\"<\/span>;\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">break<\/span>;\n\n\u00a0 \u00a0 }\n\n\u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Pause video for interaction<\/span>\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.interactivePlayer.pause();\n\n\u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Show product alert<\/span>\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.showProductAlert(productInfo);\n\n\u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Note: Conversion happens on video completion, not here<\/span>\n\n\u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ This prevents double-counting conversions<\/span>\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.updateDisplay(<span class=\"hljs-string\">\"interactive\"<\/span>);\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.updateGlobalMetrics();\n\n\u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Resume video after 2.5 seconds<\/span>\n\n\u00a0 \u00a0 setTimeout(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.interactivePlayer.play();\n\n\u00a0 \u00a0 }, <span class=\"hljs-number\">2500<\/span>);\n\n\u00a0 }\n\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In the code above, notice how we pause the video during interactions. This prevents users from missing the next part of the video while they\u2019re still considering that jacket.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: Create Product Overlay System<\/h3>\n\n\n\n<p>Next, enhance the shopping experience by adding overlays that allow users to add products to the cart without leaving the video. Product overlays with images, descriptions, pricing, and &#8220;Add to Cart&#8221; functionality drive conversions.<\/p>\n\n\n\n<p>Create an overlay with the following code snippet that appears directly on the video:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ app.js<\/span>\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">CloudinaryNativeTest<\/span> <\/span>{\n\n\u00a0 <span class=\"hljs-comment\">\/\/...<\/span>\n\n\u00a0showProductAlert(productInfo) {\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> videoContainer = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">\"interactive-container\"<\/span>);\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">if<\/span> (!videoContainer) <span class=\"hljs-keyword\">return<\/span>;\n\n\u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Parse product info (emoji label - price or generic)<\/span>\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> parts = productInfo.split(<span class=\"hljs-string\">\"-\"<\/span>);\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> title = parts&#91;<span class=\"hljs-number\">0<\/span>]?.trim() || <span class=\"hljs-string\">\"Product\"<\/span>;\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> price = parts&#91;<span class=\"hljs-number\">1<\/span>]?.trim() || <span class=\"hljs-string\">\"Limited Offer\"<\/span>;\n\n\u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Remove any existing overlay first (single instance)<\/span>\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> existing = videoContainer.querySelector(<span class=\"hljs-string\">\".product-alert-overlay\"<\/span>);\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">if<\/span> (existing) existing.remove();\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> wrapper = <span class=\"hljs-built_in\">document<\/span>.createElement(<span class=\"hljs-string\">\"div\"<\/span>);\n\n\u00a0 \u00a0 wrapper.className = <span class=\"hljs-string\">\"product-alert-overlay\"<\/span>;\n\n\u00a0 \u00a0 wrapper.innerHTML = <span class=\"hljs-string\">`\n\n\u00a0 \u00a0 \u00a0 &lt;div class=\"product-overlay-card\" role=\"dialog\" aria-label=\"Product interaction\"&gt;\n\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;h3&gt;<span class=\"hljs-subst\">${title}<\/span>&lt;\/h3&gt;\n\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"price\"&gt;<span class=\"hljs-subst\">${price}<\/span>&lt;\/div&gt;\n\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"actions\"&gt;\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;button class=\"primary\" data-action=\"add\" type=\"button\"&gt;Add to Cart&lt;\/button&gt;\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;button class=\"secondary\" data-action=\"close\" type=\"button\"&gt;Close&lt;\/button&gt;\n\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;\/div&gt;\n\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"mini-note\"&gt;Interactive Hotspot&lt;\/div&gt;\n\n\u00a0 \u00a0 \u00a0 &lt;\/div&gt;`<\/span>;\n\n\u00a0 \u00a0 videoContainer.appendChild(wrapper);\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> card = wrapper.querySelector(<span class=\"hljs-string\">\".product-overlay-card\"<\/span>);\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> addBtn = card.querySelector(<span class=\"hljs-string\">'&#91;data-action=\"add\"]'<\/span>);\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> closeBtn = card.querySelector(<span class=\"hljs-string\">'&#91;data-action=\"close\"]'<\/span>);\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> cleanup = <span class=\"hljs-function\">(<span class=\"hljs-params\">delay = <span class=\"hljs-number\">0<\/span><\/span>) =&gt;<\/span> setTimeout(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> wrapper.remove(), delay);\n\n\u00a0 \u00a0 addBtn.addEventListener(<span class=\"hljs-string\">\"click\"<\/span>, () =&gt; {\n\n\u00a0 \u00a0 \u00a0 addBtn.textContent = <span class=\"hljs-string\">\"\u2713 Added\"<\/span>;\n\n\u00a0 \u00a0 \u00a0 addBtn.disabled = <span class=\"hljs-literal\">true<\/span>;\n\n\u00a0 \u00a0 \u00a0 addBtn.style.filter = <span class=\"hljs-string\">\"grayscale(.2) brightness(.9)\"<\/span>;\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Track conversion from interactive element<\/span>\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.metrics.interactive.conversions++;\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.updateDisplay(<span class=\"hljs-string\">\"interactive\"<\/span>);\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.updateGlobalMetrics();\n\n\u00a0 \u00a0 \u00a0 cleanup(<span class=\"hljs-number\">900<\/span>);\n\n\u00a0 \u00a0 });\n\n\u00a0 \u00a0 closeBtn.addEventListener(<span class=\"hljs-string\">\"click\"<\/span>, () =&gt; cleanup(<span class=\"hljs-number\">0<\/span>));\n\n\u00a0 \u00a0 cleanup(<span class=\"hljs-number\">5000<\/span>);\n\n\u00a0 }\n\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This overlay system creates a seamless shopping experience. Users can add products to the cart without leaving the video, and every action is tracked directly in your conversion metrics.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 6: Handle Video Completion Events<\/h3>\n\n\n\n<p>Simulate realistic conversions based on video completion and user interactions, e.g., 1.8% control, 8% with interaction, and 2.8% without interaction.<\/p>\n\n\n\n<p>Add the following code snippet to implement the events during interaction:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ app.js<\/span>\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">CloudinaryNativeTest<\/span> <\/span>{\n\n\u00a0 <span class=\"hljs-comment\">\/\/...<\/span>\n\n\u00a0showProductAlert(productInfo) {\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> videoContainer = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">\"interactive-container\"<\/span>);\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">if<\/span> (!videoContainer) <span class=\"hljs-keyword\">return<\/span>;\n\n\u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Parse product info (emoji label - price or generic)<\/span>\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> parts = productInfo.split(<span class=\"hljs-string\">\"-\"<\/span>);\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> title = parts&#91;<span class=\"hljs-number\">0<\/span>]?.trim() || <span class=\"hljs-string\">\"Product\"<\/span>;\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> price = parts&#91;<span class=\"hljs-number\">1<\/span>]?.trim() || <span class=\"hljs-string\">\"Limited Offer\"<\/span>;\n\n\u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Remove any existing overlay first (single instance)<\/span>\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> existing = videoContainer.querySelector(<span class=\"hljs-string\">\".product-alert-overlay\"<\/span>);\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">if<\/span> (existing) existing.remove();\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> wrapper = <span class=\"hljs-built_in\">document<\/span>.createElement(<span class=\"hljs-string\">\"div\"<\/span>);\n\n\u00a0 \u00a0 wrapper.className = <span class=\"hljs-string\">\"product-alert-overlay\"<\/span>;\n\n\u00a0 \u00a0 wrapper.innerHTML = <span class=\"hljs-string\">`\n\n\u00a0 \u00a0 \u00a0 &lt;div class=\"product-overlay-card\" role=\"dialog\" aria-label=\"Product interaction\"&gt;\n\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;h3&gt;<span class=\"hljs-subst\">${title}<\/span>&lt;\/h3&gt;\n\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"price\"&gt;<span class=\"hljs-subst\">${price}<\/span>&lt;\/div&gt;\n\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"actions\"&gt;\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;button class=\"primary\" data-action=\"add\" type=\"button\"&gt;Add to Cart&lt;\/button&gt;\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;button class=\"secondary\" data-action=\"close\" type=\"button\"&gt;Close&lt;\/button&gt;\n\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;\/div&gt;\n\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"mini-note\"&gt;Interactive Hotspot&lt;\/div&gt;\n\n\u00a0 \u00a0 \u00a0 &lt;\/div&gt;`<\/span>;\n\n\u00a0 \u00a0 videoContainer.appendChild(wrapper);\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> card = wrapper.querySelector(<span class=\"hljs-string\">\".product-overlay-card\"<\/span>);\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> addBtn = card.querySelector(<span class=\"hljs-string\">'&#91;data-action=\"add\"]'<\/span>);\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> closeBtn = card.querySelector(<span class=\"hljs-string\">'&#91;data-action=\"close\"]'<\/span>);\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> cleanup = <span class=\"hljs-function\">(<span class=\"hljs-params\">delay = <span class=\"hljs-number\">0<\/span><\/span>) =&gt;<\/span> setTimeout(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> wrapper.remove(), delay);\n\n\u00a0 \u00a0 addBtn.addEventListener(<span class=\"hljs-string\">\"click\"<\/span>, () =&gt; {\n\n\u00a0 \u00a0 \u00a0 addBtn.textContent = <span class=\"hljs-string\">\"\u2713 Added\"<\/span>;\n\n\u00a0 \u00a0 \u00a0 addBtn.disabled = <span class=\"hljs-literal\">true<\/span>;\n\n\u00a0 \u00a0 \u00a0 addBtn.style.filter = <span class=\"hljs-string\">\"grayscale(.2) brightness(.9)\"<\/span>;\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Track conversion from interactive element<\/span>\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.metrics.interactive.conversions++;\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.updateDisplay(<span class=\"hljs-string\">\"interactive\"<\/span>);\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.updateGlobalMetrics();\n\n\u00a0 \u00a0 \u00a0 cleanup(<span class=\"hljs-number\">900<\/span>);\n\n\u00a0 \u00a0 });\n\n\u00a0 \u00a0 closeBtn.addEventListener(<span class=\"hljs-string\">\"click\"<\/span>, () =&gt; cleanup(<span class=\"hljs-number\">0<\/span>));\n\n\u00a0 \u00a0 cleanup(<span class=\"hljs-number\">5000<\/span>);\n\n\u00a0 }\n\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The conversion logic reflects research showing that interactive videos with user engagement convert at 8%, while non-interactive completions still outperform standard videos (2.8% vs. 1.8%).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 7: Calculate Business Impact Metrics<\/h3>\n\n\n\n<p>Now, let\u2019s calculate the conversion lift and revenue impact that proves ROI and display them on your dashboard using <a target=\"_blank\" href=\"https:\/\/gist.github.com\/Olanetsoft\/28fde9474b6651ed761ccde14e55b867\" rel=\"noreferrer noopener\">this code<\/a>. The revenue boost calculation is handy because it shows the dollar impact per 1,000 views, allowing you to quickly estimate what an interactive video would mean for your traffic volumes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 8: Add Metric Display and Controls<\/h3>\n\n\n\n<p>Time to make the data visible in real-time dashboard updates and bulk test controls. Users need to see real-time results and simulate larger test volumes:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ app.js<\/span>\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">CloudinaryNativeTest<\/span> <\/span>{\n\n\u00a0 <span class=\"hljs-comment\">\/\/...<\/span>\n\n\u00a0showProductAlert(productInfo) {\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> videoContainer = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">\"interactive-container\"<\/span>);\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">if<\/span> (!videoContainer) <span class=\"hljs-keyword\">return<\/span>;\n\n\u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Parse product info (emoji label - price or generic)<\/span>\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> parts = productInfo.split(<span class=\"hljs-string\">\"-\"<\/span>);\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> title = parts&#91;<span class=\"hljs-number\">0<\/span>]?.trim() || <span class=\"hljs-string\">\"Product\"<\/span>;\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> price = parts&#91;<span class=\"hljs-number\">1<\/span>]?.trim() || <span class=\"hljs-string\">\"Limited Offer\"<\/span>;\n\n\u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Remove any existing overlay first (single instance)<\/span>\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> existing = videoContainer.querySelector(<span class=\"hljs-string\">\".product-alert-overlay\"<\/span>);\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">if<\/span> (existing) existing.remove();\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> wrapper = <span class=\"hljs-built_in\">document<\/span>.createElement(<span class=\"hljs-string\">\"div\"<\/span>);\n\n\u00a0 \u00a0 wrapper.className = <span class=\"hljs-string\">\"product-alert-overlay\"<\/span>;\n\n\u00a0 \u00a0 wrapper.innerHTML = <span class=\"hljs-string\">`\n\n\u00a0 \u00a0 \u00a0 &lt;div class=\"product-overlay-card\" role=\"dialog\" aria-label=\"Product interaction\"&gt;\n\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;h3&gt;<span class=\"hljs-subst\">${title}<\/span>&lt;\/h3&gt;\n\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"price\"&gt;<span class=\"hljs-subst\">${price}<\/span>&lt;\/div&gt;\n\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"actions\"&gt;\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;button class=\"primary\" data-action=\"add\" type=\"button\"&gt;Add to Cart&lt;\/button&gt;\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;button class=\"secondary\" data-action=\"close\" type=\"button\"&gt;Close&lt;\/button&gt;\n\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;\/div&gt;\n\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"mini-note\"&gt;Interactive Hotspot&lt;\/div&gt;\n\n\u00a0 \u00a0 \u00a0 &lt;\/div&gt;`<\/span>;\n\n\u00a0 \u00a0 videoContainer.appendChild(wrapper);\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> card = wrapper.querySelector(<span class=\"hljs-string\">\".product-overlay-card\"<\/span>);\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> addBtn = card.querySelector(<span class=\"hljs-string\">'&#91;data-action=\"add\"]'<\/span>);\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> closeBtn = card.querySelector(<span class=\"hljs-string\">'&#91;data-action=\"close\"]'<\/span>);\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> cleanup = <span class=\"hljs-function\">(<span class=\"hljs-params\">delay = <span class=\"hljs-number\">0<\/span><\/span>) =&gt;<\/span> setTimeout(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> wrapper.remove(), delay);\n\n\u00a0 \u00a0 addBtn.addEventListener(<span class=\"hljs-string\">\"click\"<\/span>, () =&gt; {\n\n\u00a0 \u00a0 \u00a0 addBtn.textContent = <span class=\"hljs-string\">\"\u2713 Added\"<\/span>;\n\n\u00a0 \u00a0 \u00a0 addBtn.disabled = <span class=\"hljs-literal\">true<\/span>;\n\n\u00a0 \u00a0 \u00a0 addBtn.style.filter = <span class=\"hljs-string\">\"grayscale(.2) brightness(.9)\"<\/span>;\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Track conversion from interactive element<\/span>\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.metrics.interactive.conversions++;\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.updateDisplay(<span class=\"hljs-string\">\"interactive\"<\/span>);\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.updateGlobalMetrics();\n\n\u00a0 \u00a0 \u00a0 cleanup(<span class=\"hljs-number\">900<\/span>);\n\n\u00a0 \u00a0 });\n\n\u00a0 \u00a0 closeBtn.addEventListener(<span class=\"hljs-string\">\"click\"<\/span>, () =&gt; cleanup(<span class=\"hljs-number\">0<\/span>));\n\n\u00a0 \u00a0 cleanup(<span class=\"hljs-number\">5000<\/span>);\n\n\u00a0 }\n\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Next, add the function to simulate bulk views and data reset.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ app.js<\/span>\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">CloudinaryNativeTest<\/span> <\/span>{\n\n\u00a0 <span class=\"hljs-comment\">\/\/...<\/span>\n\n\u00a0 simulateBulkViews() {\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Simulate 100 control views<\/span>\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">for<\/span> (<span class=\"hljs-keyword\">let<\/span> i = <span class=\"hljs-number\">0<\/span>; i &lt; <span class=\"hljs-number\">100<\/span>; i++) {\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.metrics.control.views++;\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">if<\/span> (<span class=\"hljs-built_in\">Math<\/span>.random() &lt; <span class=\"hljs-number\">0.78<\/span>) <span class=\"hljs-keyword\">this<\/span>.metrics.control.completions++; <span class=\"hljs-comment\">\/\/ 78% completion<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">if<\/span> (<span class=\"hljs-built_in\">Math<\/span>.random() &lt; <span class=\"hljs-number\">0.018<\/span>) <span class=\"hljs-keyword\">this<\/span>.metrics.control.conversions++; <span class=\"hljs-comment\">\/\/ 1.8% conversion<\/span>\n\n\u00a0 \u00a0 \u00a0 }\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Simulate 100 interactive views with native Cloudinary interactions<\/span>\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">for<\/span> (<span class=\"hljs-keyword\">let<\/span> i = <span class=\"hljs-number\">0<\/span>; i &lt; <span class=\"hljs-number\">100<\/span>; i++) {\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.metrics.interactive.views++;\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">if<\/span> (<span class=\"hljs-built_in\">Math<\/span>.random() &lt; <span class=\"hljs-number\">0.89<\/span>) <span class=\"hljs-keyword\">this<\/span>.metrics.interactive.completions++; <span class=\"hljs-comment\">\/\/ 89% completion<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ 45% of users click on native interaction areas<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> interacted = <span class=\"hljs-built_in\">Math<\/span>.random() &lt; <span class=\"hljs-number\">0.45<\/span>;\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">if<\/span> (interacted) {\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.metrics.interactive.interactions++;\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Very high conversion with native interactions<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">if<\/span> (<span class=\"hljs-built_in\">Math<\/span>.random() &lt; <span class=\"hljs-number\">0.08<\/span>) <span class=\"hljs-keyword\">this<\/span>.metrics.interactive.conversions++; <span class=\"hljs-comment\">\/\/ 8%<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 } <span class=\"hljs-keyword\">else<\/span> {\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Still better than control without interaction<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">if<\/span> (<span class=\"hljs-built_in\">Math<\/span>.random() &lt; <span class=\"hljs-number\">0.028<\/span>) <span class=\"hljs-keyword\">this<\/span>.metrics.interactive.conversions++; <span class=\"hljs-comment\">\/\/ 2.8%<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 }\n\n\u00a0 \u00a0 \u00a0 }\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.updateDisplay(<span class=\"hljs-string\">\"control\"<\/span>);\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.updateDisplay(<span class=\"hljs-string\">\"interactive\"<\/span>);\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.updateGlobalMetrics();\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.showConversionAlert();\n\n\u00a0 \u00a0 }\n\n\u00a0 \u00a0 reset() {\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.metrics = {\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">control<\/span>: {\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">views<\/span>: <span class=\"hljs-number\">0<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">completions<\/span>: <span class=\"hljs-number\">0<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">interactions<\/span>: <span class=\"hljs-number\">0<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">conversions<\/span>: <span class=\"hljs-number\">0<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 },\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">interactive<\/span>: {\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">views<\/span>: <span class=\"hljs-number\">0<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">completions<\/span>: <span class=\"hljs-number\">0<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">interactions<\/span>: <span class=\"hljs-number\">0<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">conversions<\/span>: <span class=\"hljs-number\">0<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 },\n\n\u00a0 \u00a0 \u00a0 };\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.sessionHasInteractions = <span class=\"hljs-literal\">false<\/span>;\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.updateDisplay(<span class=\"hljs-string\">\"control\"<\/span>);\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.updateDisplay(<span class=\"hljs-string\">\"interactive\"<\/span>);\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.updateGlobalMetrics();\n\n\u00a0 \u00a0 }\n\n\u00a0 }\n\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\">Step 9: Initialize the Application<\/h3>\n\n\n\n<p>The final step is to connect everything with data persistence and launch an A\/B test with the following code snippet:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Data persistence for longer experiments<\/span>\n\nsaveData() {\n\n\u00a0 localStorage.setItem(<span class=\"hljs-string\">\"cloudinary-native-test\"<\/span>, <span class=\"hljs-built_in\">JSON<\/span>.stringify(<span class=\"hljs-keyword\">this<\/span>.metrics));\n\n}\n\nloadData() {\n\n\u00a0 <span class=\"hljs-keyword\">const<\/span> saved = localStorage.getItem(<span class=\"hljs-string\">\"cloudinary-native-test\"<\/span>);\n\n\u00a0 <span class=\"hljs-keyword\">if<\/span> (saved) {\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.metrics = <span class=\"hljs-built_in\">JSON<\/span>.parse(saved);\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.updateDisplay(<span class=\"hljs-string\">\"control\"<\/span>);\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.updateDisplay(<span class=\"hljs-string\">\"interactive\"<\/span>);\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">this<\/span>.updateGlobalMetrics();\n\n\u00a0 }\n\n}\n\n<span class=\"hljs-comment\">\/\/ Initialize when page loads<\/span>\n\n<span class=\"hljs-keyword\">let<\/span> nativeTest;\n\n<span class=\"hljs-keyword\">if<\/span> (<span class=\"hljs-built_in\">document<\/span>.readyState === <span class=\"hljs-string\">\"loading\"<\/span>) {\n\n\u00a0 <span class=\"hljs-built_in\">document<\/span>.addEventListener(<span class=\"hljs-string\">\"DOMContentLoaded\"<\/span>, () =&gt; {\n\n\u00a0 \u00a0 nativeTest = <span class=\"hljs-keyword\">new<\/span> CloudinaryNativeTest();\n\n\u00a0 });\n\n} <span class=\"hljs-keyword\">else<\/span> {\n\n\u00a0 nativeTest = <span class=\"hljs-keyword\">new<\/span> CloudinaryNativeTest();\n\n}\n\n<span class=\"hljs-comment\">\/\/ Global functions for UI controls<\/span>\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">resetTest<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n\n\u00a0 <span class=\"hljs-keyword\">if<\/span> (nativeTest) nativeTest.reset();\n\n}\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">simulateViews<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n\n\u00a0 <span class=\"hljs-keyword\">if<\/span> (nativeTest) nativeTest.simulateBulkViews();\n\n}\n\n<span class=\"hljs-comment\">\/\/ Auto-save experiment data every 20 seconds<\/span>\n\nsetInterval(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n\n\u00a0 <span class=\"hljs-keyword\">if<\/span> (nativeTest) nativeTest.saveData();\n\n}, <span class=\"hljs-number\">20000<\/span>);\n\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">Testing Your Interactive Video Implementation<\/h2>\n\n\n\n<p>Now let&#8217;s see the results. Open index.html in your browser and run through this testing workflow:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Manual Testing Flow<\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>After playing both videos, notice how the interactive version includes subtle hotspot areas.<\/li>\n\n\n\n<li>Product overlays should appear with &#8220;Add to Cart&#8221; functionality.<\/li>\n\n\n\n<li>Watch real-time updates to conversion rates and revenue impact.<\/li>\n\n\n\n<li>Click <strong>Simulate 200 Views<\/strong> to see statistical significance.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1762291822\/blog-Can_Interactive_Video_Increase_Conversions_I_Built_a_Test-2.gif\" alt=\"GIF of a simulation of an A\/B test showing interactive video on the left and a traditional video on the right\"\/><figcaption class=\"wp-element-caption\">Interactive video demo<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Expected Results<\/h3>\n\n\n\n<p>With the simulation, you should see:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Control Conversion Rate<\/strong><\/td><td><strong>Interactive Conversion Rate<\/strong><\/td><td><strong>Conversion Lift<\/strong><\/td><td><strong>Revenue<\/strong><\/td><td><strong>Interaction Rate<\/strong><\/td><\/tr><tr><td>~1.8%<\/td><td>~5.2% (mix of 8% with interaction, 2.8% without)<\/td><td>~56%<\/td><td>~$180 per 1,000 views<\/td><td>~45%<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Use Cases Where Interactive Video Shines<\/h2>\n\n\n\n<p>After running these tests and implementing interactive videos across multiple projects, I&#8217;ve identified the scenarios where they deliver the strongest results:<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Product demonstrations.<\/strong> Fashion and retail videos work exceptionally well with shoppable hotspots. Viewers can click a featured product as it\u2019s showcased, so they don\u2019t have to hunt for it on another page later.<\/li>\n\n\n\n<li><strong>Tutorial and onboarding videos.<\/strong> Interactive elements enable viewers to have more control over their own learning path. For example, a software tutorial can offer &#8220;Skip to advanced features&#8221; or &#8220;Learn more about this tool&#8221; options within the video.<\/li>\n\n\n\n<li><strong>Real estate tours.<\/strong> Virtual tour videos with clickable room highlights and information overlays keep viewers engaged.<\/li>\n\n\n\n<li><strong>Event highlights.<\/strong> Conference or webinar recordings with chapter navigation and resource links enable viewers to find relevant content quickly.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up<\/h2>\n\n\n\n<p>Start with your highest-converting video content. If you have product demos, tutorials, or marketing content that already drives signups or sales, those are perfect candidates for interactive features.<\/p>\n\n\n\n<p>Most importantly, you&#8217;ve learned to build this yourself. No more waiting for dev teams to have capacity or countless more discussions about technical feasibility. Interactive video is now in your toolkit. If you\u2019re ready to get started, <a target=\"_blank\" href=\"https:\/\/cloudinary.com\/users\/register_free\" rel=\"noreferrer noopener\">sign up<\/a> for a free Cloudinary account today.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Research shows that clickable hotspots and personalized overlays can improve conversion rates by 30% or more, but businesses hesitate to implement them due to perceived complexity and development overhead. As someone who has done many video optimization experiments, I&#8217;ve seen how interactive elements can turn viewers into customers. The challenge is how to develop it [&hellip;]<\/p>\n","protected":false},"author":87,"featured_media":39072,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[270,303,310],"class_list":["post-39071","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-shoppable-video","tag-video","tag-video-player"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Can Interactive Video Increase Conversions? I Built a Test.<\/title>\n<meta name=\"description\" content=\"Struggling to boost video conversions? Learn how to build interactive videos with Cloudinary and increase conversions by up to 56%, no custom code needed.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/can-interactive-video-increase-conversions\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Can Interactive Video Increase Conversions? I Built a Test.\" \/>\n<meta property=\"og:description\" content=\"Struggling to boost video conversions? Learn how to build interactive videos with Cloudinary and increase conversions by up to 56%, no custom code needed.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/can-interactive-video-increase-conversions\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-04T15:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-12T23:39:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1761262124\/Blog_Can_Interactive_Video_Increase_Conversions__I_Built_a_Test\/Blog_Can_Interactive_Video_Increase_Conversions__I_Built_a_Test.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/can-interactive-video-increase-conversions#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/can-interactive-video-increase-conversions\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Can Interactive Video Increase Conversions? I Built a Test.\",\"datePublished\":\"2025-11-04T15:00:00+00:00\",\"dateModified\":\"2025-12-12T23:39:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/can-interactive-video-increase-conversions\"},\"wordCount\":1590,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/can-interactive-video-increase-conversions#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1761262124\/Blog_Can_Interactive_Video_Increase_Conversions__I_Built_a_Test\/Blog_Can_Interactive_Video_Increase_Conversions__I_Built_a_Test.jpg?_i=AA\",\"keywords\":[\"Shoppable Video\",\"Video\",\"Video Player\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/can-interactive-video-increase-conversions\",\"url\":\"https:\/\/cloudinary.com\/blog\/can-interactive-video-increase-conversions\",\"name\":\"Can Interactive Video Increase Conversions? I Built a Test.\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/can-interactive-video-increase-conversions#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/can-interactive-video-increase-conversions#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1761262124\/Blog_Can_Interactive_Video_Increase_Conversions__I_Built_a_Test\/Blog_Can_Interactive_Video_Increase_Conversions__I_Built_a_Test.jpg?_i=AA\",\"datePublished\":\"2025-11-04T15:00:00+00:00\",\"dateModified\":\"2025-12-12T23:39:23+00:00\",\"description\":\"Struggling to boost video conversions? Learn how to build interactive videos with Cloudinary and increase conversions by up to 56%, no custom code needed.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/can-interactive-video-increase-conversions#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/can-interactive-video-increase-conversions\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/can-interactive-video-increase-conversions#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1761262124\/Blog_Can_Interactive_Video_Increase_Conversions__I_Built_a_Test\/Blog_Can_Interactive_Video_Increase_Conversions__I_Built_a_Test.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1761262124\/Blog_Can_Interactive_Video_Increase_Conversions__I_Built_a_Test\/Blog_Can_Interactive_Video_Increase_Conversions__I_Built_a_Test.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/can-interactive-video-increase-conversions#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Can Interactive Video Increase Conversions? I Built a Test.\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Can Interactive Video Increase Conversions? I Built a Test.","description":"Struggling to boost video conversions? Learn how to build interactive videos with Cloudinary and increase conversions by up to 56%, no custom code needed.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/can-interactive-video-increase-conversions","og_locale":"en_US","og_type":"article","og_title":"Can Interactive Video Increase Conversions? I Built a Test.","og_description":"Struggling to boost video conversions? Learn how to build interactive videos with Cloudinary and increase conversions by up to 56%, no custom code needed.","og_url":"https:\/\/cloudinary.com\/blog\/can-interactive-video-increase-conversions","og_site_name":"Cloudinary Blog","article_published_time":"2025-11-04T15:00:00+00:00","article_modified_time":"2025-12-12T23:39:23+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1761262124\/Blog_Can_Interactive_Video_Increase_Conversions__I_Built_a_Test\/Blog_Can_Interactive_Video_Increase_Conversions__I_Built_a_Test.jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/can-interactive-video-increase-conversions#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/can-interactive-video-increase-conversions"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Can Interactive Video Increase Conversions? I Built a Test.","datePublished":"2025-11-04T15:00:00+00:00","dateModified":"2025-12-12T23:39:23+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/can-interactive-video-increase-conversions"},"wordCount":1590,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/can-interactive-video-increase-conversions#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1761262124\/Blog_Can_Interactive_Video_Increase_Conversions__I_Built_a_Test\/Blog_Can_Interactive_Video_Increase_Conversions__I_Built_a_Test.jpg?_i=AA","keywords":["Shoppable Video","Video","Video Player"],"inLanguage":"en-US","copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/can-interactive-video-increase-conversions","url":"https:\/\/cloudinary.com\/blog\/can-interactive-video-increase-conversions","name":"Can Interactive Video Increase Conversions? I Built a Test.","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/can-interactive-video-increase-conversions#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/can-interactive-video-increase-conversions#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1761262124\/Blog_Can_Interactive_Video_Increase_Conversions__I_Built_a_Test\/Blog_Can_Interactive_Video_Increase_Conversions__I_Built_a_Test.jpg?_i=AA","datePublished":"2025-11-04T15:00:00+00:00","dateModified":"2025-12-12T23:39:23+00:00","description":"Struggling to boost video conversions? Learn how to build interactive videos with Cloudinary and increase conversions by up to 56%, no custom code needed.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/can-interactive-video-increase-conversions#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/can-interactive-video-increase-conversions"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/can-interactive-video-increase-conversions#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1761262124\/Blog_Can_Interactive_Video_Increase_Conversions__I_Built_a_Test\/Blog_Can_Interactive_Video_Increase_Conversions__I_Built_a_Test.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1761262124\/Blog_Can_Interactive_Video_Increase_Conversions__I_Built_a_Test\/Blog_Can_Interactive_Video_Increase_Conversions__I_Built_a_Test.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/can-interactive-video-increase-conversions#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Can Interactive Video Increase Conversions? I Built a Test."}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1761262124\/Blog_Can_Interactive_Video_Increase_Conversions__I_Built_a_Test\/Blog_Can_Interactive_Video_Increase_Conversions__I_Built_a_Test.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/39071","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=39071"}],"version-history":[{"count":5,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/39071\/revisions"}],"predecessor-version":[{"id":39617,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/39071\/revisions\/39617"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/39072"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=39071"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=39071"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=39071"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}