05/07/2021

Cookie Yes - Consentimento para cookie no site Webacappella

 



Lei Geral de Proteção de Dados Pessoais (LGPD ou LGPDP)Lei nº 13.709/2018 é  legislação brasileira que regula as atividades de tratamento de dados pessoais e que também altera os artigos 7º e 16 do Marco Civil da Internet.

Então influi tudo referente a proteção de dados, e não simplesmente colocar um aviso em seu site. É importante lembrar que quem trabalha na área de desenvolvimento de sites, é como qualquer um, deve ter sua política interna em tratar os dados de seus clientes e também não pense, que é só fazer o site entregar com um aviso de cookies e se der algum problema do site não está devidamente seguindo as normas, este está livre de qualquer responsabilidade com a desculpa que o dono do site é o responsável sobre todo o conteúdo. Pois a forma que o site trata a coleta de dados é de responsabilidade do desenvolvedor. Ele é caracterizado pela Lei no papel de operador. 

Ou seja, se você trabalha com criação / desenvolvimento de sites (até mesmo se fornece serviços de hospedagem) deve-se preocupar sim o quão mais profundo sobre a LGPD.

Eu até agora fiz vários cursos gratuitos, e no meu ponto de vista; estes passam informações globais, mas não aprofundada sobre o assunto. Então aconselho também que todos fiquem por dentro da Lei na íntegra. Aconselho também, como farei em breve, cursos mais completos e também uma pesquisa árdua considerando palestras de profissionais da área.

Mais pra frente vou tentar postar no blog algum estudo mais profundo sobre a LGPD, mas confesso que ainda não me sinto 100% preparado para isso. O que eu posso dizer que no site tudo quanto é cookie em que se possa chegar a uma pessoa tanto com informações de dados direta e sensível deve ser declarado. 

Alguns exemplos: Qualquer integração com rede social (seja ele pixel ou mesmo plugin de página, até mesmo apresentação de vídeos do Youtube ), formulário de contato, plugins de chat de atendimento; etc.


Bom, mas como dito, ainda vou preparar um post mais aprofundado neste assunto. Enquanto isso estarei mostrando várias formas de se implementar o controle de cookies em seu site de forma gratuita mostrando várias plataformas que encontrei pela Internet.  

Estarei mostrando várias, pois a maioria em versão gratuita tem suas limitações, seja na configuração de layout, seja na quantidade de visitas o site recebe , seja na quantidade de páginas que o site tem.

Dessa forma, deve-se estudar cada um e ver se adequa ao projeto. Até mesmo pela questão do layout do aviso de consentimento combinar com o layout do website.


Hoje então vamos começar falando sobre a CookieYes

Eu gostei na Cookie Yes foi no estilo de cores, da forma da mensagem de consentimento e suas opções.

Abaixo um print da tabela de preços da CookieYes na data de hoje. Lembrando que antes de se cadastrar é sempre aconselhável ler Os Termos e condições quanto a Política de privacidade. Uma vez que pode ser alterado a qualquer momento.



Após de cadastrar em uma conta gratuita, na primeira tela é disponibilizado a escolha do modelo do banner de consentimento. 



Clicando em Customizar surge várias opções tais idioma, textos configuráveis, cores e até mesmo a opção de configurar o CSS. Porém, não se preocupe de configurar nada agora, deixe para o final (pois em teste, tudo que salvei antes de implementar o código no site, não ficou salvo). 



Uma dica importante é você criar sua página de Política e informar na customização. 



Já na próxima etapa é fornecido um código para ser inserido no seu website. Este deve ser colocado no na primeira linha do head do site Web Acappella



Após adicionar o código publique o site já com o código para continuar nas configurações do Cooke Yes.

Após clique em Verificar para a detecção que o banner está ativo.



Com esse código adicionado além de aparecer o banner de consentimento, o próprio CookieYes escanei os cookies usados no seu site cada qual em sua categoria. E você tem todo o controle sobre editar, excluir ou alterar e até mesmo incluir novos cookies pelo painel da plataforma. 


