Dicas Blogger: Visualizações Dinâmicas

Home » Categories: Visualizações Dinâmicas

Mostrando postagens com marcador Visualizações Dinâmicas. Mostrar todas as postagens

Como configurar o Analytics nos templates de visualizações dinâmicas e layout do Blogger

<div style="text-align: justify;">
Os templates de visualizações dinâmicas são modernos, clean e se tornaram uma nova aposta para quem gosta de novidades. Tanto que alguns usuários do Blogger gostaram e já a aplicaram em seus blogs. Mas junto com a novidade veio a questão: se o html está fechado, como posso configurar o Google Analytics?</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Mesmo que a nova interface do Blogger não tenha sido opcional, o que não agradou muitos blogueiros, no entanto, ela trouxe algumas vantagens. Uma delas é a maneira fácil e prática de configurar o Google Analytics nos templates de visualizações dinâmicas e layout do Blogger, não sendo necessário instalar manualmente o código no html do template. O que resolve o problema e possibilita a configuração da ferramenta nos templates de visualizações dinâmicas.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Posts relacionados:</div>
<a href="http://www.dicasblogger.com.br/2012/05/usar-template-visualizacao-dinamica.html">Como usar os templates de visualizações dinâmicas</a><br />
<a href="http://www.dicasblogger.com.br/2012/01/contador-de-usuarios-online-do.html">Contador de usuários online do Analytics</a><br />
<a href="http://www.dicasblogger.com.br/2010/02/como-usar-o-google-analytics.html">Como usar o Google Analytics – funções básicas</a><br />
<div>
<br />
<div style="text-align: justify;">
A primeira coisa que deve ser feita por quem já possui a conta no Google Analytics e tem o blog configurado é identificar o código de acompanhamento gerado para o seu blog.</div>
<br />
Para isso, acesse a sua conta no Google Analytics e selecione o blog que você fará a configuração, conforme indicado na figura abaixo:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbBzRSF8SM-Bq2hySaNf3jYjRBTAdztCGmrgZSNV6XQuUoH865v1WS30ce3MDl-U-3-SFI0LAv9lD44flHbF7FXXjuaw33Vd0WFzO_t_YycLdoSrU46vBzyn1TuOt2tTugPPU_HCL9wy8/s1600/Analytics+Todas+as+Contas+1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbBzRSF8SM-Bq2hySaNf3jYjRBTAdztCGmrgZSNV6XQuUoH865v1WS30ce3MDl-U-3-SFI0LAv9lD44flHbF7FXXjuaw33Vd0WFzO_t_YycLdoSrU46vBzyn1TuOt2tTugPPU_HCL9wy8/s400/Analytics+Todas+as+Contas+1.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<span id="goog_129997965"></span><span id="goog_129997966"></span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
Na página que abrir, clique na opção "Administrador":<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4VqBXtrsD-F_5khL_29SJTrraFd4XRMN36pAafIpcoc8pgwOq7WigGLNeDbKn_9tWsDz5auI4sDBlvOiZu_kRyPV7LR0SXr8q3BRYCqNlVLi82P2reoFUOXz-Aj4OC3rxG0gqnazGgag/s1600/Analytics+Administrador1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="168" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4VqBXtrsD-F_5khL_29SJTrraFd4XRMN36pAafIpcoc8pgwOq7WigGLNeDbKn_9tWsDz5auI4sDBlvOiZu_kRyPV7LR0SXr8q3BRYCqNlVLi82P2reoFUOXz-Aj4OC3rxG0gqnazGgag/s400/Analytics+Administrador1.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: justify;">
Em seguida, clique em "Código de acompanhamento" e copie o ID (um código com letras e números). Esse código é a identidade do seu blog no Google Analytics. É por meio dele que a ferramenta irá identificar o seu blog e receber os dados de visitação.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiDYfq4Lm8kn9o2-J6CoLmbiScGOmPP2aMvDTx8tgD6BCF2HsRpd4B27R5bSMfv6DQzCYDDGcZKlZmnZkRAfDqx015KY5VYK7gZ0bt8Ng19evYmeJaj5hP6dJPH2u8uIm-w4LDiXfglGs/s1600/Analytics+ID+Acompanhamento1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiDYfq4Lm8kn9o2-J6CoLmbiScGOmPP2aMvDTx8tgD6BCF2HsRpd4B27R5bSMfv6DQzCYDDGcZKlZmnZkRAfDqx015KY5VYK7gZ0bt8Ng19evYmeJaj5hP6dJPH2u8uIm-w4LDiXfglGs/s400/Analytics+ID+Acompanhamento1.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div style="text-align: justify;">
Agora vamos para a etapa mais simples. Acesse o painel de controle do seu blog no Blogger e clique em "configurações", depois em "Outro". Ao final da tela você irá localizar o "ID de propriedade da web do Google Analytics". No espaço em branco insira o ID de acompanhamento gerado no Google Analytics. Salve as configurações e pronto. Você inseriu com facilidade o código.</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWHOf4sJ58T4JGOrymOf9S-dZ0sKfNc2kaCdcPmv6QJRie-75LskF343goOh1hB4sZN-dOzdOmeZWkTZ8aNBPGCYzFFTjfDnZfbSALXQWL_SC1S_Go7cnpvSqXFlAfZApoJ1_si6A0eLI/s1600/Analytics+Configura%25C3%25A7%25C3%25A3o+Blogger1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="275" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWHOf4sJ58T4JGOrymOf9S-dZ0sKfNc2kaCdcPmv6QJRie-75LskF343goOh1hB4sZN-dOzdOmeZWkTZ8aNBPGCYzFFTjfDnZfbSALXQWL_SC1S_Go7cnpvSqXFlAfZApoJ1_si6A0eLI/s400/Analytics+Configura%25C3%25A7%25C3%25A3o+Blogger1.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div style="text-align: justify;">
Para ter certeza que a configuração foi feita com sucesso. Volte no Google Analytics, acesse "Administrador", em seguida clique em "Código de Acompanhamento" e verifique o "Status de acompanhamento". Se aparecer a informação "Recebendo dados", conforme figura abaixo, você realizou a configuração com sucesso.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBzo_ml82cCbBFf8NSe5SD6_NuN_Z5DxvvNpbvlfW1QKlohGseWUYOQoHDjtLms7ITs5GqvfqzOenNlbZK_SShR70QXvg6XwF_lBOIj5VEFlHnusbcELMYotRSV_29Fsce4rqdvebTR8g/s1600/Analytics+Configurado+Corretamente.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="112" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBzo_ml82cCbBFf8NSe5SD6_NuN_Z5DxvvNpbvlfW1QKlohGseWUYOQoHDjtLms7ITs5GqvfqzOenNlbZK_SShR70QXvg6XwF_lBOIj5VEFlHnusbcELMYotRSV_29Fsce4rqdvebTR8g/s400/Analytics+Configurado+Corretamente.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div style="text-align: justify;">
Contudo, se ao verificar o "Status de acompanhamento" aparecer a informação "Acompanhamento não instalado", conforme figura abaixo, repita as etapas acima porque alguma coisa foi feita de maneira errada.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8ORlxIn63iHSMlOQH2ntJvgyY-FKm8-HfYShCPyhgiMPZR9oZ5UrHXoPcOqXrQuFWMdntTNdG9R3WHdjhJci9zYGS4wuvjdh0j3qVsHR-znJg9mFRkoueif_SI8958fAUhwUXFQqYieI/s1600/Analytics+Configurado+Incorretamente1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="105" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8ORlxIn63iHSMlOQH2ntJvgyY-FKm8-HfYShCPyhgiMPZR9oZ5UrHXoPcOqXrQuFWMdntTNdG9R3WHdjhJci9zYGS4wuvjdh0j3qVsHR-znJg9mFRkoueif_SI8958fAUhwUXFQqYieI/s400/Analytics+Configurado+Incorretamente1.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div style="text-align: justify;">
Mas atenção, esse meio de configuração não funciona para os templates personalizados. Fizemos alguns testes e esse tipo de configuração só funcionou para os templates padrão do Blogger e de visualizações dinâmicas. Para os personalizados continua valendo a configuração com inserção manual do código no html do blog.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
E ai, o que você achou desta opção na nova interface?</div>
</div>

