Como criar QR Codes no Marketing Cloud com AMPscript

Juan Juan
29 de out. de 2024
3 min de leitura

Olá Trailblazer!

No artigo de hoje, vamos explorar uma aplicação cada vez mais relevante no CRM omnichannel: o uso de QR codes e como é simples criá-los diretamente no Marketing Cloud.

Além de entender como integrar QR codes em campanhas de e-mail, abordaremos um caso prático de aplicação em páginas de Cloud Pages!

Introdução

O QR code é um tipo de código de barras bidimensional que pode ser facilmente escaneado pela maioria dos smartphones com câmera. No CRM e no marketing digital, ele oferece diversos usos, desde campanhas de e-mail online e apresentações até pontos de contato presenciais. O objetivo é convidar o cliente a escanear o QR code para ser redirecionado a uma página, formulário ou outro destino de interesse.

Criando QR Codes no Marketing Cloud

Para criar QR codes personalizados no Marketing Cloud, é necessário ter um conhecimento básico de AMPscript. Com os métodos que apresentaremos a seguir, a implementação se resume a incluir a URL gerada no atributo src de uma tag de imagem HTML.

Os geradores de QR code mais comuns e compatíveis com o Marketing Cloud são:

Quick Chart
Goqr.me

Recomendamos consultar a documentação de ambos os geradores para escolher a opção que melhor atenda às suas necessidades.

Abaixo, mostramos como usar ambos os geradores no mesmo código AMPscript para gerar QR codes diretamente em um e-mail ou página no Marketing Cloud.

%%[
set @data_url = 'https://www.brazucaforce.com.br'

set @qrcode_qc = Concat('https://quickchart.io/qr?text=',@data_url,'&size=400')

set @qrcode_gqr = Concat('https://api.qrserver.com/v1/create-qr-code/?data=',@data_url,'&size=400x400')
]%%

<div style="text-align: center;">
    <img src="%%=v(@qrcode_qc)=%%" alt="QR Code" style="max-width: 100%; height: auto;">
	<img src="%%=v(@qrcode_gqr)=%%" alt="QR Code" style="max-width: 100%; height: auto;">
</div>

Os métodos apresentados para geração de QR codes são bastante semelhantes, diferenciando-se apenas na estrutura da URL e nas propriedades de tamanho. A escolha do gerador ideal deve sempre se basear nas necessidades específicas do projeto, sendo necessário incluir apenas uma das URLs de API mencionadas, e não ambas.

No final, o QR code gerado será renderizado diretamente em seu e-mail ou Cloud Page.

Quick Chart
Goqr.me

Para campanhas de e-mail que redirecionam para Cloud Pages com ações automatizadas, combine as funções CloudPagesURL e RedirectTo para criar QR codes altamente personalizados. Isso permitirá direcionar o cliente para páginas onde podem ser iniciadas jornadas automáticas, preenchidos formulários interativos, entre outras ações.

Além disso, você pode ajustar o estilo do QR code com atributos como cor, posicionamento e outros detalhes visuais, incluindo dark, light, caption, e cLevel. Consulte a documentação oficial do QuickChart para uma lista completa de atributos e personalizações possíveis.

Caso de uso: Criando uma Cloud Page para geração de QR Code

Quantas vezes você precisou criar uma conta em um site de geração de QR codes apenas para obter uma imagem para um evento presencial ou para interações em uma apresentação? Com o passo a passo a seguir, você poderá criar uma página interna no Marketing Cloud, automatizando totalmente esse processo.

Para configurar essa Cloud Page, você precisará de uma página HTML com um formulário simples e uma página com código JavaScript para ser importada.

Neste caso, utilizaremos o código oficial de geração de QR Code disponibilizado pela d-project.

Primeiramente, crie uma nova coleção de Cloud Pages e, em seguida, adicione uma página de tipo “code snippet” em JavaScript, incluindo o código fornecido.

Salve a URL ou o código da página JS criada, pois utilizaremos na próxima etapa.
Após configurar a página JS, crie uma Cloud Page padrão e insira o código abaixo nela.

<html>
<head>
<script type="text/javascript" src="{CÓDIGO_URL_PAGINA_JS}"></script>
</head>

<body>

<!-- Formulário para inserção do link -->
<form id="qrForm">
	<label for="link">Insira o link para gerar o QR code:</label><br>
	<input type="text" id="link" name="link" placeholder="https://example.com" required>
	<input type="submit" value="Gerar QR code">
</form>
<div id="qrcode" style="width:300px; height:300px; margin-top:20px;"></div>
<span id="code"></span>

<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
	width : 300,
	height : 300
});

// Função para gerar o QR code a partir do link submetido
function makeCode(link) {  
	qrcode.makeCode(link);
	}

// Manipulador de evento para o formulário
document.getElementById('qrForm').addEventListener('submit', function(event) {
	event.preventDefault(); // Impede o envio do formulário padrão
	var link = document.getElementById('link').value; // Obtém o valor do campo de texto
	makeCode(link); // Chama a função para gerar o QR code
});
</script>
</body>
</html>

Ao publicar sua página, você terá um gerador de QR codes interno para chamar de seu!

Não esqueça de aplicar um CSS e outras propriedades importantes na sua página HTML! 😊

Recursos adicionais

Documentação Goqr.me: https://goqr.me/api/doc/create-qr-code/
Documentação Quick Chart: https://quickchart.io/documentation/qr-codes/
GitHub D-Project: https://github.com/kazuhikoarase/qrcode-generator

Espero que tenham gostado desse artigo e que tenha sido útil para você de alguma maneira! Não esqueça de deixar seu feedback ou dúvida abaixo!

Ótimos aprendizados! ❤️