Todo mundo sabe como fazer um boletim. Muitas pessoas sabem como criar cadeias de gatilho. Alguém sabe como configurar um boletim informativo a partir do feed RSS de um blog. Tivemos que ir mais fundo, porque queríamos que nosso boletim não fosse simples, mas bonito e detalhado. Afinal, é feito de um blog interessante, no qual também investimos muito esforço.
Para cada detalhe em uma carta de aparência simples, eu tive que lutar com esse macaco fofo. Tudo deu certo. Nós dizemos como.
O Mailhimp é um serviço de interface em inglês e às vezes ilógico. Mas ele sabe quanto e é tão popular que instruções meticulosas foram escritas para ele sobre o fornecimento de conteúdo para os leitores de todas as maneiras possíveis.
Também escolhemos o Mailhimp para nossas postagens no blog PromoPult. Um dos recursos do Mailhimp são as campanhas automáticas. Você pode agendar correspondências regulares, cartas individuais, configurar cartas de boas-vindas e muito mais.
Esta história é sobre como configurar a postagem automática de postagens no blog. Um resumo de materiais frescos para o e-mail do assinante uma vez por semana.
A opção padrão para o link automático e por que não nos convém
O Mailhimp em si possui excelente documentação sobre todas as funções e, especificamente, sobre isso: Compartilhe suas postagens no Mailchimp . Também podem ser encontradas traduções para o russo, com diferentes graus de adequação.
Resumidamente, o que você precisa para criar um link automático:
- Crie um feed RSS separado para o MailChimp (ou mesmo não crie, mas use um feed padrão).
- Crie uma campanha, especifique a fonte, configure as condições de envio.
- Crie e selecione um modelo.
- Feito. Você é incrível!
O que não nos convinha é que é simplesmente impossível adicionar alguma de nossas próprias coisas.
Existem dados básicos do feed RSS que o Mailhimp entende:
- Informações básicas sobre o feed (título, link, descrição, data de formação ou atualização do feed) -
*|RSSFEED|* . - O link para uma marca de postagem separada
*|RSSFEED:URL|* , examina o <link> dentro do <item> (daqui em diante). - O título de uma única postagem é a tag
*|RSSITEM:TITLE|* , analisa <title> . - Data de publicação de uma única marca de postagem
*|RSSITEM:DATE|* , consulte <pubDate> . - Anúncio de texto de uma tag postal separada
*|RSSITEM:CONTENT|* , veja <description> , se essa tag não estiver dentro de <item> - o MailChimp analisa <content:encoded> . Você pode usar tags HTML dentro.
- O conteúdo completo de uma única postagem é a tag
*|RSSITEM:CONTENT_FULL|* , analisa <content:encoded> . - Imagem de uma postagem, geralmente uma visualização ( miniatura nos termos do WordPress) - tag
*|RSSITEM:IMAGE|* , analisa <media:content> e não se esqueça de tags e atributos adicionais para anexos de mídia : marcações de idade, informações sobre o próprio arquivo e assim por diante.
E temos outras coisas em um post separado:
- Contador de comentários
- Exibir contador;
- Como contador
- Quero mostrar a data de publicação do post em formato humano : primeiro, em russo, com declinação e se o post foi publicado este ano - não mostre o ano da publicação (agora tudo funciona no blog, nas cartas quero a mesma atenção aos detalhes) ;
- Capa de postagem personalizada separada, da qual você precisa chegar de alguma forma;
- Categoria com um link para todas as postagens da categoria.
E você não pode colocar isso em um feed RSS comum - não há tags correspondentes. As tags personalizadas do MailChimp não entendem e não devem ser responsabilizadas por isso. Precisamos procurar uma solução que sirva a todos e não quebre.
Os dados que precisam ser mostrados em um cartão postal separado no modelo de resumo estão vinculados à aparência. O designer desenhou, o tipógrafo sofreu muito e compôs a carta.
Cartão postal do blog PromoPult no resumo semanal
Como resolvemos o problema
Crie feeds RSS
A primeira coisa a fazer é criar um feed RSS separado para o MailChimp. Já existem vários feeds semelhantes no blog PromoPult: para as páginas Yandex.Zen e Turbo .
Você pode criar um novo feed por meio de add_feed () . Aqui está o código no arquivo de função do tema:
functions.php:
add_action( 'init', 'customRSSforMC' ); function customRSSforMC() { add_feed( 'mchimp', 'customRSSforMCFunc' ); } function customRSSforMCFunc() { get_template_part( 'rss', 'mchimp' ); }
Na linha 7, get_template_part ( 'rss', 'mchimp' ); - indica que o modelo para o feed está na raiz da pasta do tema e é chamado rss-zen.php .
Depois de criar o arquivo e adicionar a função, você precisa ir ao painel de administração do WordPress, as configurações do CNC: “Console → Configurações → Links permanentes” e clicar no botão “Salvar alterações” para que o WordPress atualize as configurações de /feed/URL e abra no /feed/URL fornecido no primeiro parâmetro da linha No. 4 novo feed RSS.
Você precisa fazer isso uma vez ao criar a fita.
Veja nosso exemplo: https://blog.promopult.ru/feed/mchimp
O que há dentro da fita
Dentro do próprio feed, há um loop de postagem regular do WordPress: query_posts () . Isso permite selecionar e filtrar postagens com muita flexibilidade: como se você estivesse configurando categorias individuais, páginas com seleções, arquivos e tudo o que você precisa para uma seleção de postagens no WordPress.
Porém, antes de você encontrar a solução perfeita para o problema, houve várias tentativas de compactar os dados importantes para escrever dentro dos designs padrão dos feeds RSS e usá-los no MailChimp.
Por exemplo, havia uma opção para o contador de comentários :
<item> [...] <title><?php the_title_rss(); ?></title> <link><?php the_permalink_rss(); ?>?utm_source=newsletter</link> // 1, <?php if (get_comments_number() >= 1) { ?> <commentsCounter><?php comments_number('0', '1', '%'); ?></commentsCounter> <?php } ?> [...] </item>
Essa opção, é claro, funciona em termos de dados: tudo o que é necessário é obtido e exibido corretamente. Mas o MailChimp não entende a <commentsCounter> , como qualquer outra <commentsCounter> não padrão.
Além disso, por exemplo, com datas. O MailChimp possui sua própria tag: *|RSSITEM:DATE:d/m/y|* , e você pode passar as opções de formatação de data para ele . Infelizmente, porém, na carta não parece humano. Sobre a tradução da data em geral, você não pode falar.
Outro problema são as fotos. Você sofreu e inventou sua bela escrita. Você precisa exibir uma imagem. No modelo de email, você faz o seguinte:
<img src="*|RSSITEM:IMAGE|*" alt="*|RSSITEM:TITLE|*" />
Mas o analisador MailChimp pode vir e quebrar o layout, adicionando suas propriedades, classes e outro código à tag <img ... /> imagem.
Dica. Se você usa tags e feeds padrão, não se esqueça de ativar a caixa de seleção " Redimensionar imagens do feed RSS de acordo com o modelo " nas configurações da campanha:
Conclusões intermediárias: algo dá errado, as opções padrão não são suficientes, a carta é terrível e não humana. Dados não padrão não podem ser exibidos.
Fazendo uma finta com nossos ouvidos: marcando tudo nós mesmos
Se você não pode fazer nada padrão no feed RSS para que o analisador de serviço do MailChimp entenda isso corretamente, você pode transferir o código final marcado e dobrado para o cartão postal simplesmente na
<description> elemento
<item> separado no feed.
Há apenas um sinal de menos separado: todos os estilos de escrita devem ser incorporados, ou seja, tudo o que é descrito através de .class transforma em estilos no atributo style=”...” .
<!-- : --> <style> .post-meta { Margin: 8px 0; } .post-category { border-radius: 3px; border: #adb2b2 1px solid; color: #adb2b2 !important; border-bottom: #adb2b2 1px solid !important; padding: 2px 6px; font-size: 13px; line-height: 13px; Margin: 0 8px 0 0; } </style> <div class="post-meta"> <a href="https://blog.promopult.ru/category/seo" target="_blank" class="post-category">SEO: </a> </div> <!-- : --> <div style="Margin: 8px 0;"> <a href="https://blog.promopult.ru/category/seo?utm_source=newsletter" target="_blank" style="Margin: 0 8px 0 0; border: #adb2b2 1px solid; border-bottom: #adb2b2 1px solid !important; border-radius: 3px; color: #adb2b2 !important; font-size: 13px; line-height: 13px; padding: 2px 6px; text-decoration: none;">SEO: </a> </div>
Para o layout das cartas do blog, foi utilizado “Pechkin” - um coletor de modelos de cartas que coleta uma carta de blocos e destaca os estilos em si. Você também pode usar o estilo on-line, por exemplo, Premailer.io .
Um loop de feed está disponível no modelo de feed RSS. Portanto, você pode puxar e modelar tudo como quiser e precisar.
A primeira abordagem para a solução foi parcial: para deixar o título, o URL e as breves descrições como padrão, mas as meta-informações da postagem: visualizações, curtidas, comentários, categoria e data de publicação devem ser formadas como uma parte separada do código HTML e inseridas no local de marcação desejado.
Essa opção também teve que ser abandonada devido a um layout quebrado e à falta de controle sobre o layout e os estilos de imagem. Depois, transfira toda a marcação do bloco de cartões postais para a <description> .
<?php while (have_posts()): the_post(); ?> <item> <description><![CDATA[ <div class="post-card"> <?php if ( get_post_meta($post->ID, 'imga', true) ) { ?> <div class="post-card__img"> <a href="<?php the_permalink(); ?>?utm_source=newsletter" target="_blank"> <img src="<?php echo $postImg[0]; ?>" alt="<?php the_title(); ?>"> </a> </div> <?php } ?> <div class="post-card__info"> <h2> <a href="<?php the_permalink(); ?>?utm_source=newsletter"><?php the_title(); ?></a> </h2> <p> <a href="<?php the_permalink(); ?>?utm_source=newsletter"> <?php if ( !empty( get_post_meta($post->ID, 'intro', true) ) ) { echo get_post_meta($post->ID, 'intro', true); } else { $content = get_the_content(); $trimmed_content = wp_trim_words( $content, 12, '...' ); echo $trimmed_content; } ?> </a> </p> <div> <p> <?php if (get_the_date('Y') == date('Y')) { the_time('j F'); } else { the_time('j F Y'); } ?>, <?php $categories = get_the_category(); if( $categories[0] ) { echo '<a href="' . get_category_link($categories[0]->term_id ) . '?utm_source=newsletter">'. $categories[0]->name . '</a>'; } ?> <?php if(function_exists('the_views')) { ?> <span> <span> <img src="icon-views.png" alt=" "> </span> <span class="item__text"><?php the_views(); ?></span> </span> <?php } ?> <?php if (function_exists('get_simple_likes_counter')) { if (get_simple_likes_counter( get_the_ID() ) >= 1) { ?> <span> <span class="item__icon"> <img src="icon-like.png" alt=" "> </span> <span><?php echo get_simple_likes_counter( get_the_ID() ); ?></span> </span> <?php } } ?> <?php if (get_comments_number() >= 1) { ?> <span> <span> <img src="icon-comments.png" alt=" "> </span> <span><?php comments_number('0', '1', '%'); ?></span> </span> <?php } ?> </p> </div> </div> </div> ]]></description> </item> <?php endwhile; wp_reset_query(); ?>
Não há estilos embutidos no código de exemplo para deixar tudo mais bonito. A versão de combate da fita é fornecida com marcação e estilos completos.
Todos os endereços para gráficos no exemplo também são simplificados. Na versão de combate, todas as imagens, ícones, fotografias e tudo o que é importante para escrever são carregados no painel de administração do MailChimp via Content Studio , e os modelos já usam o endereço completo para atributos src- das <img /> .
Nas linhas 20 a 24, selecionamos a versão do anúncio de texto (introdução) do artigo. Se customizar for preenchido nas propriedades da postagem em campos arbitrários do registro - get_post_meta () , mostre-o, se não estiver lá, mostre o que está em get_the_content () .
Selecione também uma imagem pós-capa. Temos duas fotos associadas ao artigo: uma pequena visualização (exibida no cartão postal na página principal) e uma capa do cabeçalho da postagem. Pegue uma grande cobertura.
Um exemplo de cabeçalho com plano de fundo em uma postagem do blog PromoPult
Como tudo isso acontece no ciclo padrão do WordPress, todos os métodos de classificação estão disponíveis. Por exemplo, mostre os mais vistos e curtidos nos últimos 12 dias, classificando de mais para menos curtidas.
Saída de conteúdo do feed no modelo de email
Como todos os dados de um único cartão postal estão localizados dentro da tag <description> incorporada em um elemento <item> separado, você só precisa mostrá-los no modelo de mensagem:
<h1> PromoPult</h1> <p>*|RSSFEED:DESCRIPTION|*</p> *|RSSITEMS:|* *|RSSITEM:CONTENT|* *|END:RSSITEMS|*
Os dados são exibidos corretamente, o código HTML é inserido em um loop e a campanha automática funciona.
Linha separada sobre RSSFEED e FEEDBLOCK
Qual é a diferença entre *|RSSFEED|* e *|FEEDBLOCK|*?
É fácil descobrir as diferenças:
*|FEEDBLOCK|* pode ser usado em qualquer modelo de email e campanha. Por exemplo, se você quiser falar sobre as postagens mais recentes em um boletim periódico, use-o. Você pode especificar um link para qualquer fonte RSS.*|RSSFEED|* funciona apenas em campanhas automáticas e como fonte vê o que está especificado nas configurações da campanha.
TOTAL: Se tudo for padrão e fácil para você, use as ferramentas padrão do MailChimp e não se preocupe
Mas se o design do seu blog e as listas de discussão são especialmente projetadas e coordenadas três vezes com uma briga, se você deseja adicionar os dados disponíveis aos emails automáticos ou ao menos declarar a data em russo, precisará bagunçar um pouco e enviar dados prontos para o MailChimp.
Como - dissemos.
Links sobre o tópico de feeds RSS no MailChimp: