O que \u00e9 taxa de rejei\u00e7\u00e3o (Bounce Rate)?<\/span><\/p>\n Antes de mostrar como reduzir a taxa de rejei\u00e7\u00e3o exibindo barras laterais e widgets relevantes ao conte\u00fado, vamos primeiro definir a taxa de rejei\u00e7\u00e3o <\/a>(Bounce Rate) <\/a>.<\/p>\n A taxa de rejei\u00e7\u00e3o se refere \u00e0 porcentagem de visitantes do site que entram e saem em <\/strong>vez de ficar para explorar outras p\u00e1ginas em seu site. Para reduzir a taxa de rejei\u00e7\u00e3o, voc\u00ea precisa aumentar o envolvimento e isto lhe diz muito sobre a usabilidade do seu site. Quando um visitante acha seu conte\u00fado \u00fatil, ele fica e est\u00e1 disposto a explorar o site para obter conte\u00fado ainda mais \u00fatil. Isto, por sua vez, lhe d\u00e1 uma taxa de convers\u00e3o maior. Quanto mais tempo seus visitantes permanecerem em seu site, maior ser\u00e1 a probabilidade de mais vendas, inscri\u00e7\u00f5es e receita publicit\u00e1ria.<\/p>\n \u00c9 claro que voc\u00ea quer que eles permane\u00e7am por mais tempo, portanto voc\u00ea deve ter algo que os impe\u00e7a de sair muito cedo — conte\u00fado \u00fatil.<\/p>\n\n Voc\u00ea n\u00e3o alcan\u00e7a a usabilidade do site apenas fornecendo conte\u00fado \u00fatil aos visitantes do seu site. Voc\u00ea tamb\u00e9m tem que otimizar as ferramentas que exibe em cada p\u00e1gina de tal forma que elas interajam com eles. Al\u00e9m disso, essas ferramentas tamb\u00e9m devem ser relevantes ao conte\u00fado que est\u00e1 sendo usado em uma determinada p\u00e1gina.<\/p>\n As ferramentas a que me refiro s\u00e3o a barra de navega\u00e7\u00e3o e todas as \u00e1reas ampliadas em uma determinada p\u00e1gina, incluindo a barra lateral. Enquanto para muitos, a barra de navega\u00e7\u00e3o desempenha o maior papel para garantir o engajamento do usu\u00e1rio, voc\u00ea n\u00e3o pode tomar por garantido o poder de suas \u00e1reas widget. Isto \u00e9 especialmente verdadeiro quando voc\u00ea est\u00e1 ciente das muitas maneiras diferentes que o WordPress oferece para que voc\u00ea possa facilmente assumir o controle delas.<\/p>\n A barra lateral \u00e9 o principal suporte de lugar que pode fazer ou quebrar a usabilidade do seu site. Por qu\u00ea? — Porque \u00e9 conveniente simplesmente colocar os widgets que voc\u00ea gosta na barra lateral sem pensar se tais widgets s\u00e3o ou n\u00e3o relevantes para o conte\u00fado principal.<\/p>\n Uma barra lateral do WordPress<\/a>\u00a0que \u00e9 relevante ao conte\u00fado principal refere-se a uma que exibe widgets cuidadosamente escolhidos para aparecer ao lado de conte\u00fado espec\u00edfico em uma determinada p\u00e1gina em termos de sua aplicabilidade. Por exemplo, uma barra lateral relevante a uma publica\u00e7\u00e3o espec\u00edfica no blog conteria widgets tais como opt-ins para newsletter e publica\u00e7\u00f5es relacionadas.<\/p>\n As telas abaixo mostram a diferen\u00e7a entre a barra lateral no site MarketingProfs.com<\/a>.<\/p>\n Neste artigo do blog, MarketingProfs est\u00e1 mostrando os seguintes widgets: sugest\u00f5es, links de assinatura e os artigos mais populares.<\/p>\n Neste artigo do blog, MarketingProfs est\u00e1 mostrando os seguintes widgets: opt-in de assinatura, widgets de m\u00eddia social, os artigos mais populares.<\/p>\n As barras laterais ajudam os visitantes do site a decidir qual a\u00e7\u00e3o tomar em seguida. Por exemplo, a partir de uma p\u00e1gina de postagem no blog, eles podem optar por se inscrever para a assinatura da newsletter. Se voc\u00ea tiver v\u00e1rias categorias para boletins informativos, voc\u00ea pode exibir um widget de assinatura para a categoria em que o post do blog pertence. Cada widget leva o nome da categoria espec\u00edfica, para que os leitores saibam exatamente a que est\u00e3o se inscrevendo. Veja as imagens abaixo tiradas do The Washington Post<\/a>.<\/p>\n As barras laterais relevantes para o conte\u00fado tamb\u00e9m ajudam na comercializa\u00e7\u00e3o direcionada<\/strong>. Voc\u00ea pode criar uma barra lateral dedicada aos usu\u00e1rios do site que voc\u00ea agrupa com base em informa\u00e7\u00f5es demogr\u00e1ficas. Por exemplo, voc\u00ea pode fazer barras laterais para as vers\u00f5es em v\u00e1rios idiomas do seu site, exibir nelas links de contato dependendo do local, ou mostrar promo\u00e7\u00f5es de produtos com base em seus interesses. Ou voc\u00ea cria diferentes barras laterais com base na categoria do seus artigos no blog.<\/p>\n O Washington Post tem o “Must Reads” como uma de suas categorias para boletins informativos. O widget aparece neste artigo intitulado “Salmonella-tainted chicken killed 1, sickened 17 in a multi-state outbreak, diz o CDC” e todos os outros artigos pertencentes \u00e0 mesma categoria.<\/p>\n Por outro lado, este artigo t\u00e9cnico, “Facebook e executivos do Twitter para testemunhar ao Congresso na pr\u00f3xima semana”, do The Washington Post, tem o widget “Alertas de not\u00edcias t\u00e9cnicas por e-mail” exibido na barra lateral, direcionado aos leitores de hist\u00f3rias relacionadas \u00e0 tecnologia.<\/p>\n Barras laterais com widgets relevantes para o conte\u00fado tamb\u00e9m podem ajudar a melhorar a SEO<\/a>. Usar as tags de cabe\u00e7alho inteiras ou uma parte delas como t\u00edtulos de widgets pode criar um impacto pequeno mas significativo na otimiza\u00e7\u00e3o dos mecanismos de busca<\/a>.<\/p>\n O primeiro passo para criar barras laterais relevantes ao conte\u00fado \u00e9 decidir o que \u00e9 relevante e o que n\u00e3o \u00e9. Decidir quais widgets devem aparecer em uma p\u00e1gina ou post requer um entendimento profundo do prop\u00f3sito e por que voc\u00ea criou aquela p\u00e1gina ou post em primeiro lugar.<\/p>\n Por exemplo, voc\u00ea criou uma p\u00e1gina de produto n\u00e3o apenas para explicar as caracter\u00edsticas, benef\u00edcios e pre\u00e7os do produto. Voc\u00ea tamb\u00e9m o fez para levar os visitantes a compr\u00e1-lo ou a considerar produtos similares ou relacionados. Al\u00e9m disso, voc\u00ea pode querer exibir as melhores avalia\u00e7\u00f5es e as melhores cr\u00edticas do produto que podem ajud\u00e1-los a decidir compr\u00e1-lo. Ou, voc\u00ea pode querer ajud\u00e1-los a se conectar a um representante de vendas para responder perguntas. Qualquer que seja a a\u00e7\u00e3o que eles tomem, a p\u00e1gina deve mostrar-lhes o caminho para faz\u00ea-lo. A barra lateral \u00e9 um dos melhores lugares para colocar aqueles bot\u00f5es de chamada para a\u00e7\u00e3o. Portanto, a barra lateral torna-se uma ferramenta muito poderosa para manter seus visitantes engajados em seu website.<\/p>\n Kinsta, por exemplo, usa diferentes CTAs em seu blog com base na categoria do post do blog. Isto ajuda a garantir que as mensagens sejam direcionadas e relevantes para o t\u00f3pico do artigo.<\/p>\n Al\u00e9m disso, decidir o que n\u00e3o colocar na barra lateral \u00e9 t\u00e3o importante quanto decidir o que colocar ali. A densidade da barra lateral e outras \u00e1reas de widget na p\u00e1gina contribui para sua apar\u00eancia geral. A elimina\u00e7\u00e3o de widgets irrelevantes ou redundantes aborda a mesma quest\u00e3o com taxas de rejei\u00e7\u00e3o. Na verdade, alguns sites podem descobrir que nenhuma barra lateral \u00e9 um caminho melhor.<\/p>\n Talvez voc\u00ea tenha jogado um monte de widgets em sua barra lateral porque acha que eles podem ser \u00fateis para seus visitantes. Entretanto, uma p\u00e1gina com apar\u00eancia superlotada pode desligar um cliente em potencial. Se houver muita coisa acontecendo na p\u00e1gina, os visitantes podem perder o foco sobre o que os fez vir em primeiro lugar. Com isto, quero dizer muitos widgets de an\u00fancios externos ou muitos links de produtos.<\/p>\n Simplificando, decidir qual conte\u00fado da barra lateral \u00e9 relevante ou n\u00e3o \u00e9 cr\u00edtico para aumentar o envolvimento do usu\u00e1rio.<\/p>\n Depois de decidir o que colocar na barra lateral, voc\u00ea pode fazer com que certos widgets se destaquem dos demais. Uma maneira \u00e9 faz\u00ea-los aparecer em outras \u00e1reas de widgets, tais como o rodap\u00e9. Outra maneira \u00e9 faz\u00ea-los fixos e flutuando sobre a p\u00e1gina enquanto os usu\u00e1rios rolam. Isto permite que os usu\u00e1rios interajam instantaneamente com eles sem ter que rolar para cima ou para baixo.<\/p>\n Agora que j\u00e1 discutimos a import\u00e2ncia de quais widgets voc\u00ea usa, o pr\u00f3ximo passo \u00e9 escolher um m\u00e9todo para criar essas barras laterais relevantes ao conte\u00fado. Aqui est\u00e3o duas maneiras:<\/p>\n Uma das maneiras mais f\u00e1ceis de controlar a visibilidade do widget em sua barra lateral \u00e9 usando um plugin WordPress. Um plugin como o Widget Options<\/a> permite fazer exatamente isso com alguns simples cliques. Voc\u00ea pode mostrar ou ocultar o conte\u00fado da barra lateral por postagem ou p\u00e1gina com condi\u00e7\u00f5es, incluindo categorias, tags, nomes de p\u00e1ginas, etc.<\/p>\n O plug-in Widget Options tem atualmente mais de 70.000 instala\u00e7\u00f5es ativas com uma impressionante classifica\u00e7\u00e3o de 5 das 5 estrelas. Voc\u00ea pode baix\u00e1-lo do reposit\u00f3rio WordPress<\/a> ou procurar por “op\u00e7\u00f5es de widgets” dentro do seu painel de controle do WordPress em “Plugins \u2192 Adicionar novo”. Depois clique em “Instalar agora” e ative o plugin.<\/p>\n Uma vez que voc\u00ea tenha o plugin Widget Options instalado e ativado, voc\u00ea pode facilmente esconder um widget de uma p\u00e1gina espec\u00edfica em apenas alguns cliques. Para ilustrar, aqui est\u00e1 a captura de tela de um widget de cupom. Sob as configura\u00e7\u00f5es do widget, h\u00e1 agora uma op\u00e7\u00e3o de visibilidade: voc\u00ea pode escolher entre esconder e mostrar este widget nas p\u00e1ginas selecionadas.<\/p>\n Voc\u00ea tamb\u00e9m pode esconder widgets de postagens de blogs usando tags condicionais. Usando Op\u00e7\u00f5es de Widgets, este processo requer mais alguns passos do que simplesmente esconder-se das p\u00e1ginas. Voc\u00ea precisa primeiro localizara identifica\u00e7\u00e3o do post<\/a>, assim como dever\u00e1 incluir nas tags condicionais onde voc\u00ea quer esconder o post.<\/p>\n Para encontrar o ID do correio, navegue at\u00e9 o correio e flutue (n\u00e3o clique) sobre a op\u00e7\u00e3o “Editar correio” em sua barra de ferramentas de administra\u00e7\u00e3o do WordPress. Na parte inferior esquerda do seu navegador voc\u00ea deve ver o n\u00famero de identifica\u00e7\u00e3o do post.<\/p>\n Uma vez que voc\u00ea tenha a(s) identifica\u00e7\u00e3o(\u00f5es) postal(is), voc\u00ea pode utiliz\u00e1-la(s) com as seguintes etiquetas condicionais.<\/p>\n Esconder um Widget de m\u00faltiplos postes:<\/strong><\/p>\n Esconder um Widget de um \u00fanico poste:<\/strong><\/p>\n No widget que voc\u00ea quer que seja escondido do correio, v\u00e1 para a aba “Logic” e insira a tag como mostrado abaixo.<\/p>\n Al\u00e9m disso, caso voc\u00ea precise usar um t\u00edtulo de widget relevante para as etiquetas de cabe\u00e7alho de uma p\u00e1gina ou postagem, voc\u00ea pode colocar tantas c\u00f3pias desse widget quantas forem necess\u00e1rias e fazer um t\u00edtulo \u00fanico para cada uma delas.<\/p>\n Voc\u00ea tamb\u00e9m pode restringir a visibilidade de widgets quando uma p\u00e1gina ou postagem \u00e9 visualizada em tipos de dispositivos espec\u00edficos.<\/p>\n Devido ao tamanho limitado da tela, \u00e9 f\u00e1cil fazer com que uma p\u00e1gina ou postagem pare\u00e7a lotada quando vista de um dispositivo m\u00f3vel, como um smartphone ou um tablet. Queremos ter certeza de que cada p\u00e1gina n\u00e3o pare\u00e7a muito densa tanto em uma visualiza\u00e7\u00e3o desktop quanto em um celular. Entretanto, tamb\u00e9m queremos aproveitar a tela maior da \u00e1rea de trabalho para exibir widgets relevantes no maior n\u00famero poss\u00edvel de \u00e1reas de widgets.<\/p>\n Por exemplo, queremos que o e-mail opt-in apare\u00e7a tanto na barra lateral quanto no rodap\u00e9 da p\u00e1gina. Quando visto no celular, por outro lado, queremos nos livrar de widgets repetitivos. As op\u00e7\u00f5es de widgets permitem esconder os widgets na visualiza\u00e7\u00e3o m\u00f3vel.<\/p>\n Outra maneira de controlar a visibilidade dos widgets \u00e9 torn\u00e1-los fixos, o que significa que eles seguir\u00e3o os usu\u00e1rios como o scroll para cima e para baixo em uma p\u00e1gina ou post de blog. Se voc\u00ea mantiver sua barra lateral limpa, ou aplicar isto apenas a um ou dois widgets, n\u00e3o precisa se preocupar em tornar isto muito intrusivo. Veja a captura de tela abaixo. O WPMU Dev tem uma \u00f3tima aplica\u00e7\u00e3o disto em seu blog.<\/p>\n Os widgets de a\u00e7\u00f5es sociais est\u00e3o flutuando sobre a p\u00e1gina sem ofuscar o conte\u00fado principal e incentivam os visitantes a agir sempre que estiverem prontos para faz\u00ea-lo. Isto significa que eles n\u00e3o precisam voltar para a \u00e1rea da barra lateral para interagir com estes widgets.<\/p>\n Widget Options oferece uma op\u00e7\u00e3o onde voc\u00ea pode fazer qualquer widget fixo e seguir os visitantes enquanto eles rolam. Voc\u00ea pode escolher fazer todos os widgets de barra lateral fixos ou apenas escolher um ou dois que voc\u00ea acha que precisam de mais exposi\u00e7\u00e3o do que os demais.<\/p>\n Sua segunda op\u00e7\u00e3o seria criar manualmente barras laterais personalizadas atrav\u00e9s de codifica\u00e7\u00e3o. Isto \u00e9 um pouco mais tedioso do que usar um plugin de terceiros que lhe permite criar barras laterais em apenas alguns cliques. No entanto, como o WordPress oferece muitas op\u00e7\u00f5es de codifica\u00e7\u00e3o, voc\u00ea pode optar por ele. Desta forma, voc\u00ea pode criar exatamente o que voc\u00ea quer.<\/p>\n Para come\u00e7ar, voc\u00ea precisa registrar uma \u00e1rea ampliada. Em seguida, salve-a e carregue-a em seu servidor para torn\u00e1-la acess\u00edvel a partir do menu widget. Para fazer isso, voc\u00ea precisar\u00e1 inserir o seguinte c\u00f3digo no arquivo function.php do seu tema filho (Child Theme).<\/a> Ou voc\u00ea pode usar um plugin gratuito como o Code Snippets<\/a>.<\/p>\n Ele vem com alguns elementos que voc\u00ea pode mudar para atender \u00e0s suas necessidades. Veja o exemplo a seguir:<\/p>\n O pr\u00f3ximo passo \u00e9 tornar a barra lateral vis\u00edvel em algum lugar do site. Para que funcione, adicione-a ao(s) arquivo(s) modelo(s) dos locais que voc\u00ea deseja que sejam vis\u00edveis. D\u00ea uma olhada no c\u00f3digo abaixo que visa fazer com que a barra lateral apare\u00e7a apenas nas p\u00e1ginas.<\/p>\n Para isso, o colocamos dentro do arquivo page.php de nosso tema. No caso do tema dos Vinte e Dezessete, isso significa que ficaria assim:<\/p>\n O que eu mostrei aqui \u00e9 apenas uma pequena fra\u00e7\u00e3o de algumas maneiras de reduzir sua taxa de rejei\u00e7\u00e3o. As barras laterais, um dos lugares mais freq\u00fcentemente negligenciados nos websites, podem se tornar ferramentas poderosas para fazer com que os visitantes explorem seu website, aumentando assim a chance de convers\u00f5es. Criar barras laterais relevantes ao conte\u00fado n\u00e3o tem que ser dif\u00edcil, especialmente com todos os plugins f\u00e1ceis de usar no reposit\u00f3rio WordPress.<\/p>\n Al\u00e9m disso, como o compromisso \u00e9 uma das principais formas de reduzir a taxa de rejei\u00e7\u00e3o, para alcan\u00e7\u00e1-lo, \u00e9 necess\u00e1rio verificar usabilidade do seu site<\/a>.<\/p>\n In order to achieve usability, bear in mind that content is king. You start off with useful contents and pair them with the right sub-contents (the widgets, the links, your content-relevant sidebars) that will encourage them to explore your sites.<\/p>\n — Jeffrey Carandang | #WCAsia (@jeffreycarandng) November 1, 2018<\/a><\/p><\/blockquote>\nUsabilidade: A chave para reduzir a taxa de rejei\u00e7\u00e3o<\/h2>\n
O que s\u00e3o barras laterais din\u00e2micas do WordPress (relevantes para o conte\u00fado)?<\/h2>\n
P\u00e1gina de podcast (Screenshot A)<\/h3>\n
![\"Barra](\"https:\/\/kinsta.com\/wp-content\/uploads\/2018\/12\/dynamic-sidebar-A-screenshot.jpg\")
P\u00e1gina do artigo (Instant\u00e2neo B)<\/h3>\n
![\"Barra](\"https:\/\/kinsta.com\/wp-content\/uploads\/2018\/12\/dynamic-sidebar-B-screenshot.jpg\")
Como as barras laterais din\u00e2micas ajudam a reduzir a taxa de rejei\u00e7\u00e3o<\/h2>\n
![\"Dispositivo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2018\/12\/dynamic-sidebar-widget-A.jpg\")
![\"Dispositivo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2018\/12\/dynamic-sidebar-widget-B.jpg\")
Adicionando Widgets Relevantes \u00e0 Barra Lateral<\/h3>\n
![\"CTA](\"https:\/\/kinsta.com\/wp-content\/uploads\/2018\/12\/sidebar-widget-cta.jpg\")
Elimina\u00e7\u00e3o de Widgets n\u00e3o relacionados<\/h3>\n
Destacando Widgets Importantes<\/h3>\n
Pr\u00f3ximo passo: Escolha os melhores m\u00e9todos<\/h2>\n
Op\u00e7\u00e3o 1 – Visibilidade dos Widgets de Controle com um plugin WordPress<\/h3>\n
![\"Widget](\"https:\/\/kinsta.com\/wp-content\/uploads\/2018\/12\/widget-options-wordpress-plugin-1.png\")
<\/a>![\"Instalar](\"https:\/\/kinsta.com\/wp-content\/uploads\/2018\/12\/install-widget-options-plugin.jpg\")
Ocultando Widgets de uma p\u00e1gina espec\u00edfica<\/h3>\n
![\"Widget](\"https:\/\/kinsta.com\/wp-content\/uploads\/2018\/12\/hide-widget-on-certain-pages.jpg\")
Widgets restritivos de artigos espec\u00edficos<\/h3>\n
![\"WordPress](\"https:\/\/kinsta.com\/wp-content\/uploads\/2018\/12\/wordpress-find-post-ID.jpg\")
!is_single(array('Post ID', 'Post ID'))<\/code><\/pre>\n!is_single( 'Post ID' )<\/code><\/pre>\n![\"L\u00f3gica](\"https:\/\/kinsta.com\/wp-content\/uploads\/2018\/12\/wordpress-widget-logic.png\")
Ocultar Widgets nos Dispositivos M\u00f3veis<\/h3>\n
![\"Ocultar](\"https:\/\/kinsta.com\/wp-content\/uploads\/2018\/12\/hide-widget-on-mobile-devices.png\")
Fazer Widgets de barras laterais fixas<\/h3>\n
![\"Exemplo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2018\/12\/fixed-sidebar-widget.png\")
![\"Dispositivo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2018\/12\/fixed-sidebar-widget-scrolling.png\")
Op\u00e7\u00e3o 2 – Adicionar barras laterais personalizadas<\/h3>\n
<?php\n\/*\n* Create Custom Widget Area for Pages Only\n*\/\nfunction page_only_custom_sidebar() {\nregister_sidebar(\narray (\n'name' => __( 'For Pages Only', 'your-site' ),\n'id' => 'page-only-custom-sidebar',\n'description' => __( 'Contents to this widget area will be displayed on pages only.', 'your-site' ),\n'before_widget' => '<section id=\"%1$s\" class=\"widget %2$s\">',\n'after_widget' => \"<\/section>\",\n'before_title' => '<h3 class=\"widget-title\">',\n'after_title' => '<\/h3>',\n)\n);\n}\nadd_action( 'widgets_init', 'page_only_custom_sidebar' );\n?><\/code><\/pre>\n<?php if ( is_active_sidebar( 'page-only-custom-sidebar' ) && is_page() ) : ?>\n<aside id=\"secondary\" class=\"widget-area\" role=\"complementary\">\n<?php dynamic_sidebar( 'page-only-custom-sidebar' ); ?>\n<\/aside>\n<?php endif; ?><\/code><\/pre>\nSua vez: Como voc\u00ea reduz a taxa de rejei\u00e7\u00e3o?<\/h2>\n
\n