Entrar Inscrever-se
Marketing Digital

Crie seu Próprio Spotify Wrapped: Engajamento e Marketing Viral com Rowy e SVG

Xavier

• 5 min read

Todo início de dezembro, usuários do Spotify aguardam ansiosamente pelo Spotify Wrapped, uma retrospectiva personalizada do ano musical de cada um. Essa campanha é um fenômeno de marketing viral, com milhões de compartilhamentos nas redes sociais. Mas você sabia que é possível replicar essa experiência para o seu próprio aplicativo, independentemente do nicho? Este artigo explora como criar uma campanha no estilo "Wrapped" utilizando Rowy, Figma e a flexibilidade do formato SVG, transformando dados de usuários em conteúdo altamente compartilhável.

Por Que Campanhas no Estilo "Wrapped" São Tão Eficazes?

O sucesso do Spotify Wrapped não é por acaso. Ele toca em pontos cruciais do comportamento do usuário:

  • Personalização Extrema: Os usuários adoram ver dados que refletem seus hábitos e preferências únicas.
  • Compartilhabilidade: O formato visual e resumido é perfeito para redes sociais, gerando curiosidade e engajamento entre amigos.
  • Marketing Viral Orgânico: Cada compartilhamento é uma propaganda gratuita e autêntica para o aplicativo.
  • Sentimento de Comunidade: Ao compartilhar seus "Wrappeds", os usuários se conectam com outros que têm gostos similares.

Implementar uma retrospectiva anual pode ser uma estratégia poderosa para aumentar o engajamento, a retenção de usuários e o alcance da sua marca.

Recriando o "Wrapped" para seu Aplicativo com Rowy

Embora pareça complexo, criar uma experiência "Wrapped" é mais acessível do que se imagina, especialmente se você já coleta dados de uso do seu aplicativo. O Rowy, uma plataforma low-code que se integra ao Firebase, simplifica significativamente esse processo.

Passo a Passo: Criando seu Próprio "Wordgame Wrapped" com Rowy

Vamos usar um exemplo prático: um jogo de palavras fictício chamado "Wordgame", similar ao popular Wordle, onde os usuários tentam adivinhar uma palavra em seis tentativas. Nosso objetivo é gerar uma imagem compartilhável com as estatísticas do jogador.

1. Design do Template no Figma e Exportação SVG

O primeiro passo é criar um template visual atraente no Figma (ou qualquer outra ferramenta de design vetorial). Este template servirá de base para a imagem final.

Exporte o design como um arquivo SVG (Scalable Vector Graphics). O SVG é ideal porque é um formato baseado em XML, o que significa que seu conteúdo é texto puro e pode ser facilmente manipulado programaticamente. Uma dica importante, conforme destacado no vídeo de referência da Rowy, é não selecionar a opção "Outline Text" (ou Contornar Texto) ao exportar. Isso garante que o texto no SVG permaneça editável, permitindo a inserção de dados dinâmicos.

2. Manipulando o Arquivo SVG para Dados Dinâmicos

Após exportar o SVG, você precisará editá-lo para prepará-lo para os dados dinâmicos. Abra o arquivo SVG em um editor de texto ou código (como o VS Code).

  • Incorporar Web Fonts: Se o seu design utiliza fontes customizadas, como Google Fonts, elas podem não renderizar corretamente por padrão quando o SVG for visualizado em diferentes contextos. Para solucionar isso, incorpore a fonte diretamente no SVG usando a diretiva @import dentro de tags <style>. Por exemplo: 
    <style>
  @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@700&display=swap');
</style>

    Atenção: ao usar URLs do Google Fonts, pode ser necessário remover parâmetros adicionais após o nome da fonte (como &display=swap) se houver problemas de sintaxe com o ampersand (&) dentro do SVG. O vídeo sugere que a remoção do &display=swap pode resolver erros de renderização.

  • Placeholders para Dados: Identifique os textos e atributos (como larguras de barras em gráficos) que serão dinâmicos. Substitua-os por placeholders únicos, como {{percentile}}, {{played}}, ou {{guessWidth1}}. Essa sintaxe de chaves duplas é comum em templates.
  • Alinhamento de Texto: Para centralizar textos dinâmicos que podem variar de tamanho, utilize o atributo SVG text-anchor="middle" no elemento <text> ou <tspan>. Você também precisará ajustar a coordenada x do texto para que o ponto de ancoragem (o centro do texto) fique na posição desejada. Isso geralmente envolve calcular x_original + (largura_do_elemento_de_texto / 2).