Portanto, observei que no site, nada das configurações que eu havia feito estavam salvas. Optei em iara para o Dashboard configurar tudo novamente. Lá após configurar tudo novamente passou a funcionar minhas configurações no site. 


Um detalhe importante, é que mesmo selecionando nas configurações o idioma Português Brasileiro, os textos explicativos de cada cookies continuaram em inglês. 




Então é necessário ir alterando o texto para português editando cada um via Dashboard.



E visualizando pelas ferramentas de desenvolvedor do Google antes de qualquer aceitação, somente os cookies do Cookieyes (considerado como necessários) foram carregados.




O painel da CookieYes também oferece que você crie sua Política de cookies e Política de Privacidade disponibilizando o código HTML para ser adicionado ao website em suas respectivas páginas. Na página de Política de Cookies (pelo código HTML) o visitante do site dispões de opção onde poderá mudar seu consentimento a qualquer momento.





Outra coisa bem interessante é que no painel você tem o registro de logs com opção de exportar para CSV.




Gostei muito do CookiYes, pois mesmo no plano gratuito consegui configurar as cores do banner de consentimento. O que em muitos outros com opção gratuita não é possível.





 



31/05/2020

Inclusão de campos CPF e CNPJ no cadastro do cliente na loja Prestashop 1.6



O Prestashop  é um dos sistema de E-Commerce de ponta para se ter uma loja virtual, mas nada é perfeito. Um dos ítens que o Prestashop pecou (pelo menos até a versão 1.6) foi a existência no cadastro do cliente do campo CPF e ou CNPJ. Uma vez que são informações necessárias para se emitir uma nota fiscal.

Para solucionar esta questão vamos utilizar um módulo fornecido pela NeoGest disponível gratuitamente no site da empresa (informação até a data corrente).

Clique aqui  para acessar a página do módulo na Web.

Após adquirir o módulo da NeoGest você receberá um link no e-mail informado para baixar o módulo.

Baixe um módulo em um local no seu equipamento e vamos os passos para instalação.

No painel administrativo da sua loja vá para Módulos e Serviços e Módulos e Serviços 



Na tela que carregará , no canto superior direito clique em Adicionar novo módulo


Selecione o módulo onde baixou no seu equipamento clicando em Escolha um arquivo (vide imagem abaixo) e clique em Enviar este módulo.




Aguarde a resposta que o módulo foi adicionado.




Caso sua loja utilize recebimento por cheque ou Depósito bancário, deve configurar primeiro o módulo Cheque e Transferência bancária antes de configurar este módulo


Caso não prosseguimos com nossa explicação.

Então na mesma página a qual teve o Aviso de instalação com sucesso na área onde se mostra o módulo clique em Instalar



Clique em prosseguir com a instalação



Após instalar configure os campos conforme sua necessidade e clique em SALVAR no fim da tela de configuração.

Prontinho. Campos inclusos e agora o lojista tem a informação necessária para emissão de Nota Fiscal.

25/08/2019

Google Analystics no Prestashop



O serviço do Google Analytics é gratuito no qual é possível gerar estatísticas de visitação de um site cadastrado. Ele foi criado como um auxilio aos webmasters para otimizar seus sites para campanhas de marketing. O Analytics é capaz de identificar, além da tradicional taxa de exibição e hit de uma página, a localização geográfica do visitante, como chegou no site (links de outros sites, buscador, propaganda ou diretamente pelo endereço), sistema operacional, navegador usado, resolução de tela, uso de plug-ins (como Java e Flash). Ele faz isso em períodos diários, semanais, mensais e anuais. Logo, o Google Analytics é uma ferramenta de monitoramento de tráfego mas também um poderoso auxílio para tomada de decisões em negócios relacionados à Internet.
Logo, fazer uso do Google Analytics para analisar as visitas à sua loja e com isso planejar ações de marketing, descontos e promoções, pode ser uma ótima ideia. Para isto, siga os seguintes passos:
  • Acesse sua conta no Google Analytics. Se você não tiver conta, use a sua conta no Google para acessar e ativar o serviço.
  • Feito todo o processo, você terá um número de identificação de acompanhamento (o ID de acompanhamento), e você irá gerar, na aba Código de acompanhamento, um código iniciado em UA para ser inserido no Prestashop.
