{"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\/de\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/","title":{"rendered":"300% Erh\u00f6hung der Kaufabsichtsindikatoren auf 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\">Inhalt<\/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=\"Inhaltsverzeichnis umschalten\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Umschalten<\/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\/de\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/#Las-aplicaciones-retiradas-de-iOS-y-Android\" >Die pensionierten iOS- und 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\/de\/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\" >Bringen Sie die Killer-Funktion mit der Wake Lock-API ins Web<\/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\/de\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/#Solicitar-un-bloqueo-de-activacion\" >Fordern Sie eine Aktivierungssperre an<\/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\/de\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/#Liberar-un-bloqueo-de-activacion\" >Aktivieren Sie eine Aktivierungssperre<\/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\/de\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/#La-implementacion\" >Die Umsetzung<\/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\/de\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/#El-contenedor-de-wake-lock\" >Der 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\/de\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/#El-componente-de-bloqueo-de-activacion\" >Die Aktivierungssperrkomponente<\/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\/de\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/#Resultados\" >Ergebnisse<\/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\/de\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/#Conclusiones\" >Schlussfolgerungen<\/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\/de\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/#Agradecimientos\" >Vielen Dank<\/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>          Beim Kochen mit einem mobilen Ger\u00e4t ist nichts schlimmer, als dass sich der Bildschirm mitten in einem Rezeptschritt ausschaltet. Erfahren Sie, wie die K\u00fcchenseite von BettyCrocker.com die Wake Lock-API verwendet hat, um dies zu verhindern.<\/p>\n<p>\n          <time>19. Mai 2020<\/time><br \/>\n            Aktualisiert <time>19. Mai 2020<\/time>\n        <\/p>\n<\/header>\n<p>Betty Crocker ist seit fast einem Jahrhundert Amerikas Quelle f\u00fcr modernen Kochunterricht und vertrauensw\u00fcrdige Rezeptentwicklung. 1997 gestartet, seine Website <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.bettycrocker.com\/\">BettyCrocker.com<\/a><br \/>\nHeute werden monatlich mehr als 12 Millionen Besucher empfangen. Nach ihnen <strong>implementierte die Wake Lock API<\/strong>, es ist<br \/>\n<strong>Indikatoren von<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\">Kaufversuch<\/a><br \/>\nwaren ungef\u00e4hr 300% h\u00f6her<\/strong> f\u00fcr Wake-Lock-Benutzer im Vergleich zu allen Benutzern.<\/p>\n<h2 id=\"the-retired-ios-and-android-apps\"><span class=\"ez-toc-section\" id=\"Las-aplicaciones-retiradas-de-iOS-y-Android\"><\/span>Die pensionierten iOS- und Android-Apps <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Freigegeben an <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/consumergoods.com\/betty-crocker-launches-cookbook-app\">viel Fanfare<\/a> Im Jahr 2014 hat Betty Crocker k\u00fcrzlich ihre Apps aus dem Apple App Store und dem Google Play Store abgerufen, nachdem sie ihre Priorit\u00e4ten aufgehoben hatten. Betty Crockers Team hat es lange Zeit vorgezogen, der mobilen Website neue Funktionen hinzuzuf\u00fcgen, anstatt den iOS \/ Android-Apps. Die technische Plattform, auf der die iOS \/ Android-Anwendungen erstellt wurden, war veraltet und das Unternehmen verf\u00fcgte nicht \u00fcber die Ressourcen, um zuk\u00fcnftige Updates und Wartungen der Anwendungen zu unterst\u00fctzen. Die Webanwendung war auch objektiv viel verkehrsreicher, moderner und leichter zu verbessern.<\/p>\n<p>IOS \/ Android Apps hatten eine <em>Killer-Feature<\/em>, die seine Benutzer jedoch liebten:<\/p>\n<blockquote>\n<p>Millennial Cooking Pro Tipp: Die <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/twitter.com\/BettyCrocker\">@BettyCrocker<\/a> Die mobile App wird nicht gedimmt oder st\u00fcrzt ab, wenn Sie einem Rezept folgen. - -<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/twitter.com\/AvaBeilke\/status\/996746473168670720\">@ AvaBeilke<\/a><\/p>\n<\/blockquote>\n<blockquote>\n<p>Der 80% von Menschen kocht mit einem Ger\u00e4t in der K\u00fcche, aber Dimmen und Bildschirmsperre sind ein Problem. Was hat getan <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/twitter.com\/BettyCrocker\">@BettyCrocker<\/a> machen? Ihre App wurde aktualisiert, sodass sie NICHT abgeblendet ist, wenn Benutzer ein Rezept verwenden. - -<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>Bringen Sie die Killer-Funktion mit der Wake Lock-API ins Web <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Wenn Sie mit einem Ger\u00e4t kochen, gibt es nichts Frustrierenderes, als den Bildschirm mit schmutzigen H\u00e4nden oder sogar der Nase ber\u00fchren zu m\u00fcssen, wenn sich der Bildschirm ausschaltet. Betty Crocker fragte sich, wie sie die Hauptfunktion ihrer iOS \/ Android-Apps auf die Web-App \u00fcbertragen k\u00f6nnten. Dann fanden sie es heraus<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/updates\/capabilities\">Fugu-Projekt<\/a> und die Wake Lock API.<\/p>\n<p><img alt='teigige Finger-5594163' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/doughy-fingers-5594163.jpg'><\/p>\n<p>Die Wake Lock-API bietet eine M\u00f6glichkeit, zu verhindern, dass das Ger\u00e4t den Bildschirm dimmt oder sperrt. Diese F\u00e4higkeit erm\u00f6glicht neue Erfahrungen, f\u00fcr die bisher eine iOS \/ Android-Anwendung erforderlich war. Die Wake Lock-API reduziert den Bedarf an Raubkopien und potenziell stromhungrigen L\u00f6sungen.<\/p>\n<h3 id=\"requesting-a-wake-lock\"><span class=\"ez-toc-section\" id=\"Solicitar-un-bloqueo-de-activacion\"><\/span>Fordern Sie eine Aktivierungssperre an <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Um eine Aktivierungssperre anzufordern, m\u00fcssen Sie anrufen <code>navigator.wakeLock.request ()<\/code> Methode, die a zur\u00fcckgibt <code>WakeLockSentinel<\/code> Objekt. Sie werden dieses Objekt als verwenden<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Sentinel_value\">Sentinel-Wert<\/a>. Der Browser kann die Anforderung aus verschiedenen Gr\u00fcnden ablehnen (z. B. weil der Akku zu schwach ist). Daher empfiehlt es sich, den Anruf in a zu verpacken <code>versuche ... zu fangen<\/code> Aussage.<\/p>\n<h3 id=\"releasing-a-wake-lock\"><span class=\"ez-toc-section\" id=\"Liberar-un-bloqueo-de-activacion\"><\/span>Aktivieren Sie eine Aktivierungssperre <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Sie ben\u00f6tigen auch eine M\u00f6glichkeit, eine Aktivierungssperre aufzuheben, die durch Aufrufen erreicht wird <code>Ver\u00f6ffentlichung ()<\/code> Methode von <code>WakeLockSentinel<\/code> Objekt. Wenn Sie die Aktivierungssperre nach Ablauf einer bestimmten Zeit automatisch aufheben m\u00f6chten, k\u00f6nnen Sie sie verwenden <code>window.setTimeout ()<\/code> anrufen <code>Ver\u00f6ffentlichung ()<\/code>, wie im folgenden Beispiel gezeigt.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><br><span class=\"token keyword\">Lassen<\/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\">asynchron<\/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\">erwarten<\/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;Bildschirm&#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>S\u00fc\u00dfkartoffel<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>Botschaft<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\">erwarten<\/span> <span class=\"token function\">requestWakeLock<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>Fenster<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>Die Umsetzung <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Mit der neuen Web-App sollten Benutzer in der Lage sein, problemlos durch ein Rezept zu navigieren, Schritte auszuf\u00fchren und sogar wegzugehen, ohne den Bildschirm zu sperren. Um dieses Ziel zu erreichen, baute das Team zun\u00e4chst einen schnellen Front-End-Prototyp als Proof of Concept und zum Sammeln von UX-Informationen.<\/p>\n<p>Nachdem sich der Prototyp als n\u00fctzlich erwiesen hatte, entwarfen sie eine<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/vuejs.org\/v2\/guide\/components.html\">Vue.js Komponente<\/a><br \/>\ndas k\u00f6nnte mit all deinen Marken geteilt werden (<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>y <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.tablespoon.com\/\">Essl\u00f6ffel<\/a>). Obwohl nur Betty Crocker \u00fcber iOS- und Android-Apps verf\u00fcgte, verf\u00fcgen alle drei Websites \u00fcber eine gemeinsame Codebasis, sodass sie die Komponente einmal und dann \u00fcberall bereitstellen konnten, wie in den folgenden Screenshots gezeigt.<\/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\">Aktivierungssperrschalter von 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\">Aktivierungssperrschalter von Pillsbury.com.<\/figcaption><\/figure>\n<figure class=\"w-figure\">\n  <img alt='www-Essl\u00f6ffel-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\">Aktivierungssperrschalter von Tablespoon.com.<\/figcaption><\/figure>\n<p>Bei der Entwicklung der Komponente auf der Grundlage des modernisierten Rahmens des neuen Standorts lag ein starker Fokus auf dem<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/012.vuejs.org\/guide\/\"><code>ViewModel<\/code>  MVVM-Musterschicht<\/a>. Das Team programmierte auch im Hinblick auf die Interoperabilit\u00e4t, um Funktionen in neuen und \u00e4lteren Site-Frameworks zu erm\u00f6glichen.<\/p>\n<p>Um die Sichtbarkeit und Benutzerfreundlichkeit zu verfolgen, integrierte Betty Crocker die analytische Verfolgung wichtiger Ereignisse in den Aktivierungssperr-Lebenszyklus. Das Team verwendete die Rollenverwaltung, um die Aktivierungssperrkomponente f\u00fcr die anf\u00e4ngliche Produktionsbereitstellung an einem einzelnen Standort bereitzustellen, und stellte die Funktion nach \u00dcberwachung des Seitenstatus und der Verwendung f\u00fcr die \u00fcbrigen Standorte bereit. Sie \u00fcberwachen weiterhin Analysedaten basierend auf der Verwendung dieser Komponente.<\/p>\n<p>Aus Sicherheitsgr\u00fcnden f\u00fcr Benutzer erstellte das Team eine erzwungene Zeit\u00fcberschreitung, um die Aktivierungssperre nach einer Stunde Inaktivit\u00e4t zu deaktivieren. Die endg\u00fcltige Implementierung, f\u00fcr die sie sich entschieden hatten, war kurzfristig ein Kippschalter auf allen Rezeptseiten ihrer Websites. Auf lange Sicht sehen sie eine \u00fcberarbeitete Rezeptseitenansicht.<\/p>\n<h3 id=\"the-wake-lock-container\"><span class=\"ez-toc-section\" id=\"El-contenedor-de-wake-lock\"><\/span>Der 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\">R\u00fcckkehr<\/span> <span class=\"token keyword\">importieren<\/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\">Standard<\/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\">Daten<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">R\u00fcckkehr<\/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\">Funktion<\/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\">wenn<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token string\">'wakeLock'<\/span> <span class=\"token keyword\">im<\/span> Navigator <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token string\">'request'<\/span> <span class=\"token keyword\">im<\/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>Die Aktivierungssperrkomponente <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>Ergebnisse <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Die Vue.js-Komponente wurde an allen drei Standorten implementiert und lieferte hervorragende Ergebnisse. Im Zeitraum vom 10. Dezember 2019 bis zum 10. Januar 2020 meldete BettyCrocker.com die folgenden Kennzahlen:<\/p>\n<ul>\n<li>Von allen Betty Crocker-Benutzern mit einem Wake Lock API-kompatiblen Browser hat der 3.5% die Funktion sofort aktiviert und sie zu einer der Top 5-Aktionen gemacht.<\/li>\n<li>Die Sitzungsdauer f\u00fcr Benutzer, die die Aktivierungssperre aktiviert haben, war 3,1-mal l\u00e4nger als f\u00fcr Benutzer, die dies nicht getan haben.<\/li>\n<li>Die Absprungrate f\u00fcr Benutzer, die die Aktivierungssperre aktiviert haben, war 50% niedriger als f\u00fcr Benutzer, die die Aktivierungssperre nicht verwendet haben.<\/li>\n<li>Die Kaufabsichtsindikatoren waren f\u00fcr Wake-Lock-Benutzer im Vergleich zu allen Benutzern um ca. 300% h\u00f6her.<\/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\">L\u00e4ngere Sitzungsdauer<\/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\">H\u00f6here Kaufabsichtsindikatoren<\/p>\n<\/p><\/div>\n<\/div>\n<h2 id=\"conclusions\"><span class=\"ez-toc-section\" id=\"Conclusiones\"><\/span>Schlussfolgerungen <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Betty Crocker hat mit der Wake Lock API fantastische Ergebnisse erzielt. Sie k\u00f6nnen die Funktion selbst testen, indem Sie auf einer ihrer Websites nach Ihrem Lieblingsrezept suchen (<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>oder <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.tablespoon.com\/\">Essl\u00f6ffel<\/a>) und aktivieren die <strong>Verhindern Sie, dass der Bildschirm beim Kochen dunkel wird<\/strong> Hebel.<\/p>\n<p>Wake Lock-Anwendungsf\u00e4lle h\u00f6ren nicht an Rezeptstellen auf. Andere Beispiele sind Bordkarten- oder Ticketanwendungen, bei denen der Bildschirm eingeschaltet bleiben muss, bis der Barcode gescannt wurde, Anwendungen im Kiosk-Stil, bei denen der Bildschirm kontinuierlich eingeschaltet bleibt, oder webbasierte Pr\u00e4sentationsanwendungen, die verhindern, dass der Bildschirm w\u00e4hrend einer Pr\u00e4sentation inaktiv wird.<\/p>\n<p>In einem umfassenden Artikel auf dieser Website haben wir alles zusammengestellt, was Sie \u00fcber die Wake Lock-API wissen m\u00fcssen. Viel Spa\u00df beim Lesen und viel Spa\u00df beim Kochen!<\/p>\n<h2 id=\"acknowledgements\"><span class=\"ez-toc-section\" id=\"Agradecimientos\"><\/span>Vielen Dank <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>das <em>Person, die Teig knetet<\/em> Foto mit freundlicher Genehmigung von<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/unsplash.com\/@julianhochgesang\">Julian Hochgesang<\/a><br \/>\nim <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>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 BettyCrocker.com utiliz\u00f3&#8230;<\/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\/de\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\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\/de\/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\":\"de\"},{\"@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\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@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\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@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% de aumento en los indicadores de intenci\u00f3n de compra en BettyCrocker.com - R Marketing Digital","description":"Beim Kochen mit einem mobilen Ger\u00e4t ist nichts schlimmer, als dass sich der Bildschirm mitten in einem Rezeptschritt ausschaltet. Finden Sie heraus, wie die K\u00fcche vor Ort ist","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\/de\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/","og_locale":"de_DE","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\/de\/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":"de"},{"@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":"Beim Kochen mit einem mobilen Ger\u00e4t ist nichts schlimmer, als dass sich der Bildschirm mitten in einem Rezeptschritt ausschaltet. Finden Sie heraus, wie die K\u00fcche vor Ort ist","inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/dev\/300-de-aumento-en-los-indicadores-de-intencion-de-compra-en-bettycrocker-com\/"]}]},{"@type":"ImageObject","inLanguage":"de","@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 Digitales Marketing","description":"SEO Agentur | Werbung f\u00fcr soziale Netzwerke | 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":"de"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digitales Marketing","image":{"@type":"ImageObject","inLanguage":"de","@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\/de\/wp-json\/wp\/v2\/posts\/93009","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/comments?post=93009"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/93009\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media\/93010"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media?parent=93009"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/categories?post=93009"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/tags?post=93009"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}