QR Codes
Table of Contents
Overview
Although the technology for QR codes has been around since 1994, they experienced a meteoric rise in ubiquity at the beginning of the 2020s. Marketers sending dynamic direct mail soon found that these humble boxes were the key to unlocking accurate, real-time, 1-to-1 matchbacks - opening up a whole new world of data and experiences that could be facilitated through direct mail. If you aren't yet leveraging QR codes for your direct mail campaigns, then there is no better time to start than now--and no better platform to send with than Lob.
What are QR codes?
| Wikipedia defines QR (short for Quick Response) codes as a machine-readable optical label that can contain information about the item to which it is attached. In practice, QR codes often contain data for a locator, identifier, or tracker that points to a website or application. With modern-day phones equipped by default with easy-to-use QR code scanners, it is easier than ever for potential customers to make use of them. |  |
What can they do for my marketing campaign?
Although there are countless ways to leverage this technology for your company's needs, below are a few examples:
- Take someone to your website or a specific landing page, including a personalized URL
- combine this with UTM parameters to pre-populate a page
- Take someone to a promotion and/or coupon
- Bring a customer back to an abandoned shopping cart
- Take someone to one of your brand’s social media pages
- Bring up your company’s location on an online map
- Take someone to a video
How can I use QR codes with my mail pieces?
Static (PDF)
If you plan on submitting a Static (unpersonalized) creative via PDF, simply include the QR code image anywhere on the PDF compliant with our PDF guidelines.
Dynamic (HTML Template)
This is where the real power of the QR code can be unlocked. Similarly to how you can personalize each mail piece with the use of our HTML templates, you can personalize each QR Code as well. There are a few options when it comes to generating QR codes. We will explain some here.
QuickChart.io
A quick and easy way to implement QR codes would be through the use of quickchart.io. Although you need a subscription to mass-produce these, implementation is quite simple. Simply include the snippet below in your HTML template:
<img id="qrcode_image" src="https://quickchart.io/qr?key=YOUR_API_KEY&text={{qr_url}}">Now, you can change the QR code from recipient to recipient using the merge variable "qr_url"!
See more info on quickchart.io's authentication here if needed.
Inline
A way to implement QR codes without a subscription is by the use of JavaScript. First, let's start by laying down some boilerplate HTML styling for a blank 6x9 postcard. The code in bold directly contributes to QR code creation and can be copied and pasted into any template you have.
<html>
<head>
<style>
body {
width: 9.25in;
height: 6.25in;
margin: 0;
padding: 0;
/* If using an image, the background image should have dimensions of 2775x1875 pixels. */
background-size: 9.25in 6.25in;
background-repeat: no-repeat;
}
#safe-area {
position: absolute;
width: 8.875in;
height: 5.875in;
left: 0.1875in;
top: 0.1875in;
}
#qr {
position: absolute;
top: 461px;
left: 38px;
width: 68px;
height: 68px;;
background-size: contain;
background-repeat: no-repeat;
}
</style>
</head>Next, let's create the body of the HTML document which will store element qr which will act as a placeholder for our QR code. Note the <script> element in which we're importing the QR code creation library.
<body>
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
<div id="safe-area">
<!-- All text should appear within the safe area. -->
<div>
<div id="qr"></div>
</div>
</div>
Lastly, let's add our JavaScript code to the end of our <body>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qr"), {
text: '{{qr_url}}',
width: 68,
height: 68,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
</script>
</body>
</html>
In summary, we created an example of an HTML template which uses element with id qr to indicate where we want our QR code to go. We set the text parameter to {{qr_url}} which we can then set dynamically for each mail piece which will use this template. When a request to use this HTML template is made, the QR Code is then generated at the rendering stage.
Usage with UTM Parameters
UTM parameters are short text codes that you add to URLs (or links) to help you track the performance of webpage or campaign.
Because QR codes can be generated dynamically at the time of their creation, we can generate QR codes with UTM parameters that correlate to the recipient. For instance, if we have a customer we know internally with a customer id of `1234`, we can generate a URL which leads the user to a page with that id embedded: www.something.com/login?customer_id=1234. From there, you can utilize a web beacon (or pixel) to instantiate one-to-one attributional tracking.
Additional Resources
https://blog.branch.io/how-to-create-and-measure-qr-codes/
https://www.skycore.com/blog/marketing-qr-codes-marketing/
https://www.pfl.com/how-to-use-qr-codes-for-direct-mail-marketing/