Vamos então inserir o código do Google Analytics em nossa loja Prestashop; verão como é muito simples:


Google Analystcs no Prestashop


  • Na mesma tela , na barra de busca digite google analytics e na lista clique em Instalar conforme imagem abaixo


  • Prossiga clicando em Prosseguir com a instalação


  • Clique agora em Configurar para Configurar 



  • Informe seus dados e clique em Salvar


  • Se tudo ocorreu bem será mostrado a mensagem de sucesso.


Prontinho. Se lhe foi útil, deixe um comentário e compartilhe para ajudar o blog continuar no ar.

13/06/2019

Definindo a ordem em que os produtos são mostrados na loja



Se você que mudar a ordem em que os produtos são mostrados na sua loja Prestashop antes é importante saber.

Na página principal em RECÉM CHEGADOS, é mostrado automaticamente a ordem dos últimos cadastrados na loja. Sendo a ordem é os últimos primeiro.

Em POPULAR é mostrado na ordem sendo os primeiros os mais populares. Ou seja, mais visitados.

Mas é possível você mudar a ordem que é mostrado quando o visitante clicar na categoria do produto.

Para alterar essa configuração logue no painel administrativo da sua loja.

Vá para as opções PREFERÊNCIAS > PRODUTOS



Na tela que se abrir role a página até a área PAGINAÇÃO. Seleciona a ordem desejada conforme mostra na imagem abaixo e depois cliquem em salvar.



Prontinho.

28/05/2019

Colocando a loja Prestashop como catálogo





Ter uma loja virtual exige também que seja preparada toda uma logística de seu funcionamento. Tais como, processo de embalagem, de postagem nos correios, de estoque e etc.

Porém durante este processo, não queremos perder a divulgação de nossos produtos. Então enquanto estamos preparando essa lojística e até mesmo completando o cadastros dos produtos no que se trata de informações de largura e peso para remessa.

Para isso temos a opção de ativar a loja como catálogo.

Veja como é simples:

Após logar no painel vá para PREFERÊNCIA > PRODUTOS





Na tela que vai se abrir. Logo de início na área Produtos você ativa o Modo Catálogo





Salve e prontinho. 




15/05/2019

Alterando a cor da barra de telefone tema padrão Prestashop



A barra que estamos falando é a superior que conta e-mail e telefone. (Vide imagem abaixo) 



O método usado é bem simples e será necessário ter acesso aos arquivos na hospedagem onde está instalado a loja.


1) Fazer um backup como garantia do arquivo global.css que fica dentro da pasta themes/css

2) Então é isso aí. este arquivo que vamos editar.

Procure a classe header {

Provavelmente estará na linha 5745 e altere o código da cor pela desejada 



Salve o arquivo alterado e prontinho. A cor do fundo da barra está alterado.





18/04/2019

PRESTASHOP 1.6 - Antispam no formulário de contato com reCAPTCHA




Um dos problemas mais frequentes é o envio massivo de mensagens de spam através do formulário de contato da loja online. Para evitar esta situação vamos adicionar um captcha aos formulários da loja online .
Captcha é um acrônimo para  Teste de Turing Público Completamente Automatizado para informar a Computers and Humans Apart  (teste de Turing totalmente automático e público para diferenciar computadores de humanos). Uma palavra muito longa que se refere ao teste que é usado para impedir que programas de robô enviem milhões de mensagens de spam automaticamente e de forma invasiva.

Então como vamos inserir em nosso formulário de contato de nossa loja?

1) Baixe o módulo reCAPTCHA clicando aqui.

2) Instalando o módulo

Logue na área administrativa e no menu principal vá até Módulos e Serviços > Módulo e serviços





No topo superior esquerdo cliequ em em Adicionar novo módulo selecione o arquivo baixado e clique em Enviar este módulo.



prestashop recatpcha


Caso ocorra tudo OK irá aparecer a mensagem de sucesso.





3 ) Ative o serviço reCATCHA do Google

