Tabela de conteúdo
Você tem um site AMP e deseja monetizá-lo com o Web Push Notification? Aqui, nós o orientaremos no processo de integração da solução Notifadz em um site AMP.
Essa integração será feita em cinco etapas:
1. Adicione o arquivo amp_serviceworker.js
Crie um arquivo na raiz de seu site que conterá as seguintes linhas:
var Version = 6.4.1;
importScripts('<https://notifpush.com/amp_serviceworker.js>');
importScripts('<https://notifpush.com/serviceworker.js>
Seu arquivo amp_serviceworker.js deve ter a seguinte aparência (a versão pode ser diferente):
Você precisa fazer o download dos arquivos abaixo e adicioná-los à raiz do seu site. Ao clicar no link, o arquivo será baixado automaticamente.
<aside> 💡 É bom saber! Acesse os links e pressione CTRL+S em seu teclado para salvar a página como um arquivo HTML.
</aside>
Depois de concluir essa etapa, eles deverão estar acessíveis em:
Para todas as páginas AMP do seu site que você gostaria de ativar as notificações Web Push, inclua o seguinte script na seção <head> das suas 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>
No código acima, você deve alterar PUBLISHERDOMAIN.COM com o seu domínio e PUBLISHER-IDS com o IDS do seu script de coleta que pode ser encontrado no painel do Notifadz.
Clique na guia “Domains” (Domínios) e, em seguida, no submenu “Manage my templates” (Gerenciar meus modelos):
Em seguida, clique no pictograma “Scripts” localizado à direita da tabela:
.png)
A página a seguir é exibida. Copie os “setIds” e cole-os no lugar dos PUBLISHER-IDS do seu site AMP.
Nas AMP, a caixa de opt-in só pode ser acionada por uma ação do usuário. Portanto, você precisa fornecer a eles um botão para clicar que acionará a ação.
Na tag <head>, inclua o seguinte 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>
Em seguida, adicione o seguinte código ao corpo/conteúdo onde você deseja que os botões da IU apareçam.
<!-- 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>
Subscrever notificações
</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">Cancelar a subscrição de notificações</button></p>
</amp-web-push-widget>
<!-- Unsubscribe button end →
Aqui está uma prévia da aparência do botão na página AMP:
.png)
<aside> 💡 Algumas observações sobre o posicionamento dos botões:
Parabéns 🥳
Sua integração está concluída: você pode começar a coletar assinantes no seu site AMP e monetizá-los!
<aside> ➡️ Próxima etapa: Centro de Saúde de Monetização
</aside>
Você tem alguma pergunta?
Estamos aqui para ajudar!