Índice
¿Tienes un sitio AMP y quieres monetizarlo con Web Push Notification? Aquí le guiaremos a través del proceso de integración de la solución Notifadz en un sitio AMP.
Esta integración se hará en 5 pasos:
Cree un archivo en la raíz de su sitio web que contendrá las siguientes líneas:
var Version = '6.4.1';
importScripts('<https://notifpush.com/amp_serviceworker.js>');
importScripts('<https://notifpush.com/serviceworker.js>
Tu archivo amp_serviceworker.js debería tener este aspecto (la versión puede ser diferente):
Debe descargar los siguientes archivos y añadirlos a la raíz de su sitio web. Al hacer clic en el enlace, el archivo se descargará automáticamente.
<aside> 💡 Conviene saberlo. Accede a los enlaces y pulsa CTRL+S en tu teclado para guardar la página como archivo HTML.
</aside>
Una vez completado este paso, deberían ser accesibles desde:
Para todas las páginas AMP de tu sitio que desees habilitar para las Notificaciones Web Push, incluye la siguiente secuencia de comandos en la sección <head> de tus páginas AMP:
<script async custom-element="amp-web-push" src="<https://cdn.ampproject.org/v0/amp-web-push-0.1.js>"></script>');
<amp-web-push
id="amp-web-push"
layout="nodisplay"
helper-iframe-url="<https://PUBLISHERDOMAIN.COM/ampMyHelper.html?setIds=PUBLISHER-IDS>"
permission-dialog-url="<https://PUBLISHERDOMAIN.COM/ampDialog.html?setIds=PUBLISHER-IDS>"
service-worker-url="<https://PUBLISHERDOMAIN.COM/amp_serviceworker.js?setIds=PUBLISHER-IDS>"
>
</amp-web-push>
En el código anterior, tienes que cambiar PUBLISHERDOMAIN.COM por tu dominio y PUBLISHER-IDS por el IDS de tu script collect que puedes encontrar en tu dashboard Notifadz.
Haga clic en la pestaña “Domains” (Dominios) y, a continuación, en el submenú “Manage my templates” (Gestionar mis plantillas):
A continuación, haga clic en el pictograma “Scripts” situado a la derecha de la tabla:
.png)
Aparecerá la siguiente página. Copie los setIds y péguelos en el lugar de los PUBLISHER-IDS de su sitio AMP.
En AMP, la casilla de opt-in sólo puede activarse mediante una acción del usuario. Por lo tanto, debes proporcionarles un botón en el que hacer clic para activar la acción.
Dentro de la etiqueta <head>, incluya el siguiente código CSS:
<style amp-custom="">
amp-web-push-widget p {
text-align: center;
width: 100%;
}
amp-web-push-widget p.subscribe {
position: fixed;
bottom: 30px;
left: 0;
}
amp-web-push-widget button.subscribe {
display: inline-flex;
align-items: center;
border-radius: 15px;
border: 0;
box-sizing: border-box;
margin: 0;
padding: 12px 20px;
cursor: pointer;
outline: none;
font-size: 1em;
font-weight: normal;
background: #135de4;
color: white;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
amp-web-push-widget .subscribe-icon {
margin-right: 10px;
width: 64px;
height: 64px;
}
amp-web-push-widget button.subscribe:active {
transform: scale(1.2);
}
amp-web-push-widget button.unsubscribe {
display: inline-flex;
align-items: center;
justify-content: center;
height: 45px;
border: 0;
margin: 0;
cursor: pointer;
outline: none;
font-size: 1em;
font-weight: normal;
background: transparent;
color: #c8c8c8;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
</style>
A continuación, añada el siguiente código a su cuerpo/contenido donde desee que aparezcan los botones UI.
<!-- Subscribe button start -->
<amp-web-push-widget visibility="unsubscribed" layout="fixed" width="250" height="80">
<p class="subscribe"><button on="tap:amp-web-push.subscribe" class="subscribe">
<amp-img class="subscribe-icon" width="22" height="24" layout="fixed"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAACXBIWXMAAAsSAAALEgHS3X78AAAAAXNSR0IArs4c6QAABKBJREFUWEdjZBhkgBGfe9TV1RXV1dXVN23atIMa7vbz8/O4CQH3cZmH1UFCQkJ83d3dnfHx8SnMzMwsRkZG2ufPn7+GwxAOT09PO0ZGRqazZ88efvny5Vds6gwNDbXOnTt39e/fv38WLlw4p7S0tPzdu3ef0NViOEhJSUlu165du5SVldU/f/78cdq0aZMrKioaGBgY/qJrlpaWFj506NBxJSUlVZDcs2fPHjs7O7vcuHHjFhZHMXd0dDRkZWXl8vLy8t++ffuGh4eH+7179x4hq0VxkKioKM/Ro0dPqaqqah44cGB3REREzMuXL19hMZzRycnJtrS0tMjDw8MfWf78+fOnKyoqKnbt2rWfgYHhP7pecXFxsRUrVixxcHBwvXXr1jUbGxvz169ff4GpQ3HQpEmTenNzc4sOHTq0197e3pOBgeE3uoHu7u6OPT09fTo6Ogb40tXly5fPFxcXF+7evfsgFnWsBw8e3G5nZ+c8efLkvry8vGIMB0lISIg+fPjw0d+/f/+qq6urPX78+BmaQYwdHR1NZWVl1YyMjHgzA0zf/////3d2drZUVlbWo4eWrKys1M2bN28xMzMzy8vLy7148eI1SB/c4MzMzJRp06bNnj9//sykpKQMdF9NnDgR5JNCcnLb5MmTJ2DTO2/evBmJiYnp2dnZILvnojhIR0dHs6WlpamioqIaPVEmJCREzZ8/fyk5joHpSUxMjF6wYMEyZDM0NDTUurq62qqqqmqvXLlyHcVBuCwTERHhvXHjxl1hYWFRShz09u3b1xoaGspv3rz5jM8cgmmhtLS0sKurq48Sx8D0VlZWFnV0dPRT5KBLly6d1dXVNaKGgy5fvnxOT0/PmGwHgcqlly9ffgSVwtRw0P////+JiYkJ4Is2vFGmr6+vfeHChSvUcAzMDH19fd1Lly7hNBOvg6ytrU2OHDlympoOsrGxMT169OgZXGbidZCVlRVI8ylqOsja2trs2LFjOD056iArKyvz48eP4wx1QmnI4siRI8epGWX29vbWhw4dOkZWGvL39/fasGHDVmo6KDg42H/dunWbyHJQcXFxfk9PzwRqOqiysrKko6OjlywHbdq0aa2vr28QNR20efPmdX5+fsEkOwjWPmJjY+OgpoN+/vz5HdRMfvbs2Rts5uJM1DNmzJiUnp6eS03HwMyaMmVKP6hlSrSDQIl5/fr1m6lVh6Fb/O/fv78BAQG+mzdv3o4uhxFCgYGBPkuXLl3JycnJRYvQgZn5/fv3b9HR0eHr16/fgmwPioNA7d/S0tJKWoUMugdBtX9vb297aWlpDUwO7iBxcXHu+/fvv+Dk5OShZcigm/3t27cvSkpKErAOJka/jIeHh5ueDvry5ctXnP0yejqE5HIIn+NSU1MTuru78ZbgFRUVRTNmzJhHqicJNvKxGWhra2t26NChk/gss7OzMz98+DDJbSmyHARyyLp165YHBgZGYHPUhg0bVuKSIxRiZDuIgYGBY+HChZNjY2OTYMUEKBsvXrx4Xnx8PKiE/0HIcqJLalIMUlZWljUzMzMD6Tl58uRp9OEVUswCqaUkhEi1iyj1AD5LzTShDnHtAAAAAElFTkSuQmCC">
</amp-img>
Suscribirse a las notificaciones
</button></p>
</amp-web-push-widget>
<!-- Subscribe button end -->
<!-- Unsubscribe button start -->
<amp-web-push-widget visibility="subscribed" layout="fixed" width="250" height="80">
<p><button on="tap:amp-web-push.unsubscribe" class="unsubscribe">Darse de baja de las notificaciones</button></p>
</amp-web-push-widget>
<!-- Unsubscribe button end →
Aquí tienes una vista previa del aspecto del botón en la página AMP:
.png)
<aside> 💡 Algunas notas sobre la colocación de los botones:
¡Felicidades! 🥳
Su integración está completa: ¡puede empezar a captar suscriptores en tu sitio AMP y a monetizarlos!
<aside> ➡️ Siguiente paso: La salud de su sistema de monetización
</aside>
¿Tiene alguna pregunta?
Estamos aquí para ayudarle.