3. Integrando com Rowy: Gerenciamento de Dados e Cloud Functions

Com o template SVG preparado, é hora de usar o Rowy para dar vida a ele.

  1. Configurar a Tabela de Dados no Rowy: Certifique-se de que sua tabela no Rowy (conectada ao Firestore) contenha os dados dos usuários necessários para o "Wrapped" (ex: número de jogos jogados, percentil, vitórias, dados de distribuição de tentativas).
  2. Criar uma Coluna Derivada (Derivative Column): No Rowy, adicione uma "Derivative Column". Este tipo de coluna permite executar um script (Node.js Cloud Function) que gera um valor com base em outros campos da mesma linha. Configure esta coluna para ter um tipo de saída "Image".
  3. Escrever o Script da Cloud Function: No script da coluna derivada, você implementará a lógica para gerar a imagem:
    • Carregar o Template SVG: Armazene o conteúdo do seu SVG (editado com placeholders) como uma string no script.
    • Substituir Placeholders: Use os dados da linha atual do Rowy (acessíveis através do objeto row no script) para substituir os placeholders no template SVG. Por exemplo, source.replace('{{percentile}}', row.percentile.toFixed(2) + '%').
    • Manipular Atributos: Para elementos como barras de gráficos, calcule a largura proporcionalmente aos dados do usuário e substitua os placeholders correspondentes (ex: {{guessWidth1}}).
    • Converter SVG para PNG: Utilize um pacote NPM como o convert-svg-to-png. Este pacote, como mencionado no vídeo da Rowy, usa Puppeteer (Headless Chrome) para renderizar o SVG e convertê-lo para PNG.
    • Upload para o Firebase Storage: Após gerar o buffer da imagem PNG, faça o upload para o Firebase Storage. Gere um nome de arquivo único (ex: usando UUID) e obtenha uma URL de download pública para a imagem.
    • Retornar os Dados da Imagem: O script deve retornar um objeto formatado que o Rowy espera para um campo de imagem, contendo a URL de download, nome do arquivo, etc.
  4. Configurar Listeners e Output: Na configuração da coluna derivada no Rowy, selecione os campos que, ao serem alterados, devem acionar a re-execução da função. Defina o "Output field type" como "Image".
  5. Deploy e Teste: Faça o deploy da Cloud Function através do Rowy. Adicione ou atualize uma linha na sua tabela para testar a geração da imagem.

Dicas Adicionais e Solução de Problemas com Rowy

  • Cloud Logs no Rowy: O Rowy fornece acesso direto aos logs da Cloud Function, o que é extremamente útil para depuração.
  • Limites de Memória da Cloud Function: Funções que utilizam Puppeteer (como o convert-svg-to-png) podem consumir bastante memória. Se você encontrar erros como "memory limit exceeded", será necessário aumentar a alocação de memória para a sua Cloud Function. Isso pode ser feito no console do Google Cloud Platform, na seção de Cloud Functions, editando as configurações de tempo de execução da função específica. O vídeo da Rowy sugere aumentar para 1GB ou 2GB, se necessário.

Benefícios de Implementar um "Wrapped" no seu Aplicativo com Rowy

Utilizar o Rowy para criar sua campanha "Wrapped" oferece diversas vantagens:

Conclusão: Personalize a Experiência do Usuário com Rowy

Criar uma experiência personalizada no estilo "Wrapped" para os usuários do seu aplicativo é uma tática de marketing e engajamento incrivelmente eficaz. Ferramentas como Rowy, Figma, e a versatilidade do SVG, tornam esse processo acessível até mesmo para equipes menores. Ao fornecer aos seus usuários uma retrospectiva divertida e compartilhável, você não apenas aumenta o engajamento, mas também transforma seus usuários em promotores da sua marca. Explore as possibilidades com o Rowy e veja como você pode inovar na interação com sua base de usuários.

Para mais exemplos e tutoriais, visite o site de demonstração do Rowy em demo.rowy.io.

Inscreva-se, Fique Atualizado!

Digite seu e-mail
Inscrever-se