Para adicionar o reCAPTCHA ao formulário de contato, é necessário acessar o serviço reCAPTCHA com nsua Conta do Google.

  1. Vá para   https://www.google.com/recaptcha/intro/index.html e clique em 
  2. Clique em Admin console e registre um recaptcha para seu domínio de sua loja
como inserir recaptcha no prestashop


Após enviado será gerado a CHAVE DO SITE e a CHAVE SECRETA. Salve estas informações em algum lugar pois vai precisar delas.

chave recaptcha para prestashop

4 ) Configurando o módulo reCAPTCHA

Voltando ao painel administrativo do Prestashop vá até Módulos e Serviços > Módulo e serviços

módulo prestashop recaptcha


Buque por "Ei captcha" e ao lado clique em Instalar

instalando recaptcha no prestashop


Preencha os campos com as chaves geradas no Goggle Captcha e assinale as configurações como desejar. 

configurando recaptcha no prestashop

Clique em Salvar
Prontinho seu formulário de contato já tem o reCAPTCHA instalado.

reCAPTCHA no prestashop


Para ver online CLIQUE AQUI


31/08/2018

Rodapé fixo na base do site




TEMA: Códigos | Rodapé
ARTIGO: Atualizado em 30/08/2018
VERSÃO: WA RC  |  WA 4

Olá galera do bem!! Vamos postar hoje uma gambiarra que funciona..hehehe

Hoje vou passar um truque que é muito útil para quem quer por  "Um rodapé fixo na base do site.". Este rodapé fica fixo enquanto o site rola por baixo dele.


Já vou falar um inconveniente que deve-se presta atenção:

Não crie botões redirecionando para  uma página na internet ou do próprio projeto, pois irá carregar dentro do rodapé; a não ser que defina para abri em uma nova guia.



Mãos a obra:

NO WEBACAPPELLA 4

O primeiro passo é se criar uma "página" no Webacappella com a mesma largura usada nas outras páginas. Dê um nome para essa página de rodape por exemplo. No caso deste post estamos mostrando somente para a versão desketop do site. Para quem está usando o WA4 criando sites nas versões desktop, tablet e celular terá que criar a página rodapé para cada versão. (Para saber mais sobre várias versões do site usando WA4 clique aqui)




Lembre-se de usar a mesma largura das outras páginas do seu projeto. No caso do exemplo 1024px. e a altura desejada de acordo com o tamanho do rodapé. Caso seu rodapé for ter menos de 100px, não se preocupe, configure com 100px pois o WebAcappella 4  não permite que seja menor do que isso.
Mas logo em frente vamos contornar esta situação.

Configure também a cor do fundo que você deseja para seu rodapé definindo a cor do plano de fundo da página.

No caso eu configure a cor preta de código #000000 no exemplo.



Dê um nome para sua página no browser. No caso do exemplo será rodape.html, marque para ignorar a página nos mecanismos de busca.




Agora preste atenção, se seu rodapé for ter a altura menor que 100px, Coloque uma marca na altura que você vai utilizar. Neste exemplo o meu rodapé vai ter 50px de altura. Veja na imagem abaixo como fiz a marcação:




Portanto se meu rodapé terá 50px de altura eu só vou trabalhar na parte superior da linha.

Fiz um exemplo de como editei meu rodapé bem simples para terem uma ideia, veja abaixo:





Agora copiem o código abaixo e cole no head das propriedades da página do seu rodapé.

<body style="overflow-y: hidden;overflow-x: hidden;">



Clique em OK


Agora vamos utilizar o seguinte código para configurar nosso rodapé. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style type="text/css">

#rodape /*rodapé do sistema */

{



background-color: códigocor;

width:100%;

text-align: center;

position:fixed;

bottom:0px;

left:0px;

}

</style>



<form id="form1" runat="server">

<div id="rodape">

<html>

<iframe src="urlrodape" style="border:0px #000000 hidden;" name="rodape" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="altura" width="largura" allowfullscreen></iframe>

</html>


</div>






Você vai alterar somente os trechos de vermelho no código da seguinte maneira:

