{"id":93009,"date":"2022-10-18T19:13:19","date_gmt":"2022-10-18T17:13:19","guid":{"rendered":"https:\/\/rmarketingdigital.com\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/"},"modified":"2020-10-19T06:24:59","modified_gmt":"2020-10-19T09:24:59","slug":"300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/en\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/","title":{"rendered":"300% Increase in Buy Intent Indicators on BettyCrocker.com"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/#Las-aplicaciones-retiradas-de-iOS-y-Android\" >The retired iOS and Android apps<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/#Llevando-la-caracteristica-asesina-a-la-web-con-la-API-de-Wake-Lock\" >Bringing the killer feature to the web with the Wake Lock API<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/#Solicitar-un-bloqueo-de-activacion\" >Request an activation lock<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/#Liberar-un-bloqueo-de-activacion\" >Release an activation lock<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/#La-implementacion\" >The implementation<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/#El-contenedor-de-wake-lock\" >The wake lock container<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/#El-componente-de-bloqueo-de-activacion\" >The Activation Lock Component<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/#Resultados\" >Results<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/#Conclusiones\" >Conclusions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/#Agradecimientos\" >Thanks<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n<p>          Nothing is worse when cooking with a mobile device than its screen turns off in the middle of a recipe step. Find out how the BettyCrocker.com kitchen site used the Wake Lock API to prevent this from happening.<\/p>\n<p>\n          <time>May 19, 2020<\/time><br \/>\n            Updated <time>May 19, 2020<\/time>\n        <\/p>\n<\/header>\n<p>For nearly a century, Betty Crocker has been America&#039;s source for modern cooking instruction and trusted recipe development. Launched in 1997, its site <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.bettycrocker.com\/\">BettyCrocker.com<\/a><br \/>\ntoday it receives more than 12 million visitors a month. After them <strong>implemented the Wake Lock API<\/strong>, its<br \/>\n<strong>indicators of<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.igi-global.com\/dictionary\/technology-and-sharing-economy-based-business-models-for-marketing-to-connected-consumers\/24144\">purchase attempt<\/a><br \/>\nwere approximately 300% higher<\/strong> for wake lock users compared to all users.<\/p>\n<h2 id=\"the-retired-ios-and-android-apps\"><span class=\"ez-toc-section\" id=\"Las-aplicaciones-retiradas-de-iOS-y-Android\"><\/span>The retired iOS and Android apps <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Released to <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/consumergoods.com\/betty-crocker-launches-cookbook-app\">much fanfare<\/a> In 2014, Betty Crocker recently pulled her apps from the Apple App Store and Google Play Store after being de-prioritized. For a long time, Betty Crocker&#039;s team has preferred to add new features to the mobile site rather than the iOS \/ Android apps. The technical platform on which the iOS \/ Android applications were built was out of date and the company did not have the resources to support future update and maintenance of the applications. The web application was also objectively much larger in terms of traffic, more modern, and easier to improve.<\/p>\n<p>IOS \/ Android apps had a <em>killer feature<\/em>, however, that its users loved:<\/p>\n<blockquote>\n<p>Millennial Cooking Pro Tip: The <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/twitter.com\/BettyCrocker\">@BettyCrocker<\/a> The mobile app does not dim or crash when you follow a recipe. -<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/twitter.com\/AvaBeilke\/status\/996746473168670720\">@AvaBeilke<\/a><\/p>\n<\/blockquote>\n<blockquote>\n<p>People&#039;s 80% cook with a device in the kitchen, but dimming and screen lock are a problem. What did <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/twitter.com\/BettyCrocker\">@BettyCrocker<\/a> do? Updated your app so it is NOT grayed out when users are on a recipe. -<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/twitter.com\/Katie_Tweedy_\/status\/996746567762763776\">@Katie_Tweedy_<\/a><\/p>\n<\/blockquote>\n<h2 id=\"bringing-the-killer-feature-to-the-web-with-the-wake-lock-api\"><span class=\"ez-toc-section\" id=\"Llevando-la-caracteristica-asesina-a-la-web-con-la-API-de-Wake-Lock\"><\/span>Bringing the killer feature to the web with the Wake Lock API <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>When cooking with a device, there is nothing more frustrating than having to touch the screen with dirty hands or even your nose when the screen turns off. Betty Crocker wondered how they could transfer the main feature of their iOS \/ Android apps to the web app. That&#039;s when they found out<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/updates\/capabilities\">Fugu project<\/a> and the Wake Lock API.<\/p>\n<p><img alt='doughy-fingers-5594163' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/doughy-fingers-5594163.jpg'><\/p>\n<p>The Wake Lock API provides a way to prevent the device from dimming or locking the screen. This ability enables new experiences that, until now, required an iOS \/ Android application. The Wake Lock API reduces the need for pirated and potentially power hungry solutions.<\/p>\n<h3 id=\"requesting-a-wake-lock\"><span class=\"ez-toc-section\" id=\"Solicitar-un-bloqueo-de-activacion\"><\/span>Request an activation lock <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To request an activation lock, you must call <code>navigator.wakeLock.request ()<\/code> method that returns a <code>WakeLockSentinel<\/code> object. You will use this object as<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Sentinel_value\">sentinel value<\/a>. The browser may reject the request for various reasons (for example, because the battery is too low), so it is good practice to wrap the call in a <code>try\u2026 catch<\/code> statement.<\/p>\n<h3 id=\"releasing-a-wake-lock\"><span class=\"ez-toc-section\" id=\"Liberar-un-bloqueo-de-activacion\"><\/span>Release an activation lock <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>You also need a way to release an activation lock, which is accomplished by calling <code>release ()<\/code> method of <code>WakeLockSentinel<\/code> object. If you want to automatically release the activation lock after a certain period of time has passed, you can use <code>window.setTimeout ()<\/code> to call <code>release ()<\/code>, as shown in the following example.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><br><span class=\"token keyword\">let<\/span> wakeLock <span class=\"token operator\">=<\/span> <span class=\"token keyword\">null<\/span><span class=\"token punctuation\">;<\/span><p><br><span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">requestWakeLock<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">try<\/span> <span class=\"token punctuation\">{<\/span><br>wakeLock <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> navigator<span class=\"token punctuation\">.<\/span>wakeLock<span class=\"token punctuation\">.<\/span><span class=\"token function\">request<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;screen&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>wakeLock<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'release'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'Wake Lock was released'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'Wake Lock is active'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">catch<\/span> <span class=\"token punctuation\">(<\/span>err<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">error<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>err<span class=\"token punctuation\">.<\/span>yam<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">, <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>err<span class=\"token punctuation\">.<\/span>message<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p><p><br><span class=\"token keyword\">await<\/span> <span class=\"token function\">requestWakeLock<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>window<span class=\"token punctuation\">.<\/span><span class=\"token function\">setTimeout<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br>wakeLock<span class=\"token punctuation\">.<\/span><span class=\"token function\">release<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>wakeLock <span class=\"token operator\">=<\/span> <span class=\"token keyword\">null<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">5000<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"the-implementation\"><span class=\"ez-toc-section\" id=\"La-implementacion\"><\/span>The implementation <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>With the new web app, users should be able to easily navigate through a recipe, complete steps, and even walk away without locking the screen. To achieve this goal, the team first built a rapid front-end prototype as a proof of concept and to collect UX information.<\/p>\n<p>After the prototype proved useful, they designed a<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/vuejs.org\/v2\/guide\/components.html\">Vue.js component<\/a><br \/>\nthat could be shared with all your brands (<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.bettycrocker.com\/\">Bettycrocker<\/a>,<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.pillsbury.com\/\">Pillsbury<\/a>and <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.tablespoon.com\/\">Tablespoon<\/a>). Although only Betty Crocker had iOS and Android apps, all three sites have a shared code base, so they were able to deploy the component once and then deploy it everywhere, as shown in the screenshots below.<\/p>\n<figure class=\"w-figure\">\n  <img alt='www-bettycrocker-com_-5724685' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/www.bettycrocker.com_-5724685.png' width=\"600\"><figcaption class=\"w-figcaption\">Activation Lock Switch from BettyCrocker.com.<\/figcaption><\/figure>\n<figure class=\"w-figure\">\n  <img alt='www-pillsbury-com_-2503224' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/www.pillsbury.com_-2503224.png' width=\"600\"><figcaption class=\"w-figcaption\">Activation Lock Switch from Pillsbury.com.<\/figcaption><\/figure>\n<figure class=\"w-figure\">\n  <img alt='www-tablespoon-com_-1430753' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/www.tablespoon.com_-1430753.png' width=\"600\"><figcaption class=\"w-figcaption\">Activation Lock Switch from Tablespoon.com.<\/figcaption><\/figure>\n<p>In developing the component based on the modernized framework of the new site, there was a strong focus on the<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/012.vuejs.org\/guide\/\"><code>ViewModel<\/code>  MVVM pattern layer<\/a>. The team also programmed with interoperability in mind to enable functionality in new and legacy site frameworks.<\/p>\n<p>To track visibility and usability, Betty Crocker integrated analytical tracking of major events in the Activation Lock lifecycle. The team used Role Management to deploy the Activation Lock component to a single site for the initial production deployment and then rolled out the feature to the rest of the sites after monitoring page status and usage. They continue to monitor analytical data based on the use of this component.<\/p>\n<p>As a security measure for users, the team created a forced time-out to deactivate Activation Lock after one hour of inactivity. The final implementation they decided on was, in the short term, a toggle switch on all the recipe pages on their sites. In the long run, they see a revamped recipe page view.<\/p>\n<h3 id=\"the-wake-lock-container\"><span class=\"ez-toc-section\" id=\"El-contenedor-de-wake-lock\"><\/span>The wake lock container <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">var<\/span> <span class=\"token function-variable function\">wakeLockControl<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">return<\/span> <span class=\"token keyword\">import<\/span><span class=\"token punctuation\">(<\/span> <span class=\"token string\">'.\/wakeLock'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><p><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> <span class=\"token punctuation\">{<\/span><br>components<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br>wakeLockControl<span class=\"token operator\">:<\/span> wakeLockControl<span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token function\">data<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">{<\/span><br>config<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br>wakeLockComponent<span class=\"token operator\">:<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br>methods<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token function-variable function\">init<\/span><span class=\"token operator\">:<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">config<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">Este<\/span><span class=\"token punctuation\">.<\/span>config <span class=\"token operator\">=<\/span> config <span class=\"token operator\">||<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token string\">'wakeLock'<\/span> <span class=\"token keyword\">in<\/span> navigator <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token string\">'request'<\/span> <span class=\"token keyword\">in<\/span> navigator<span class=\"token punctuation\">.<\/span>wakeLock<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">Este<\/span><span class=\"token punctuation\">.<\/span>wakeLockComponent <span class=\"token operator\">=<\/span> <span class=\"token string\">'wakeLockControl'<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token punctuation\">{<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'Browser not supported'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"the-wake-lock-component\"><span class=\"ez-toc-section\" id=\"El-componente-de-bloqueo-de-activacion\"><\/span>The Activation Lock Component <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>template<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>wakeLock<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>textAbove<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>label<\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>switch<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">:aria-label<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>settingsInternal.textAbove<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>checkbox<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">@change<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>onChange()<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">v-model<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>isChecked<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>span<\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>slider round<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>span<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>label<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>template<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><p><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script<\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>text\/javascript<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token script\"><span class=\"token language-javascript\"><br><span class=\"token keyword\">import<\/span> debounce <span class=\"token keyword\">from<\/span> <span class=\"token string\">'lodash.debounce'<\/span><span class=\"token punctuation\">;<\/span><\/span><\/span><\/p><p><span class=\"token keyword\">const<\/span> scrollDebounceMs <span class=\"token operator\">=<\/span> <span class=\"token number\">1000<\/span><span class=\"token punctuation\">;<\/span><\/p><p><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> <span class=\"token punctuation\">{<\/span><br>props<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br>settings<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> type<span class=\"token operator\">:<\/span> Object <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token function\">data<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">{<\/span><br>settingsInternal<span class=\"token operator\">:<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>settings <span class=\"token operator\">||<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br>isChecked<span class=\"token operator\">:<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span><br>wakeLock<span class=\"token operator\">:<\/span> <span class=\"token keyword\">null<\/span><span class=\"token punctuation\">,<\/span><br>timerId<span class=\"token operator\">:<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token function\">created<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">$_raiseAnalyticsEvent<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'Wake Lock Toggle Available'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br>methods<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token function-variable function\">onChange<\/span><span class=\"token operator\">:<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>isChecked<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">$_requestWakeLock<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">$_releaseWakeLock<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token function-variable function\">$_requestWakeLock<\/span><span class=\"token operator\">:<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">try<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>wakeLock <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> navigator<span class=\"token punctuation\">.<\/span>wakeLock<span class=\"token punctuation\">.<\/span><span class=\"token function\">request<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'screen'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">$_handleAbortTimer<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>document<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><br><span class=\"token string\">'visibilitychange'<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>$_handleVisibilityChange<span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>window<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><br><span class=\"token string\">'scroll'<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token function\">debounce<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>$_handleAbortTimer<span class=\"token punctuation\">,<\/span> scrollDebounceMs<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">$_raiseAnalyticsEvent<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'Wake Lock Toggle Enabled'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">catch<\/span> <span class=\"token punctuation\">(<\/span>e<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>isChecked <span class=\"token operator\">=<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token function-variable function\">$_releaseWakeLock<\/span><span class=\"token operator\">:<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">try<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>wakeLock<span class=\"token punctuation\">.<\/span><span class=\"token function\">release<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>wakeLock <span class=\"token operator\">=<\/span> <span class=\"token keyword\">null<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">$_handleAbortTimer<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>document<span class=\"token punctuation\">.<\/span><span class=\"token function\">removeEventListener<\/span><span class=\"token punctuation\">(<\/span><br><span class=\"token string\">'visibilitychange'<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>$_handleVisibilityChange<span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>window<span class=\"token punctuation\">.<\/span><span class=\"token function\">removeEventListener<\/span><span class=\"token punctuation\">(<\/span><br><span class=\"token string\">'scroll'<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token function\">debounce<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>$_handleAbortTimer<span class=\"token punctuation\">,<\/span> scrollDebounceMs<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">catch<\/span> <span class=\"token punctuation\">(<\/span>e<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Wake Lock Release Error: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>e<span class=\"token punctuation\">.<\/span>name<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">, <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>e<span class=\"token punctuation\">.<\/span>message<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token function-variable function\">$_handleAbortTimer<\/span><span class=\"token operator\">:<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>timerId <span class=\"token operator\">!==<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token function\">clearTimeout<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>timerId<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>timerId <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>isChecked<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>timerId <span class=\"token operator\">=<\/span> <span class=\"token function\">setTimeout<\/span><span class=\"token punctuation\">(<\/span><br><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>$_releaseWakeLock<span class=\"token punctuation\">,<\/span><br><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>settingsInternal<span class=\"token punctuation\">.<\/span>timeoutDurationMs<span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token function-variable function\">$_handleVisibilityChange<\/span><span class=\"token operator\">:<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>isChecked<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">$_releaseWakeLock<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>isChecked <span class=\"token operator\">=<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token function-variable function\">$_raiseAnalyticsEvent<\/span><span class=\"token operator\">:<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">eventType<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">let<\/span> eventParams <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span><br>EventType<span class=\"token operator\">:<\/span> eventType<span class=\"token punctuation\">,<\/span><br>Position<span class=\"token operator\">:<\/span> window<span class=\"token punctuation\">.<\/span>location<span class=\"token punctuation\">.<\/span>pathname <span class=\"token operator\">||<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><br>Analytics<span class=\"token punctuation\">.<\/span><span class=\"token function\">raiseEvent<\/span><span class=\"token punctuation\">(<\/span>eventParams<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>script<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"results\"><span class=\"ez-toc-section\" id=\"Resultados\"><\/span>Results <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The Vue.js component was implemented on all three sites and it yielded excellent results. During the period from December 10, 2019 to January 10, 2020, BettyCrocker.com reported the following metrics:<\/p>\n<ul>\n<li>Out of all Betty Crocker users with a Wake Lock API compliant browser, the 3.5% enabled the feature immediately, making it a top 5 action.<\/li>\n<li>The session duration for users who enabled Activation Lock was 3.1 times longer than for users who did not.<\/li>\n<li>The bounce rate for users who enabled Activation Lock was 50% lower than for those who did not use Activation Lock.<\/li>\n<li>Purchase intent indicators were approximately 300% higher for wake lock users compared to all users.<\/li>\n<\/ul>\n<div class=\"w-stats\">\n<div class=\"w-stat\">\n<p class=\"w-stat__figure\">3.1<sub class=\"w-stat__sub\">\u00d7<\/sub><\/p>\n<p class=\"w-stat__desc\">Longer session duration<\/p>\n<\/p><\/div>\n<div class=\"w-stat\">\n<p class=\"w-stat__figure\">300<sub class=\"w-stat__sub\">%<\/sub><\/p>\n<p class=\"w-stat__desc\">Higher purchase intention indicators<\/p>\n<\/p><\/div>\n<\/div>\n<h2 id=\"conclusions\"><span class=\"ez-toc-section\" id=\"Conclusiones\"><\/span>Conclusions <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Betty Crocker has had fantastic results with the Wake Lock API. You can test the feature yourself by searching for your favorite recipe on any of their sites (<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.bettycrocker.com\/\">Bettycrocker<\/a>,<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.pillsbury.com\/\">Pillsbury<\/a>or <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.tablespoon.com\/\">Tablespoon<\/a>) and enabling the <strong>Prevent the screen from going dark while cooking<\/strong> lever.<\/p>\n<p>Wake lock use cases don&#039;t stop at recipe sites. Other examples are boarding pass or ticket applications that need to keep the screen on until the barcode has been scanned, kiosk-style applications that keep the screen on continuously, or web-based presentation applications that prevent the screen becomes idle during a presentation.<\/p>\n<p>We have compiled everything you need to know about the Wake Lock API in a comprehensive article on this very site. Happy reading and happy cooking!<\/p>\n<h2 id=\"acknowledgements\"><span class=\"ez-toc-section\" id=\"Agradecimientos\"><\/span>Thanks <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>the <em>person kneading dough<\/em> photo courtesy of<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/unsplash.com\/@julianhochgesang\">Julian Hochgesang<\/a><br \/>\nin <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/unsplash.com\/photos\/huepD-06_pQ\">Unsplash<\/a>.<\/p>\n<p>    <web-feedback additional-questions=\"\"><\/web-feedback>\n  <\/div>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>","protected":false},"excerpt":{"rendered":"<p>Nothing is worse when cooking with a mobile device than its screen turning off in the middle of a recipe step. Find out how the kitchen site BettyCrocker.com used\u2026<\/p>","protected":false},"author":1,"featured_media":93010,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-93009","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>300% de aumento en los indicadores de intenci\u00f3n de compra en BettyCrocker.com - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Nada es peor cuando se cocina con un dispositivo m\u00f3vil que su pantalla se apaga en medio de un paso de receta. Descubra c\u00f3mo el sitio de cocina\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"300% de aumento en los indicadores de intenci\u00f3n de compra en BettyCrocker.com\" \/>\n<meta property=\"og:description\" content=\"Nada es peor cuando se cocina con un dispositivo m\u00f3vil que su pantalla se apaga en medio de un paso de receta. Descubra c\u00f3mo el sitio de cocina\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/en\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-18T17:13:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero-9941722.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\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\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"300% de aumento en los indicadores de intenci\u00f3n de compra en BettyCrocker.com\",\"datePublished\":\"2022-10-18T17:13:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\\\/\"},\"wordCount\":1318,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/hero-9941722.jpg\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\\\/\",\"name\":\"300% de aumento en los indicadores de intenci\u00f3n de compra en BettyCrocker.com - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/hero-9941722.jpg\",\"datePublished\":\"2022-10-18T17:13:19+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Nada es peor cuando se cocina con un dispositivo m\u00f3vil que su pantalla se apaga en medio de un paso de receta. Descubra c\u00f3mo el sitio de cocina\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/hero-9941722.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/hero-9941722.jpg\",\"width\":1200,\"height\":360,\"caption\":\"hero-9941722-8354483-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"300% increase in purchase intent indicators on BettyCrocker.com - R Marketing Digital","description":"Nothing is worse when cooking with a mobile device than its screen turns off in the middle of a recipe step. Find out how the kitchen site","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:\/\/rmarketingdigital.com\/en\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/","og_locale":"en_US","og_type":"article","og_title":"300% de aumento en los indicadores de intenci\u00f3n de compra en BettyCrocker.com","og_description":"Nada es peor cuando se cocina con un dispositivo m\u00f3vil que su pantalla se apaga en medio de un paso de receta. Descubra c\u00f3mo el sitio de cocina","og_url":"https:\/\/rmarketingdigital.com\/en\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/","og_site_name":"R Marketing Digital","article_published_time":"2022-10-18T17:13:19+00:00","og_image":[{"width":1200,"height":360,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero-9941722.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"300% de aumento en los indicadores de intenci\u00f3n de compra en BettyCrocker.com","datePublished":"2022-10-18T17:13:19+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/"},"wordCount":1318,"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero-9941722.jpg","articleSection":["Dev"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/","url":"https:\/\/rmarketingdigital.com\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/","name":"300% increase in purchase intent indicators on BettyCrocker.com - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero-9941722.jpg","datePublished":"2022-10-18T17:13:19+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Nothing is worse when cooking with a mobile device than its screen turns off in the middle of a recipe step. Find out how the kitchen site","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rmarketingdigital.com\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero-9941722.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero-9941722.jpg","width":1200,"height":360,"caption":"hero-9941722-8354483-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digital Marketing","description":"SEO Agency | Advertising social networks | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digital Marketing","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/93009","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/comments?post=93009"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/93009\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media\/93010"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media?parent=93009"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/categories?post=93009"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/tags?post=93009"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}