🎟️👀 Promocodes in 'View Online' and more

Say goodbye to 'sample_code'!

🏡 Home / ⛵ Sailthru / ⛵🧪 Developments and Solutions / 🎟️👀 Promocodes in 'View Online' and more

What's the problem?

One issue in Sailthru is that in the 'View Online' links and triggered send log view, promocodes will instead show as 'sample_code'. This is frustrating for customers and support staff alike. Codes used in barcodes aren't scannable, and it's harder to resolve support tickets. Previously I've used append_user_var() to save the codes to the profiles so I can reference them later, but this doesn't stop confusion on the customer's end. In fact, this can make it worse.

See, each time a web view is loaded from {view_url}, the email template is reprocessed, including any instances of append_user_var(). Which means that when the promocode shows as 'sample_code', it's actually saving that to the customer profile too, undoing the effort of logging it. If you use logging promocodes in emails with 'view online' links, this must be considered.

I've come up with a simple solution that will patch this by checking if the promocode generated is 'sample_code', and if so it will pull the value from the profile instead. Add this to the 'Advanced' tab:

{* Get new promocode *}
{code = promotion().code}

{* New Check: if the code is 'sample_code' set the code according to the profile field *}
{if code == "sample_code"}
{length(myPromoCode) > 0 ? code = myPromoCode[0] : code = "Builder View: first time previewing for this user"}
{/if}

{* Adds to profile on send so its instantly available everywhere *}
{append_user_var("myPromoCode", code, 1)}

In this setup, the Builder Preview will show the codes for the most recent send. This means the first send has nothing to reference and so will use the fallback from the code.

Further Testing1

Taking this idea further, this can effectively be used a method of 'detecting' when it's rendering from the email vs the browser.

{code = promotion().code}

{* Default view *}
{view = "email"}

{* New Check: if the code is 'sample_code' set the code according to the profile field *}
{if code == "sample_code"}
{view = "online"}
{/if}

This approach can be useful for scenarios where certain content, such as a 'view online' link, should only be displayed in the email version and not in the online view.

{* Only shows in email *}
{if view != "online"}
Click here to view online...
{/if}

This technique can also be used to dynamically replace an image with a YouTube embed when the content is viewed online.

{if view == "online"}
 <iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe> 
{else}
<a target="_blank" href="https://www.youtube.com/watch?v=tgbNymZ7vqY">
  <img src="https://cdn.glitch.global/4c74f8d5-b1a6-4a37-91dc-9b40f9d9d76e/codesTestImage.png">
</a>
{/if}

Considerations

There are a couple things to consider here:

  1. The builder view will show the 'online' view since codes don't render here either
  2. Even though no codes are used, this still requires a promolist with unique codes for each send

Generating Bulk Random Codes

I made a quick script that will generate ~20M unique codes(99MB) in just a few seconds(at least on my PC). This can be uploaded to Sailthru to provide a huge number of codes. If this ever gets low you can upload the same file again to refresh all the consumed codes.

codes.js

// main.js
const { Worker } = require('worker_threads');
const fs = require('fs');
const path = require('path');

const header = 'code\n';
// reduce this value for testing
const totalSizeInBytes = 99 * 1024 * 1024; // 99MB - Just under the max size for Sailthru uploads
const lineSizeInBytes = 5.25; // Approximate size for an alphanumeric code plus newline character
const numberOfLines = Math.floor((totalSizeInBytes - Buffer.byteLength(header, 'ascii')) / lineSizeInBytes);
const numWorkers = 4; // Adjust based on your system's capabilities
const linesPerWorker = Math.ceil(numberOfLines / numWorkers);

const fileStream = fs.createWriteStream('codes.csv', { encoding: 'ascii' });
fileStream.write(header);

let workersFinished = 0;
for (let i = 0; i < numWorkers; i++) {
  const worker = new Worker(path.join(__dirname, 'worker.js'), {
    workerData: { startIndex: i * linesPerWorker, count: linesPerWorker },
  });

  worker.on('message', (data) => {
    fileStream.write(data);
  });

  worker.on('exit', () => {
    workersFinished++;
    if (workersFinished === numWorkers) {
      fileStream.end();
    }
  });
}

fileStream.on('finish', () => {
  console.log(numberOfLines + ' codes have been written to codes.csv');
});

worker.js

// worker.js
const { parentPort, workerData } = require('worker_threads');

// Produces a series of unique codes by transforming the index into a base-62 string, utilizing a combination of letters and numbers.
function generateCode(index) {
  // the chars could be expanded for even more codes per file. Then reduce value of 'lineSizeInBytes'
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let code = '';
  do {
    code = chars[index % chars.length] + code;
    index = Math.floor(index / chars.length) - 1;
  } while (index >= 0);
  return code;
}

let data = '';
for (let i = 0; i < workerData.count; i++) {
  const code = generateCode(workerData.startIndex + i);
  data += code + '\n';
}

parentPort.postMessage(data);

Put these 2 files in the same folder and run this to generate the CSV

node codes

Now you can attach this to promotion to any message you need. If you need real promocodes then just use that in the same way.