Sommaire
Vous avez un site AMP et vous souhaitez le monétiser avec la Web Push Notification ? Ici, nous vous guidons à travers le processus d'intégration de la solution Notifadz sur un site AMP.
Cette intégration se fera en 5 étapes :
1. Ajout de l’amp_serviceworker.js file
Créez un fichier à la racine de votre site web qui contiendra les lignes suivantes :
var Version = '6.4.1';
importScripts('<https://notifpush.com/amp_serviceworker.js>');
importScripts('<https://notifpush.com/serviceworker.js>');
Votre fichier amp_serviceworker.js devrait ressembler à ceci (la version peut être différente) :
Vous devez télécharger les fichiers ci-dessous et les ajouter à la racine de votre site web. En cliquant sur le lien, le fichier sera automatiquement téléchargé.
<aside> 💡 Bon à savoir ! Accédez aux liens et appuyez sur les touches CTRL+S de votre clavier pour enregistrer la page en tant que fichier HTML.
</aside>
Une fois cette étape franchie, ils devraient être accessibles à partir de :
Pour toutes les pages AMP de votre site sur lesquelles vous souhaitez activer les Web Push Notifications, incluez le script suivant dans la section <head> de vos pages 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>
Dans le code ci-dessus, vous devez remplacer PUBLISHERDOMAIN.COM par votre domaine et PUBLISHER-IDS par l'IDS de votre script de collecte que vous pouvez trouver sur votre tableau de bord Notifadz.
Cliquez sur l’onglet “Mes sites” puis sur le sous-menu “Gérer mes templates” :
Cliquez ensuite sur le pictogramme « Scripts » situé à droite du tableau :
.png)
La page suivante apparaît. Copiez les setIds et collez-les à la place des PUBLISHER-IDS de votre site AMP.
Sur AMP, l'opt-in box ne peut être déclenchée que par une action de l'utilisateur. Vous devez donc lui fournir un bouton sur lequel il pourra cliquer pour déclencher l'action.
Dans la balise <head>, incluez le code CSS suivant :
<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>
Ensuite, ajoutez le code suivant à votre body/content à l'endroit où vous souhaitez que les boutons de l'interface utilisateur apparaissent.
<!-- 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>
S'abonner aux notifications
</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">Se désabonner des notifications</button></p>
</amp-web-push-widget>
<!-- Unsubscribe button end -->
Voici un aperçu de ce à quoi ressemble le bouton sur une page AMP :
.png)
<aside> 💡 Quelques remarques concernant l'emplacement des boutons :
Félicitations🥳
Votre intégration est terminée : vous pouvez commencer à collecter des abonnés sur votre site AMP et à les monétiser !
<aside> ➡️ Prochaine étape : L’état de santé votre monétisation
</aside>
Des questions ?
Si vous avez des questions, n’hésitez pas, nous sommes là pour vous répondre !