códigocor : Utilize o mesmo código da cor utilizada para o fundo da sua página definida como rodapé. No case deste exemplo foi #000000
largura: Utilize o mesmo valor que usou para largura da sua página rodapé. No caso do exemplo foi 1024

altura: Agora você vai usar o valor que você deseja para altura do rodapé, NÃO é o valor configurado para altura da sua página no caso do seu rodapé for menor que 100px. No caso deste exemplo é 50px.

urlrodape: Substitua pela url da página do seu rodapé (Ex: http://www.seudominio.com.br/rodape.html -> se a página se chamar rodape)


O código do exemplo ficou assim:


<style type="text/css">
#rodape /*rodapé do sistema */
{
background-color: #000000;
width:100%;
text-align: center;
position:fixed;
bottom:0px;
left:0px;
}
</style>
<form id="form1" runat="server">
<div id="rodape">
<html>
<iframe src="http://www.webacappellashow.com.br/wasevents/wa4/rodape.html" style="border:0px #000000 hidden;" name="rodape" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="50px" width="100%" allowfullscreen></iframe>
</html>
</div>


Agora crie uma matriz, pode nomear como "rodapé" para facilitar depois. E lá você usa a opção do Webacappella INSERIR>> CÓDIGO HTML e insira seu código.



Agora nas páginas que deseja utilizar o rodapé fixo basta ir nas propriedades e Escolher o rodapé  que criou como matriz.




Clique abaixo para ver um exemplo on line:




NO WEBACAPPELLA RC (WA5 - RESPONSIVE)

O primeiro passo é se criar uma "página" no Webacappella . Dê um nome para essa página de rodape por exemplo.






Configure também a cor do fundo que você deseja para seu rodapé definindo a cor do plano de fundo da página.

No caso eu configure a cor preta de código #000000 no exemplo.





Dê um nome para sua página no browser. No caso do exemplo será rodape.html, marque para ignorar a página nos mecanismos de busca.





Agora copiem o código abaixo e cole no head das propriedades da página do seu rodapé.

<body style="overflow-y: hidden;overflow-x: hidden;">




Agora vamos utilizar o seguinte código para configurar nosso rodapé. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style type="text/css">
#rodape /*rodapé do sistema */

{
background-color: códigocor;
width:100%;
text-align: center;
position:fixed;
bottom:0px;
left:0px;
}
</style>
<form id="form1" runat="server">
<div id="rodape">
<html>
<iframe src="urlrodape" style="border:0px #000000 hidden;" name="rodape" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="altura" width="100%" allowfullscreen></iframe>
</html>
</div>



Você vai alterar somente os trechos de vermelho no código da seguinte maneira:

códigocor : Utilize o mesmo código da cor utilizada para o fundo da sua página definida como rodapé. No case deste exemplo foi #000000


altura: Agora você vai usar o valor que você deseja para altura do rodapé,  Já no WARC você terá que ir ajustando o valor da altura ao publicar o site. Tipo, você ajusta, publica e ve se ficou bom, e assim por diante.

urlrodape: Substitua pela url da página do seu rodapé (Ex: http://www.seudominio.com.br/rodape.html -> se a página se chamar rodape)





O código do exemplo ficou assim:


<style type="text/css">
#rodape /*rodapé do sistema */
{
background-color: #000000;
width:100%;
text-align: center;
position:fixed;
bottom:0px;
left:0px;
}
</style>
<form id="form1" runat="server">
<div id="rodape">
<html>
<iframe src="http://www.webacappellashow.com.br/wasevents/warc/rodape.html" style="border:0px #000000 hidden;" name="rodape" scrolling="no" frameborder="0" height="50" width="100%" allowfullscreen></iframe>
</html>
</div>


Agora crie uma subpage, pode nomear como "rodapé" para facilitar depois. E lá você usa a opção do Webacappella INSERIR>> CÓDIGO HTML e insira seu código.



Agora nas páginas que deseja utilizar o rodapé fixo basta inserir um box no fim da página e adicionar uma subpage que obviamente será a que você fez para o rodapé.



Maravilha. agora só publicar.


Clique abaixo para ver um exemplo on line:





Related Posts Plugin for WordPress, Blogger...