SFMC Tips and Tricks Challenge

Sharing the wisdom

Michał Rzepka started something amazing with his #SFMCTipsAndTricksChallenge on LinkedIn in which the members of the SFMC community were asked to share 3 tips about the system. Lots of people responded already sharing great tips for beginner and advanced developers alike.

So, it’s my turn to share:

How I’m a big fan of the console.table() function in client-side JavaScript for debugging
What the dreaded Error 500 message on a page without SSJS or Ampscript teaches us about proper testing and the CloudPagesURL() function
In a separate article:
How data binding can be used to create a basic logging mechanism writing personalized values with the Update Contact Block in Journey Builder

console.table() is great for client-side debugging

While developing my Ampscript Wordle clone I had to tackle multiple problems concerning the changing game state. Seeing what information came in from the forms and how they were finally processed was crucial in the debugging process.

Normally I would just output such values on the page, but the results are messy: even if you make everything monospace, you would still have to take care of the alignment of every debugged variable to have a readable output.

While building an HTML table with Ampscript for this purpose, I realized I could simply pass all values to debug as a single JSON object and have client-side JavaScript take care of build the table using the console.table() function.

Example output

NOTE
Empty values like '' will not be displayed by this function, but you can click the ▶ Object button right below the table to see all valuas listed.

How to get it done

All you need to do is build a JavaScript object with Ampscript (or with SSJS for which this would be natural):

set @debug = Concat('{',
                        '"@now": "', @now, '",',
                        '"@number": ', @number, ',', 
                        '"@empty": "', @empty, '",', 
                        '"@alphabet": "', @alphabet, '",',
                        '"@evaluation": "', @evaluation, '",',
                    '}')

and output this to the page:

<script>
    console.table(%%=v(@debug)=%%)
</script>

Testing advice: Sometimes Ampscript really is email specific

Sometimes we can ignore the little things like the official documentation mentioning that some functions were designed with the email context in mind, because they have proven to work in our tests.

If there’s a chance that you will send an SMS with a link to a CloudPage before the first email is sent to this customer, don’t use the CloudPagesURL() function – if the contact you are sending to does not exist in the All Subscribers list, opening the link can make the Error 500 page appear (even if there’s no Ampscript or SSJS code that could cause this error).

In such cases build the personalized URL with the Concat function to build the final URL with encrypted parameters containing user data.

NOTE
There's also a different lesson to be learned here:

When testing new scenarios, use new contacts that closely resemble the state in which the recipients would be in that moment:

They might not be in All Subscribers at send time? 
Make sure your contacts are not in that list

They might not be in the synchronized data extension yet? 
Don't rely on it at the time of sending

Creating a journey log with the Update Contact activity

This tip got pretty long, so I decided to separate into its own article:

Data Binding with the Update Contact activity in Journey Builder

TLDR:
You can use {{Contact.Key}} to log a SubscriberKey in a data extension using the Update Contact Activity