Enviar as campanhas por HTML é uma das melhores formas para aumentar a taxa de abertura dos emails (CTRs), pois facilita para seu email não ser considerado SPAM, e também te permite fazer um email visualmente mais bonito sem se preocupar com o tamanho das imagens, uma vez que a imagem estará em um servidor e não no corpo do email, o que ajuda a aumentar a taxa de cliques, assim, nesse artigo decidi falar como fazer um email marketing em HTML usando o Photoshop.
Segue os passos para criação, lembrando que se você não é bom nessa área contrate alguém que seja ou se especialize, mas quando digo contratar, não me refiro a contratar o "primo" ou "sobrinho" para fazer, a não ser que ele seja um profissional da área.
Vamos aos passos:
Vamos aos passos:
1 - Definir o tamanho e o formato do email
Esse é um ponto importante por mais simples que parece, pois você deverá definir o tamanho do email marketing, mas sempre pensando que essa imagem será vista por pessoas que usam diferentes tipos de computadores e com telas de tamanhos variados, o interessante é usar um tamanho máximo de 600 px de largura para que não dê barra de rolagem.
2 - Criar o conteúdo do email
Essa etapa deve ser feita por quem entende da ferramenta photoshop e seja criativo para se ter um bom resultado. Abaixo um imagem da arte que criamos para ilustrar (somente para ilustração e não foi feita pensando no design rss)
3 - Cortar as imagens do email
Após feito a arte do email você deverá cortá-la. para depois inserirmos um hiperlink em cada imagem. Nessa fase você poderá direcionar cada parte do email para uma landing page, o que deve ser feito corretamente para não prejudicar toda a campanha, pois se, por exemplo, em uma parte do email estiver a imagem de um Celular e quando a pessoa clicar ser direcionada para uma página onde se vende TV provavelmente ele não irá procurar o celular que queria. As pessoas querem cada vez mais informações rápidas e que as ajudem a encontrar o que estão buscando. No exemplo fizemos dois cortes, conforme imagem abaixo:
Obs: Mesmo que toda a imagem seja direcionada para uma mesma landing page, o recomendável e que faça pelo menos um corte para para diminuir o tempo de carregamento do email quando aberto e para seu email não ser barrado pelas ferramentas anti-spam.
4 - Editar as imagens, inserir a url e a tag alt
Clicando com o botão direito em cada imagem cortada você deverá clicar em Edit slice options para editar o código das imagens.
Agora em cada corte feito devemos inserir a url de destino, tag alt do email, a forma de como será aberta a imagem. Assim, é só preencher os campos desejados, como name, url destino (ao clicar na imagem), target - se você colocar _blank, quando a pessoa clicar no email irá abrir uma nova página e se ficar em branco será aberto na mesma página - a mensagem do texto e a alt. Como no exemplo:
5 - Salvar a imagem para web
Agora é a hora de salvar a imagem para web. Basta ir em File e clicar em save for web & devices, onde aparecerá a forma como você irá salvar sua imagem em HTML, ai é só escolher a extensão a ser salva.
Dê nome para pasta e escolha o formato HTML and images. Salve e está pronto sua imagen em HTML, agora é só colocar essa pasta no servidor para que quando as pessoas, de qualquer local (computador), receber seu email marketing consiga ver a imagem.
6 - Código gerado e imagem no servidor
Note que no código de exemplo a imagem é direcionada para a pasta “images/Teste-.jpg” que está no seu computador local, por isso a necessidade de se colocar a imagem em um servidor.
<html>
<head>
<title>Teste</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Untitled-1) -->
<table id="Table_01" width="576" height="808" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="http://venderon.blogspot.com" target="Testetarget"
onmouseover="window.status='Testetext'; return true;"
onmouseout="window.status=''; return true;">
<img src="images/Teste.jpg" width="576" height="488" border="0" alt="Testealt"></a></td>
</tr>
<tr>
<td>
<a href="http://venderon.blogspot.com" target="Teste2target"
onmouseover="window.status='teste2text'; return true;"
onmouseout="window.status=''; return true;">
<img src="images/teste2.jpg" width="576" height="320" border="0" alt="teste3alt"></a></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
Para que sua imagem seja vista de qualquer lugar você deverá hospedá-la em servidor, se quiser fazer um teste basta cadastrar em um servidor gratuito (atenção: após os testes o interessante é não usar servidores gratuitos e sim contratar um serviço de hospedagem ou uma empresa que presta esse serviço) e enviar as imagens para essa pasta, depois é só fazer uma mudança no código e chamar para o endereço onde está sua imagem. O que está em amarelo foi o que tive que inserir no código, outra forma seria ter usado uma tag para chamar a url. O código do email de exemplo já no servidor será:
<html>
<head>
<title>Teste</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Untitled-1) -->
<table id="Table_01" width="576" height="808" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="http://venderon.blogspot.com" target="Testetarget"
onmouseover="window.status='Testetext'; return true;"
onmouseout="window.status=''; return true;">
<img src="http://www.marketing.voudeargohost.net/images/Teste.jpg" width="576" height="488" border="0" alt="Testealt"></a></td>
</tr>
<tr>
<td>
<a href="http://venderon.blogspot.com" target="Teste2target"
onmouseover="window.status='teste2text'; return true;"
onmouseout="window.status=''; return true;">
<img src="http://www.marketing.voudeargohost.net/images/teste2.jpg" width="576" height="320" border="0" alt="teste3alt"></a></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
Se quiser que a campanha seja monitorada pelo Google analytics basta ir para o endereço do criador de url do Google e criar um url com o código de acompanhamento. Segue os campos necessários de preenchimento:
Após criado é só alterar a url no código criado trocando pela url que foi gerada no gerador do Google Analytics. No exemplo as mudanças foram no endereço http://venderon.blogspot.com como segue abaixo:
<a href="http://venderon.blogspot.com" target="Testetarget"
onmouseover="window.status='Testetext'; return true;"
onmouseout="window.status=''; return true;">
<img src="http://www.marketing.voudeargohost.net/images/Teste.jpg" width="576" height="488" border="0" alt="Testealt"></a>
<a href="http://venderon.blogspot.com/?utm_source=boletim&utm_medium=cpc&utm_campaign=teste" target="Testetarget"
onmouseover="window.status='Testetext'; return true;"
onmouseout="window.status=''; return true;">
<img src="http://www.marketing.voudeargohost.net/images/Teste.jpg" width="576" height="488" border="0" alt="Testealt"></a>
Para melhorar seu desempenho em email marketing leia esses artigos:
E ai gostou do artigo acima deixe seu comentário de suas experiências!!
<html>
<head>
<title>Teste</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Untitled-1) -->
<table id="Table_01" width="576" height="808" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="http://venderon.blogspot.com" target="Testetarget"
onmouseover="window.status='Testetext'; return true;"
onmouseout="window.status=''; return true;">
<img src="images/Teste.jpg" width="576" height="488" border="0" alt="Testealt"></a></td>
</tr>
<tr>
<td>
<a href="http://venderon.blogspot.com" target="Teste2target"
onmouseover="window.status='teste2text'; return true;"
onmouseout="window.status=''; return true;">
<img src="images/teste2.jpg" width="576" height="320" border="0" alt="teste3alt"></a></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
Para que sua imagem seja vista de qualquer lugar você deverá hospedá-la em servidor, se quiser fazer um teste basta cadastrar em um servidor gratuito (atenção: após os testes o interessante é não usar servidores gratuitos e sim contratar um serviço de hospedagem ou uma empresa que presta esse serviço) e enviar as imagens para essa pasta, depois é só fazer uma mudança no código e chamar para o endereço onde está sua imagem. O que está em amarelo foi o que tive que inserir no código, outra forma seria ter usado uma tag para chamar a url. O código do email de exemplo já no servidor será:
<html>
<head>
<title>Teste</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Untitled-1) -->
<table id="Table_01" width="576" height="808" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="http://venderon.blogspot.com" target="Testetarget"
onmouseover="window.status='Testetext'; return true;"
onmouseout="window.status=''; return true;">
<img src="http://www.marketing.voudeargohost.net/images/Teste.jpg" width="576" height="488" border="0" alt="Testealt"></a></td>
</tr>
<tr>
<td>
<a href="http://venderon.blogspot.com" target="Teste2target"
onmouseover="window.status='teste2text'; return true;"
onmouseout="window.status=''; return true;">
<img src="http://www.marketing.voudeargohost.net/images/teste2.jpg" width="576" height="320" border="0" alt="teste3alt"></a></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
7 – Monitorar a campanha pelo Google Analytics
Se quiser que a campanha seja monitorada pelo Google analytics basta ir para o endereço do criador de url do Google e criar um url com o código de acompanhamento. Segue os campos necessários de preenchimento:
Após criado é só alterar a url no código criado trocando pela url que foi gerada no gerador do Google Analytics. No exemplo as mudanças foram no endereço http://venderon.blogspot.com como segue abaixo:
O que era assim:
<a href="http://venderon.blogspot.com" target="Testetarget"
onmouseover="window.status='Testetext'; return true;"
onmouseout="window.status=''; return true;">
<img src="http://www.marketing.voudeargohost.net/images/Teste.jpg" width="576" height="488" border="0" alt="Testealt"></a>
Ficou assim:
<a href="http://venderon.blogspot.com/?utm_source=boletim&utm_medium=cpc&utm_campaign=teste" target="Testetarget"
onmouseover="window.status='Testetext'; return true;"
onmouseout="window.status=''; return true;">
<img src="http://www.marketing.voudeargohost.net/images/Teste.jpg" width="576" height="488" border="0" alt="Testealt"></a>
Para melhorar seu desempenho em email marketing leia esses artigos:
5 passos a serem seguidos para o melhor desempenho do email marketing
E ai gostou do artigo acima deixe seu comentário de suas experiências!!
