2014 VTEX On-line Applications VTEX TRIGGER ABANDONED CART TEMPLATE DO E-MAIL "A real vantagem competitiva de uma empresa consiste em ter informação sobre seus clientes que a concorrência não tem e ser capaz de transformar rapidamente esse conhecimento em ação. Ganha quem consegue estabelecer relacionamentos dominantes em seu mercado. Artigo de Don Peppers e Martha Rogers da Revista HSM Management de maio/jun. 2009.
1. TEMPLATES:... 3 1.1 Acessar o Admin da Loja...... 3 1.2 Acessar o Portal: Configurações Páginas de Vitrine(V2)... 3 1.3 Criar o template de Prateleira... 3 1.4 Criar o Template de Página...... 4 1.5 Criar o Layout... 4 2. REQUISITOS:.... 5 2.1 Montar o html com estrutura para e-mail;... 5 2.2 O código deve conter a tag :... 5 2.3 A URL do Template do e-mail criado ficará da seguinte forma: http://www.nomedaloja.com.br/crm/carrinho-abandonado;... 5 2.4 Para minimizar as dúvidas na criação dos Templates, utilizar os códigos modelos (Anexo I e II);... 5 2.5 Os links devem conter as informações de utm na query string, com escapamento do "&": utm_source=vtexcem&utm_medium=abandono_carrinho&utm_campaign=abandono;... 5 2.6 Para exibir "Olá, Fulano", utilizar o código: [[Olá, {!Nome}!]];... 5 2.7 Utilizar o seguinte código para exibir os produtos:... 5 2.8 Utilizar o seguinte código no botão para direcionar o Cliente direto para o carrinho com todos os produtos:. 5 3. ANEXOS:... 6 3.1 ANEXO I: TEMPLATE DE PRATELEIRA:... 6 3.2 ANEXO II: TEMPLATE DE PÁGINA:... 7 6 de fevereiro de 2014 2
1. TEMPLATES: 1.1 Acessar o Admin da Loja 1.2 Acessar o Portal: Configurações Páginas de Vitrine(V2) 1.3 Criar o template de Prateleira ANEXO I Depois de salvar o Template de Prateleira será gerado seu Id, no exemplo acima o Id desse Template de Prateleira é: bc7ad1a2-9aa3-445e-b6fe-b7986cf1f44a. 6 de fevereiro de 2014 3
1.4 Criar o Template de Página ANEXO II 1.5 Criar o Layout Obs.: Não precisa fazer nenhuma configuração na aba Configuração. 6 de fevereiro de 2014 4
2. REQUISITOS: 2.1 Montar o html com estrutura para e-mail; 2.2 O código deve conter a tag : <html xmlns="http://www.w3.org/1999/xhtml" HYPERLINK "http://www.vtex.com.br/2009/vtexcommon" xmlns:vtex="http://www.vtex.com.br/2009/vtex-common" xmlns:vtex.cmc="http://www.vtex.com.br/2009/vtex-commerce">; 2.3 A URL do Template do e-mail criado ficará da seguinte forma: http://www.nomedaloja.com.br/crm/carrinho-abandonado; 2.4 Para minimizar as dúvidas na criação dos Templates, utilizar os códigos modelos (Anexo I e II); 2.5 Os links devem conter as informações de utm na query string, com escapamento do "&": utm_source=vtexcem&utm_medium=abandono_carrinho&utm_campaign= Abandono; 2.6 Para exibir "Olá, Fulano", utilizar o código: [[Olá, {!Nome}!]]; 2.7 Utilizar o seguinte código para exibir os produtos: <vtex.cmc:productquerystringreferenceshelf layout="bc7ad1a2-9aa3-445e-b6fe-b7986cf1f44a" itemcount="100" columncount="3" showunavailable="true" istrackable="true" InternalCampaign="Carrinho abandonado" InternalPart="Prateleira destaque"/>. O campo "layout" deve conter o Id do Template de Prateleira que foi criado (item 1.3). 2.8 Utilizar o seguinte código no botão para direcionar o Cliente direto para o carrinho com todos os produtos: <a href="http://www.dominioloja.com.br/checkout/cart/{!rclastcart}&utm_source=vtexcem&utm_medium= VTEX&utm_ campaign=abandono > Obs.: os produtos são sempre exibidos na tela dentro de uma estrutura de UL + LI. 6 de fevereiro de 2014 5
3. ANEXOS: 3.1 ANEXO I: TEMPLATE DE PRATELEIRA: #set($id = $product.id) #set($uri = $product.uri) #set($escapedname = $product.htmlescapedname) #set($evaluationrate = $product.evaluationrate) <table width="100%"> <tr> <td valign="top" width="150"><p align="left" style="margin-top:0;"><a href="$uri?utm_source=vtexcem&utm_medium=abandono_carrinho&utm_campaign=abandono">$product.getimagetag(2)</a></p></td> <td valign="middle" align="left" width="300"> <a href="$uri?utm_source=vtexcem&utm_medium=abandono_carrinho&utm_campaign=abandono" style="text-decoration:none;"> <strong><font size="3" color="#ba0046" face="arial, Helvetica, sans-serif" style="text-align:left;"> <p style="margin-left:30px;">$product.name</p> </font></strong> </a> <p style="margin-left:30px;"> #if ($product.hasbestprice) <font color="#333333" face="arial, Helvetica, sans-serif" size="2" style="text-align:left;" >De: <del>$product.listprice</del></font> <br /> #end <font color="#333333" face="arial, Helvetica, sans-serif" size="2" style="text-align:left;" >Por:</font> <font color="#333333" face="arial, Helvetica, sans-serif" size="2" style="text-align:left;"> <strong>$product.bestprice</strong> <font color="#333333" size="2" face="arial, Helvetica, sansserif"> #if ($product.numbersofinstallment > 1) ${product.numbersofinstallment}x de $product.installmentvalue #else à vista #end </font> </font> </p> <p style="margin-left:30px;"><a href="$uri?utm_source=vtexcem&utm_medium=abandono_carrinho&utm_campaign=abandono"><img src="http://dominioloja.com.br/crm/bt-comprar-news-carrinho.jpg" alt="comprar" width="177" height="36" border="0"/></a></p> </td> Obs1.: Para usar esse exemplo de código, basta alterar o endereço da imagem do botão comprar que está destacado em vermelho. Obs2.: Se desejar alterar o tamanho da imagem do produto, altere na tag product.getimagetag. 6 de fevereiro de 2014 6
3.2 ANEXO II: TEMPLATE DE PÁGINA: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:vtex="http://www.vtex.com.br/2009/vtex-common" xmlns:vtex.cmc="http://www.vtex.com.br/2009/vtex-commerce"> <head> <title>aproveite a oportunidade e finalize sua compra!</title> <meta http- equiv="content-type" content="text/html; charset=iso-8859-1" /> </head> <body> <table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0" align="center"> <tr> <td><table width="697" cellpadding="0" cellspacing="0" border="0" href="http://www.dominioloja.com.br/?utm_source=vtexcem&utm_medium=abandono_carrinho&utm_campaign=abandono" target="_blank" style="text-decoration:none" alt="compre AGORA" title="compre AGORA"><img src="http://cdn.dominioloja.com.br/padrao2/00.jpg" alt="dominioloja.com.br" width="697" height="131" border="0" style="display:block" /></a></td> <table width="697" cellpadding="0" cellspacing="0" border="0" href="http://www.dominioloja.com.br/vestuariofeminino?utm_source=vtexcem&utm_medium=abandono_carrinho&utm_campaign=abandono" target="_blank"><img src="http://cdn.dominioloja.com.br/padrao2/01.jpg" width="228" height="23" border="0" /></a></td> href="http://www.dominioloja.com.br/vestuariomasculino?utm_source=vtexcem&utm_medium=abandono_carrinho&utm_campaign=abandono" target="_blank"><img src="http://cdn.dominioloja.com.br/padrao2/02.jpg" width="203" height="23" border="0" /></a></td> href="http://www.dominioloja.com.br/?utm_source=vtexcem&utm_medium=abandono_carrinho&utm_campaign=abandono" target="_blank"><img src="http://cdn.dominioloja.com.br/padrao2/03.jpg" width="151" height="23" border="0" /></a></td> href="http://www.dominioloja.com.br/busca/?fq=h:226&ps=48&utm_source=vtexcem&utm_medium=abandono_carrinho& utm_campaign=abandono" target="_blank"><img src="http://cdn.dominioloja.com.br/padrao2/04.jpg" width="115" height="23" border="0" /></a></td> <table width="697" cellpadding="0" cellspacing="0" border="0" href="http://www.dominioloja.com.br/?utm_source=abandono&utm_medium=vtex&utm_campaign=abandono" target="_blank" style="text-decoration:none" alt="compre AGORA" title="compre AGORA"><img src="http://cdn.dominioloja.com.br/abandono/news/00.jpg" alt="dominioloja.com.br" width="697" height="232" border="0" style="display:block" /></a></td> <table background="http://cdn.dominioloja.com.br/abandono/news/05.jpg" width="697" cellpadding="0" cellspacing="0" border="0" align="center"> <tr> <td style="padding:20px 60px 20px 60px"><font face="verdana" size="3" color="#5f5f5f"><b>[[olá, {!Nome}!]],</b></font><font face="verdana" size="2" color="#5f5f5f"><b><br/> <br/> Confira os produtos escolhidos por você.</b></font></td> <table cellpadding="0" cellspacing="0" border="0" <td background="http://cdn.dominioloja.com.br/abandono/news/04.jpg"><vtex.cmc:productquerystringreferenceshelf layout="44c0752d-c4bd- 4c3e-b186-97e15cd3f52d" itemcount="100" columncount="100" showunavailable="true" istrackable="true" InternalCampaign="Carrinho abandonado" InternalPart="Prateleira destaque"/></td> <tr> href=" http://www.dominioloja.com.br/checkout/cart/{!rclastcart}&utm_source=vtexcem&utm_medium=vtex&utm_campaign=abandono " target="_blank" style="text-decoration:none" alt="compre AGORA" title="compre AGORA"><img src="http://cdn.dominioloja.com.br/abandono/news/03.jpg" alt="dominioloja.com.br" width="697" height="75" border="0" style="display:block" /></a></td> 6 de fevereiro de 2014 7
<table width="697" cellpadding="0" cellspacing="0" border="0" href="http://www.dominioloja.com.br/?utm_source=vtexcem&utm_medium=abandono_carrinho&utm_campaign=abandono"><img src="http://cdn.dominioloja.com.br/padrao/09.jpg" alt="dominioloja.com.br" width="697" height="148" border="0" style="display:block" /></a></td> <table width="697" cellpadding="0" cellspacing="0" border="0" <td align="center"><p><font color="#666666" size="1" face="verdana, Arial, Helvetica, sans-serif"><strong>política DE PRIVACIDADE</strong></font></p> <p><font color="#666666" size="1" face="verdana, Arial, Helvetica, sansserif">nos comprometemos com a privacidade e a segurança dos clientes. Por isso, não divulgamos seus dados cadastrais para terceiros, exceto quando estas informações são necessárias para o processo de entrega, cobrança ou participação em promoções que o cliente tenha solicitado.</font></p> <br /> <br /></td> </td> </body> </html> 6 de fevereiro de 2014 8