Segmentação manual personalizada | O inscrito seleciona os temas de interesse

Passo 1)

Na configuração avançada do Site, você precisa habilitar callbacks de javascript para o eventos "newSubscription" e "load":

Em newSubscription coloque o callback pushnewsNewSubscriptionHandler
Em load coloque o callback pushnewsLoadHandler

O callback "load" será necessário apenas se você já tiver inscritos que não selecionaram nenhum Interesse e quiser que o popup de Interesses apareça para eles.

Recomendamos colocar nomes de callbacks exclusivos para uso do Pushnews para que estes eventos não colidam com outros javascripts do seu site.

Caso precise de ajuda adicional neste passo temos um artigo aqui

Passo 2)

Coloque os blocos de código abaixo no seu Site.

2.1) Estilos CSS

Se pretender, pode adaptar estes estilos para melhor se adaptarem ao seu Site.

<style>
    #pn-interests-container {
        border: 1px solid #dadada;
        border-radius: 5px;
        padding: 16px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        width: 500px;
        background: #fbfbfb;
        transition: visibility 600ms, opacity 600ms;
        visibility: hidden;
        display: none;
        position: fixed;
        z-index: 100;
        left: 2%;
        top: 20%;
    }
    #pn-interests-container input {
        margin-left: 0;
    }
    #pn-interests-container label {
        margin-right: 10px;
        display: inline;
    }
    #pn-interests-container p {
        margin: 0;
        line-height: 28px;
    }
    #pn-interests-container .thank-you {
        font-weight: 700;
    }
    #pn-interests-container .inline {
        display: inline-block;
    }
    #pn-interests-container .close-btn {
        border: none;
        background-color: #37AAF3;
        padding: 6px 10px;
        color: #fff;
        border-radius: 3px;
    }
    #pn-interests-container .pn-mdl-header {
        padding-bottom: 10px;
    }
    #pn-interests-container .pn-mdl-footer {
        padding-top: 15px;
    }
</style>

2.2) HTML

Este bloco de código precisa ser colocado dentro do <body>

Lembre-se de editar este código para incluir os segmentos que você pretende. Só precisa garantir que cada interesse tem um "value" distinto.

<!-- Pushnews categories box (it will only be visible when a new Push Subscriber is detected) -->
<div id="pn-interests-container">
    <div class="pn-mdl-header">
        <p class="thank-you">Obrigado por se cadastrar nas Push Notifications!</p>
    </div>
    <div class="pn-mdl-body">
        <div class="inlinea">
            <p>Quais os assuntos do seu interesse?</p>
        </div>
        <div class="inlinea">
            <input type="checkbox" name="pushnews-interest" value="geral" id="pn-interest-1">
            <label for="pn-interest-1">Geral</label>
            <input type="checkbox" name="pushnews-interest" value="esportes" id="pn-interest-2">
            <label for="pn-interest-2">Esportes</label>
            <input type="checkbox" name="pushnews-interest" value="economia" id="pn-interest-3">
            <label for="pn-interest-3">Economia</label>
        </div>
    </div>
    <div class="pn-mdl-footer">
        <button class="close-btn">× Fechar</button>
    </div>
</div>

2.3) Javascript

<script>
    var IlabsPush = IlabsPush || [];

    /**
    * When a new Push Subscription is detected, show the Interests box
    * Set the Interests box as displayed
    */
    function pushnewsNewSubscriptionHandler(event) {
        if (true === event.data.isSubscribed) {
            var pushnewsId = event.data.pnId;

            localStorage.setItem("pnews_interestsAlreadyDisplayed", 1);
            document.getElementById("pn-interests-container").style.visibility = "visible";
            document.getElementById("pn-interests-container").style.display = "block";
        }
    }

    /**
     * When the Pushnews tag loads, if user is subscribed but the Interests box was not displayed,
     * show the Interests box as well.
     * This function is only needed if you want the visitors of your site, that did not have the
     * opportunity to select Interests, to show them afterwards
     */
    function pushnewsLoadHandler(event) {
        var subscriberInfo = event.IlabsPush.getSubscriberInformation();
        if (subscriberInfo && subscriberInfo.isSubscribed && localStorage.getItem("pnews_interestsAlreadyDisplayed") != '1') {
            localStorage.setItem("pnews_interestsAlreadyDisplayed", 1);
            document.getElementById("pn-interests-container").style.visibility = "visible";
            document.getElementById("pn-interests-container").style.display = "block";
        }
    }

    /**
     * When an interest is clicked, sync with Pushnews
     */
    var pnInterests = document.querySelectorAll("input[name=pushnews-interest]");
    if (null !== pnInterests) {
        pnInterests.forEach(function(pnInterest) {
            pnInterest.addEventListener("change", function(event) {
                var interestName = this.getAttribute('value');
                var interestValue = "0";
                if (true === this.checked) {
                    interestValue = "1";
                }
                var customFilters = {};
                customFilters[interestName] = interestValue;
                IlabsPush.push(["sendCustomFilters", customFilters]);
            })
        });
    }

   /**
    * When the close button is clicked, close the interests box
    */
    document.querySelector("#pn-interests-container .close-btn").addEventListener("click", function(event) {
        event.preventDefault();
        document.getElementById("pn-interests-container").style.visibility = "hidden";
        document.getElementById("pn-interests-container").style.display = "none";
    });
</script>