Como configurar o Analytics nos templates de visualizações dinâmicas e layout do Blogger

Os templates de visualizações dinâmicas são modernos, clean e se tornaram uma nova aposta para quem gosta de novidades. Tanto que alguns us...

Continue Lendo >>

10:00

Como usar os templates de visualizações dinâmicas

<div style="text-align: justify;">
Um dos recursos mais legais dessa nova fase do Blogger, são os <a href="http://www.dicasblogger.com.br/2011/04/novas-opcoes-de-visualizacoes.html" target="_blank">templates de visualizações dinâmicas</a>. Eles são feitos usando AJAX, HTML5 e CSS , que são a tendência atual para design de páginas web.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0AOVSF4-j2KoakE40b8Yg87hasUBzY_EIsp7Scg7y5CgXiiUxcpVdHf-c9vmfKOx_okx7oBpQyIK5cnzaRBXc5EXIRcvLrVe7ym59CMM2ZPKcpjn0UuzoNghr40QPUfUs08nZ_gcP_Vlk/s1600/visualizacoes-dinamicas.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Templates de visualização dinâmica" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0AOVSF4-j2KoakE40b8Yg87hasUBzY_EIsp7Scg7y5CgXiiUxcpVdHf-c9vmfKOx_okx7oBpQyIK5cnzaRBXc5EXIRcvLrVe7ym59CMM2ZPKcpjn0UuzoNghr40QPUfUs08nZ_gcP_Vlk/s1600/visualizacoes-dinamicas.png" title="Templates de visualização dinâmica" /></a></div>
<div style="text-align: justify;">
Qualquer blog do Blogger pode ser visto dinamicamente. Basta digitarmos "view," após o endereço do blog. Exemplo:<a href="http://www.dicasblogger.com.br/view/" target="_blank"> http://www.dicasblogger.com.br/view/</a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Além disso, é possível usarmos um dos 7 modelos disponíveis em nossos blogs. Todos eles possuem um visual <i>clean</i>, moderno e arrojado.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
O modelo Magazine, por exemplo, confere um visual de site e o Snapshot fica muito bom em blogs de fotografias. Vejam um exemplo no <a href="http://www.templates.dicasblogger.com.br/?view=snapshot" target="_blank">DB Templates</a>:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMudpNxKIzR53pavgApBLb5W3nr5wrZ9hTlIwO01o0Vf_J__1jLJolXYORgomypc66prCRRPM6aVGvjmP6w0y1tpT5qLa4hpv2Y7qAXLpWRLXs9Bg62VwiKtx-JWm5BCRO86uSLoGlWREz/s1600/snapshot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Snapshot" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMudpNxKIzR53pavgApBLb5W3nr5wrZ9hTlIwO01o0Vf_J__1jLJolXYORgomypc66prCRRPM6aVGvjmP6w0y1tpT5qLa4hpv2Y7qAXLpWRLXs9Bg62VwiKtx-JWm5BCRO86uSLoGlWREz/s1600/snapshot.png" title="Snapshot" /></a></div>
<div style="color: #e69138;">
<b>Como colocar um template de visualização dinâmica no blog</b></div>
<ol>
<li>Entre em "modelo" e clique em "personalizar"</li>
<li>Escolha um dos modelos de visualização dinâmica</li>
<li>Clique em "avançado" para editar algumas cores ( não tem muitas opções)</li>
<li>Ao término, clique no botão "aplicar ao blog"</li>
</ol>
<div style="color: #e69138;">
<b>Como colocar gadgets na barra lateral</b><br />
<br />
<div style="color: #444444;">
<div style="text-align: justify;">
Nem todos os gadgets estão disponíveis para as visualizações dinâmicas. 
Nesses templates, temos apenas a opção de uma barra lateral que aparece 
quando passamos o mouse sobre ela. Vejam exemplo na imagem abaixo.</div>
</div>
<div style="color: #444444;">
<br /></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigjzT242tTgwbjGjIQ6aStuwUi3c8Gec48RnxmuCLGZgXoXj6tWQH1f6mwi2twXv9cLx7zd7xzQbJfGkxQ_au_q6sYPp22lO4oBebplHV2hfrOhDhlIlfglXaEatgYOdjuFORRXiMY-arM/s1600/barra-lateral.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Gadgets Barra Lateral" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigjzT242tTgwbjGjIQ6aStuwUi3c8Gec48RnxmuCLGZgXoXj6tWQH1f6mwi2twXv9cLx7zd7xzQbJfGkxQ_au_q6sYPp22lO4oBebplHV2hfrOhDhlIlfglXaEatgYOdjuFORRXiMY-arM/s1600/barra-lateral.png" title="Gadgets Barra Lateral" /></a></div>
<br />
<br />
<div style="text-align: justify;">
<b>Para adicionar gadgets a barra lateral</b>, entre em "layout" e clique em "adicionar gadget". Os gadgets disponíveis aparecerão com a mensagem "disponível para visualizações dinâmicas"</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVt-we9r7ax2vy4XLg0JVQZQIN8pop7slOA9bPY98UjpMCpwr69BBLEhyK1V0e_h7UUApei2KzVoBb65xf3B2tgb2nG4xfCCVx6E0dKBt6kRI0XXNNqI4tvegCdNaSH-PPhMRQwenfwu5r/s1600/gadgets.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Gadgets" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVt-we9r7ax2vy4XLg0JVQZQIN8pop7slOA9bPY98UjpMCpwr69BBLEhyK1V0e_h7UUApei2KzVoBb65xf3B2tgb2nG4xfCCVx6E0dKBt6kRI0XXNNqI4tvegCdNaSH-PPhMRQwenfwu5r/s1600/gadgets.png" title="Gadgets" /></a></div>
<div style="text-align: justify;">
Estou usando templates de visualizações dinâmicas em 3 dos meus blogs e notei que ao mudar de um template personalizado, para um dinâmico, todos os gadgets foram mantidos, mas - obviamente - nem todos funcionam. O único problema que encontrei foi referente ao serviços de estatísticas. O código do Google Analytics, por exemplo, parou de funcionar e, infelizmente, não foi possível inserir via HTML pois essa função encontra-se desabilitada nos templates de visualização dinâmica.<br />
<br />
<b>Atualização:</b> A Priscila descobriu como usar o Analytics nos templates de visualizações dinâmica. <a href="http://www.dicasblogger.com.br/2012/05/configurar-analytics-nos-templates-de.html" target="_blank">Clique aqui</a> para ler o post. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Apesar de lindos, esses modelos não são recomendados para blogs que necessitam de recursos mais avançados. Pelo que pude notar, o Adsense pode ser inserido apenas através do painel do Blogger, na guia "ganhos".<br />
<br />
Para desfazer o uso desses templates, basta escolher um dos modelos padrão ou enviar um modelo personalizado.<br />
<ul>
<li><a href="http://www.dicasblogger.com.br/2012/05/como-mudar-o-template-na-nova-interface.html" target="_blank">Como mudar o template no novo Blogger </a></li>
</ul>
</div>
<br />

