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!!
Enquanto voce pensa no seu negócio, a ViaMobile pensa no seu E-mail Marketing, por isso incluimos em nossos planos de E-mail Marketing a dedicação total para transformar seu design* em um E-mail profissional, com as melhores pontuações nos teste anti-spam, tudo compartilhado com as principais redes sociais. Conheça-nos www.viamobile.com.br
ResponderExcluirPior que entar pegar o gancho de outra pessoa para fazer propaganda de seu negócio é fazer isso de maneira incorreta. coloquei esse endereço na barra do navegador e não abre serviço nenhum de marketing. Inove cabelo e estética
ExcluirCom certeza, se a intenção do cara era vender o peixe dele, ele jogou as chances fora, o site não apresenta o produto que ele tá vendendo, e não tem um padrão de busca...
ExcluirFecha a empresa, e volte a estudar!
muitooo bom, obrigado!!
ResponderExcluircara, parabéns, bem direto e simples, deu certo aqui, aba
ResponderExcluirDicas muito boas, assim fica fácil pois eh soh montar esse html numa ferramenta tipo o sistema da Target Box (www.targetbox.com.br(, que permite colar esse html.
ResponderExcluirValew!
Moreno
Olá!
ResponderExcluirFiz exatamente com descreveu acima, porém meu email marketing ficou com a arte quebrada onde havia utilizado a Slice Tool no Photoshop...
O que devo fazer, por gentileza.
Agradeço desde já,
Olá, se for o que estou pensando, neste link tem a solução para o seu caso: http://www.targetbox.com.br/page/tutoriais/como-evitar-que-o-gmail-adicione-margem-e-borda-nas-imagens
ExcluirMinhas peças de email marketing tinham este "espaço" entre as imagens no Gmail e no Hotmail, e consegui resolver após aplicar o conteúdo do link citado.
Espero que o ajude!!
Saudações
Miguel
Uma vez que a imagem é gerada com o link, de onde você tirou o código HTML?
ResponderExcluircheguei até o passo em que tem que linkar as imagens para o servidor gratuito. Quando salvo o html no bloco de notas linkando para as imagens, as imagens não abrem corretamente. Será que você poderia me ajudar a ver o que estaria dando errado?
ResponderExcluirUsando as dicas daqui, comecei rapidamente a ver os resultados na minha loja virtual: www.delbox.com.br
ResponderExcluirOi, tudo bem?
ResponderExcluirNão compreendí muito bem qual é a vantagem de fazer isto e não utilizar uma ferramenta de email marketing.
Eu encontrei este passo a passo para fazer com a Mailchimp e achei facil, tem templates para escolher e tudo mais:
http://www.nuvemshop.com.br/blog/como-criar-um-email-marketing-via-mailchimp/
Tal vez não compreendi bem o artigo :S
Abraços,
José
Depois de criado todo o código pelo próprio Photoshop, e ter inserido os links como faço para enviar o e-mail marketing de maneira a não sair o código e sim a imagem?
ResponderExcluirAbra seu navegador e faça login em sua conta do Gmail (gmail.com) e clique em "Escrever" para criar uma nova mensagem. Escreva como desejar e depois clique com o lado direito do mouse onde deseja que o código HTML apareça em sua mensagem. Clique em "Colar". O código HTML aparecerá na mensagem.
Excluirhttp://www.ehow.com.br/inserir-html-gmail-como_41322/
Olá José,
ResponderExcluirObrigado pelo comentário, esse post ensina vc a criar o seu próprio template no formato que vc desejar e não os pré prontos das ferramentas. Agora para quem os templates da ferramenta servir ótimo, fica mais fácil ainda. Conheço a ferramenta do mail chimp, é uma boa para envio e gerenciamento das campanhas de email marketing.
Abraços,
Ricardo Nazar
Compreendi! Obrigado :)
ExcluirOlá Miguel,
ResponderExcluirObrigado pelo comentário. Para que apareça a imagem do seu email marketing ao invés do código vc deverá inserir a imagem em um servidor, para isso siga o passo seis do post acima.
abraços,
Ricardo Nazar
Obrigada pelo tutorial, porém faltou umas informações importantes pra quem tá começando. Primeiro, que versão do PS vc usa e o nome da ferramenta de corte de imagem, que é SLICE TOOL (K), na barra de ferramenta do lado esquerdo do programa. E também faltou como inserir a tag no e-mail depois que está pronto.
ResponderExcluirOlá, parei justamente nesta etapa! depois de tudo pronto no Photoshop o que faço?
ExcluirPara realizar um bom marketing na web, utilize uma super lista atualizada!
ResponderExcluirhttp://produto.mercadolivre.com.br/MLB-534895458-lista-segmentada-400-milhoes-de-e-mails-atualizados-_JM
Muito bom texto, me ajudou muito, parabéns!
ResponderExcluirOlá, tudo bem?
ResponderExcluirEu trabalho com um Macbook Pro, e fiz a arte no Photoshop e fiz todo o processo para criar o html.
Quando abro o AppleScript para colocar o endereço absoluto, não consigo salvar pois aparece o escrito:
Erro de Sintaxe Um(a) “<” não pode ser colocado aqui.
O que posso fazer para conseguir finalizar o trabalho?
Obrigado!
Olá
ResponderExcluirTeho alguns blogs e seus artigos têm me inspirado e muito,Obrigada por partilhar seus conhecimetos com leigos assim como eu.
Desculpem os erros de escrita no comentário anterior,meu teclado estava com problemas e ao invés de clicar em visualizar cliquei em publicar
ResponderExcluirÓtima dica eu ja seguia esse blog mas sempre tive duvida qual plataforma escolher para minha campanha para os e-mails eu encontrei na internet um curso e-goi dominado excelente.
ResponderExcluir
ResponderExcluirMuito obrigado excelente tutorial
Confira nosso blogs
Abaixe lindas moldura para suas fotos com nosso site
http://www.photoshoponline.inf.br/