BRAZE LIQUID — Date Filter & strftime — Liquid For Technical Marketers
BRAZE LIQUID — Date Filter & strftime — Liquid For Technical Marketers
🗣️ WATCH FULL YOUTUBE VIDEO HERE 🗣
What’s up everyone, my name is Allan, Founder and Consultant at For Now Marketing, and welcome to LIQUID FOR TECHNICAL MARKETERS!
Today, we’re going to talk about the Date Filter and… wait… is that a typo in our title?
Just kidding, the second topic is called “sturftime”, or at least that’s how this word seems to be pronounced in the Computer Science community. strftime is short for “string format time” or I’ve also seen it called “string for time”.
Let’s get started.
New Resource: strftime.net
Before we get started, here’s a new resource that I would like all of you to bookmark, which is strftime.net. I’m constantly referencing this resource to use it as a playground whenever I have a new date format to work with.
Date Filter
Let’s start by talking about the Date Filter, which we purposely didn’t go over in our videos so far, because it’s such a powerful filter that it deserved its own, entire video.
The Date Filter:
“Converts a timestamp into another date format. The format for this syntax is the same as strftime.”
So the Date Filter works with a timestamp which I will interchangeably call “Date Variable” in this video. By the way, we discussed Date Variables & ISO 8601 in a previous video, so we can be ready to talk about today’s topic!
Let’s look at our first example in Braze. First, we’re going to create a variable called session_first_date and set it equal to 2024–04–30, just the date, in ISO 8601 format. For strftime to work, it’s best if we’re working with ISO 8601 format.
Then, let’s add our Date Filter, and for the parameter, we’re going to type in “%a, %b %d, %y”. Whoa whoa whoa, what the heck are we writing here? That’s not even English!
And that strange looking syntax, “%a, %b %d, %y”, is what we call strftime, or string for time.
Let’s navigate to strftime.net and talk more about how strftime works. I promise this example will make much more sense after this discussion.
How To Use strftime.net
So this is the strftime.net app or playground, and this will be our ultimate, go-to guide whenever we need to figure out how to interpret or write the strftime code for our Date variables.
First, we can actually type in the exact strftime code we saw from the first example, into our textbox here. When we do this, we’ll see exactly how our timestamp is formatted, according to the strftime.
By the way, notice how the timestamp we see is today’s date. On this strftime.net webapp, they will always use the exact current timestamp. So we don’t have the ability to fix the timestamp that they’re working with. That shouldn’t be a problem at all with learning how to use strftime.
Now, let’s say we didn’t have the strftime code available to us, and we’re trying to figure out how to format our ISO 8601 date to look nicer, like August 16, 2024.
This is where those long rectangular buttons come in handy from strftime.net, let’s head back there!
First, let me explain how each of these rectangles work. On the left side, there’s the type of date value, so we start as big as Century, going down to year, month, week, day, lots of strftime types for day, then hour, min, second, and even down to nanosecond.
We also have an uppercase AM/PM and lowercase am/pm, and then some preset formats on the bottom for both left and right columns, as well as the time zone strftime.
On the right side of each rectangle, there are small examples for how the date will be formatted, and this example really is all we need to build our strftime code.
So let’s build the strftime code for August 16 COMMA 2024.
So the first format we’re looking for is month, so we’re going to look at these 3 rectangles, and we wnat the full word “August”, which looks like it’ll be this one, so I’ll clikc this one.
And what’s happening every time we click on any of these format buttons is that the strftime code is being populated inside our textbox. So it’s actually building our strftime for us as we click each button!
And another thing to note is that only the strftime code, the portion with the % symbol followed by another character is being recognized as the date format. So we can actually add our own characters, like spaces, commas, slashes, even full words.
Next we have the date, which we have quite a few options here, but we want the numbered dates, and even that there are two. Quickly going back to our slides: let’s talk about leading zeros.
[read slide]
So the only difference between the two is that the first one, with the 0 in front of the 1, has the leading zero. So for days that only have 1 digit, this strftime will include the 0 in front of the date, and this strftime will not include the 0.
Well you might be thinking “wait a minute”, how come we didn’t have that option for the month?
So 2 answers there:
[read slide]
To wrap it up, let’s do one final conversion with a more detailed ISO 8601 data. So our full date value will be “2024–08–09T17:30:00–07:00” and our goal is to convert it to this friendly string: “Friday, Aug 9, at 5:30pm PDT”.
One heads up here is that in Braze, if we want the time zone designator to format properly, then we do need to add the time_zone filter in our date variable. We’ll go over that in just a second.
So first, let’s create the variable in Braze.
And then let’s head over to strftime.net to try to grab all the parts we need.
Go back to Braze, add the date filter, and we got almost everything, except the time zone, which we made a note about earlier. So here’s what that time_zone filter looks like:
and if we check again, perfect! And of course, there are different values for different timezones and cities, so make sure to use the correct value.
Let’s go over some of the time buttons that are provided, broken down by categories. First, we have the year buttons. We see “20 in 2009”, “without century”, and “with century”.
If we click the “Century” button, that means the current year, 2024, will be formatted so that only the 20 part, which represents the Century, will be rendered. Technically, we’re in the 21st century, so I’m not sure if Century was the best name for this, but you get the idea. The first two numbers of the current year will be rendered.
Let me go ahead and clear what we have in the textbox. The next two options are similar, but we have “without century” and “with century”.
If we choose “without century”, that means that the current year, 2024, will be formatted “without century”, so just the 24 part, and if we choose the “with century”, then we’ll see the full 2024 year. Like what you might see in the copyright year in the footer of your emails.
And what’s happening every time we click on any of these format buttons is that the strftime code is being populated inside our textbox. So going back to our Liquid example in Braze. Say we wanted to only render this full year from our Date Variable session_first_date. We simply open up strftime.net, click the year format that we want, copy this code, and this code is what gets placed as a parameter inside our Date Filter.
One thing to remember: this is called strftime, or string for time. It’s a STRING for time. And since the code is a String, the Date Filter Parameters will always be surrounded in quotes.
Let’s take a look at a few more examples.
We have 3 options for Month, and you can see the month-format options here. We have the numeric Month, the shortened word, and the full word. Let’s see what those look like.
2 things to point out here: the numeric month comes with what’s called a leading zero. That means that for single-digit months, like the current month May, this strftime will render as “05” instead of “5”. That 0 in front of the 5 is what we call a leading zero.
For the second and third Month formats, May is unfortunately not the best example to differentiate between a shortened and full Month names. But I will try to remake this video in September to show a better example.
I’ll quickly go over the remaining buttons, although I’ll keep these explanations simple as every button has a clear example that represents how the format works exactly.
We have Weeks, representing which of the 52 weeks today currently is, although I think the first example is broken. But we have two other options: assuming the first week of the year starts on a Sunday or on a Monday.
Quite a few for Days. Shortened word, full word, leading zero number, no leading zero number, day of the week starting from 0 ending in 6, day of the year, and day of the week again starting from 1 ending in 7.
We have some full date formats, so the US-standard month-day-year format, another one called VMS which looks like it stands for multiple things after a quick Google Search, and our favorite: ISO 8601.
We get into the time formats here, so starting with 4 for Hour, 24 hour time with leading zero, 12 hour time with leading zero, 24 hour time with no leading zero, and 12 hour time with no leading zero.
Minute, we just get one option which is nice.
We get a few Second options, Millisecond options, as well as Micro and Nanosecond options, although once again, I’m not sure if all these are working.
I’ll leave us with this final fun fact: Notice that when we choose Second, our rendered time changes. Well, that’s become the current Second of the day is constantly changing, literally every second! So if you ever need a New Years Eve countdown tool, there you have it.
Thank You!
That’s it for today! Thank you for watching, and see you next time!
allan@fornowmarketing.com
fornowmarketing.com