Como usar os templates de visualizações dinâmicas

Um dos recursos mais legais dessa nova fase do Blogger, são os templates de visualizações dinâmicas . Eles são feitos usando AJAX, HTML5 e ...

Continue Lendo >>

10:58

Gadgets agora disponíveis nas Visualizações Dinâmicas

Um dos recursos mais pedidos pelos usuários que usam os <a href="http://www.dicasblogger.com.br/2011/04/novas-opcoes-de-visualizacoes.html" target="_blank">Templates de Visualização Dinâmica</a> no <a href="http://groups.google.com/a/googleproductforums.com/forum/#%21forum/blogger-pt" target="_blank">Fórum do Blogger</a> era a possibilidade de manter seus gadgets nos templates. Felizmente o Blogger deu ouvido aos usuários e implementou este recurso. Vejam o <a href="http://buzz.blogger.com/2012/02/dynamic-views-update-3-gadgets.html" target="_blank">post oficial no Blogger Buzz sobre a novidade</a>.  <br />
<br />
<a href="http://lh3.ggpht.com/-AvTW4iwShy0/T0zF9IBSeBI/AAAAAAAAClE/alWImaZta5Y/s1600-h/gadgets_visualizacao_dinamica%25255B3%25255D.png"><img alt="gadgets_visualizacao_dinamica" border="0" height="359" src="http://lh5.ggpht.com/-p-ZV3NMcFt0/T0zF9vvCz1I/AAAAAAAAClM/zd_9XA3KK-A/gadgets_visualizacao_dinamica_thumb%25255B1%25255D.png?imgmax=800" style="background-image: none; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="gadgets_visualizacao_dinamica" width="161" /></a>Agora, nas Visualizações Dinâmicas, temos os gadgets alinhados do lado esquerdo do blog em um elemento retrátil que mantem o visual <i>dinâmico</i> do template. Um porém desta novidade é que nem todos os gadgets estarão disponíveis; segundo as informações do Blogger Buzz, serão exibidos apenas os gadgets <b>Arquivo do blog</b>, <b>Seguidores</b>, <b>Marcadores</b> (tags), <b>Perfil</b>, <b>Links de Inscrição e Seguir por e-mail</b> (se os dois gadgets estiverem instalados serão transformados em um único gadget) e a <b>Lista de links</b>; todos os outros gadgets do Blogger ou gadgets de terceiros não serão exibidos.  <br />
<br />
É importante lembrar que para poder usar as Visualizações Dinâmicas o seu blog deve se público, liberado para qualquer pessoa acessar e deve ter os feeds completos liberados.

Gadgets agora disponíveis nas Visualizações Dinâmicas

Um dos recursos mais pedidos pelos usuários que usam os Templates de Visualização Dinâmica no Fórum do Blogger era a possibilidade de mant...

Continue Lendo >>

09:24