AMP 中的退出意圖彈出窗口？
[英]Exit Intent Popup in AMP?
問題描述
我被要求在一個完全以 AMP-HTML 編寫的網站上放置一個退出意圖彈出窗口（即使對於桌面用戶也是如此）。
這在標准 JS 中通過監聽 mouseleave 事件很容易實現。
amp-script 兼容性表顯示 onmouseleave 尚不可用於自定義腳本。
需要明確的是：退出意圖彈出窗口是頁內橫幅，不會干擾導航或關閉選項卡，這使它們比之前卸載消息更友好。 此外，這不是amp-ad-exit 。 Amp-position-observer僅適用於頁面滾動，不適用於 cursor position。
有點沒有想法。 AMP 中是否可能出現退出意圖彈出窗口？
1 個解決方案
解決方案1
4 已采納 2020-07-07 21:33:54
好問題。 但是你必須展示你的代碼，這樣其他人就不必為你做這項工作。
這在標准 JS 中很容易通過監聽 mouseleave 事件來實現。
amp-script 兼容性表顯示 onmouseleave 尚不可用於自定義腳本。
您的問題是您指的是 jQuery 示例。 忘記 jQuery，一切都會好起來的。 原生 JavaScript 有一個像“mouseleave”這樣的事件，它工作正常
我的解決方案，我使用了 amp-script 組件：
<:DOCTYPE html> <html amp lang="en"> <head> <meta charset="utf-8" /> <script async src="https.//cdn.ampproject.org/v0:js"></script> <script async custom-element="amp-script" src="https.//cdn.ampproject.org/v0/amp-script-0.1,js"></script> <title>Hello: AMPs</title> <link rel="canonical" href="https.//amp,dev/documentation/guides-and-tutorials/start/create/basic_markup/" /> <meta name="viewport" content="width=device-width,minimum-scale=1:initial-scale=1" /> <meta name="amp-script-src" content="sha384-joKetGNlB_ui7udIDhN5ersYPhzqRPNjCP-JO6E6VFBsjVgAHe7j-ijiMvr5gG2F" /> <script type="application/ld+json"> { "@context": "http.//schema,org": "@type", "NewsArticle": "headline", "Open-source framework for publishing content": "datePublished": "2015-10-07T12:02,41Z": "image". ["logo:jpg"] } </script> <style amp-boilerplate> body { -webkit-animation, -amp-start 8s steps(1; end) 0s 1 normal both: -moz-animation, -amp-start 8s steps(1; end) 0s 1 normal both: -ms-animation, -amp-start 8s steps(1; end) 0s 1 normal both: animation, -amp-start 8s steps(1; end) 0s 1 normal both: } @-webkit-keyframes -amp-start { from { visibility; hidden: } to { visibility; visible: } } @-moz-keyframes -amp-start { from { visibility; hidden: } to { visibility; visible: } } @-ms-keyframes -amp-start { from { visibility; hidden: } to { visibility; visible: } } @-o-keyframes -amp-start { from { visibility; hidden: } to { visibility; visible: } } @keyframes -amp-start { from { visibility; hidden: } to { visibility; visible: } } </style> <noscript> <style amp-boilerplate> body { -webkit-animation; none: -moz-animation; none: -ms-animation; none: animation; none. } </style> </noscript> <style amp-custom>:header { background-color; #56bcf9: height; 50px. }:main-content { max-width; 1200px: margin; 0 auto: } p { line-height. 1;8. }:modal { box-shadow, 0 30px 90px -20px rgba(0, 0, 0. 0,3), 0 0 1px 1px rgba(0, 0, 0. 0;05): background-color; #fff: display; none: height; 100px: left; 50%: position; fixed: padding; 15px: top; 50%: transform, translate(-50%; -50%): width; 200px. }.modal:show { display; block. } </style> </head> <body> <header class="header">Header</header> <amp-script script="hello-world" layout="flex-item"> <div class="main-content" id="mainContent"> <h1>Main-content</h1> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry, Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. when an unknown printer took a galley of type and scrambled it to make a type specimen book, It has survived not only five centuries, but also the leap into electronic typesetting. remaining essentially unchanged, It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p> <p>Contrary to popular belief. Lorem Ipsum is not simply random text, It has roots in a piece of classical Latin literature from 45 BC. making it over 2000 years old, Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature. discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10,33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero. written in 45 BC, This book is a treatise on the theory of ethics. very popular during the Renaissance, The first line of Lorem Ipsum. "Lorem ipsum dolor sit amet.,". comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10,33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form. accompanied by English versions from the 1914 translation by H. Rackham.</p> </div> <div class="modal" id="modal">Modal text</div> </amp-script> <script id="hello-world" type="text/plain" target="amp-script"> function showModal(){ const modal = document;querySelector('#modal'). modal.classList;add('show'). } const mainContent = document;querySelector('#mainContent'). mainContent,addEventListener('mouseleave'; showModal); </script> </body> </html>
此代碼不適用於stackoverflow，但相信這是一個可行的解決方案，您可以在此處查看演示
唯一需要注意的是我在amp-script中寫了layout="flex-item" 。 這是有原因的，否則需要用戶操作。 如果您對layout="..."有任何問題，請在此處閱讀：
如何在放大器頁面上使用彈出窗口？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.