Speaker 0: Hello, everybody. If you’re just joining us, um, welcome to MarDreamin. My name is Amber Jurier Amel. I’m from Sercante, and I’m gonna be moderating today’s session. Uh, before we get started, I have a couple of housekeeping items that we have to cover. Um, first of all, yes. We’re definitely gonna record this. And, yes, you will definitely get access to the recordings after everything’s over. Um, if you have a question during the session, you can post it in the q and a section. Um, and we’re gonna save all questions till the end. Um, but at the end, you’ll have an opportunity to ask anything, um, that you wanna know. Um, so, uh, oh, lastly, use the chat. There’s emojis, GIFs available, all kinds of stuff. We love hearing from, um, everybody while these sessions are going on. So let’s get started. I’m gonna introduce our speaker today. Uh, it’s Tony Zepansick, and he’s going to be presenting his session, um, enhanced cloud SFMC cloud pages with JavaScript using Vue JS.

Speaker 1: Yep. Yep. Yep. Very exciting topic here. Thank you so much. I appreciate the intro. Um, so I am Tony Zupancic. I have been in the marketing cloud engagement, uh, ecosystem for around six years. And if you know anything about me, I am a big cloud page developer, uh, nerd, and I love to see what I can do to push how I interact with cloud pages and how I have my development workflow, uh, ingrained into cloud page development within Salesforce Marketing Cloud. Uh, so I am also a cofounder of how to SFMC. And if you wanna reach out to me, I’m on all those, uh, Slack channels, email geeks, how to SFMC, uh, etcetera. So first off, thank you to all of our sponsors for putting on Marj Reaman. Uh, it’s a great event and packed with tons and tons of fantastic content. So really happy to be here and honored to be presenting my, uh, session.

So let’s get into it. Let’s talk about my favorite part of marketing cloud, the cloud pages. If you’re not familiar with what cloud pages are, they are essentially, uh, simple pages that are usually, uh, public facing, but you can also create internal tooling with them as well. Um, they’re usually a very simple experience. It’s usually one or two pages for a collection, um, but they are very flexible. You can have a cloud page with HTML, your CSS, your client side JavaScript. All this is there to help enhance your cloud pages. Uh, they are very powerful if you know how to use them correct. Um, so there are the ability to, directly in the cloud page, use server side JavaScript and AMPscript, uh, but you could also use client side JavaScript to talk asynchronously to, uh, code resource pages and external systems as well.

So with cloud pages, we’re talking about JavaScript frameworks, specifically Vue JS. Um, so if you know anything about the development landscape, you know that there is this great JavaScript framework war between React, Vue JS, um, a handful of other ones. And today, I’m talking about Vue JS because it is, in my opinion, uh, the more approachable framework when it comes to JavaScript development and jumping into it to learn it. Um, so like I said, it’s approachable. Uh, a lot of the syntax you’ll recognize from your standard HTML and JavaScript. Um, it’s not fully learning a whole new language. Uh, it’s performance. So it’s reactive when it’s used in the browser. You’re able to actually see what’s going on on your page in real time based on your Vue JS state. Um, and it’s versatile. So you’re able to actually incrementally adopt it into your CloudPage ecosystem. Uh, and it really scales between your small projects and your large projects because it’s kind of that mix between a, uh, a code library and a full featured framework. So really depending on how you want to use it, how you need to use it, it can really suit your, uh, uh, your need and your development flow, uh, fairly well for no matter whatever your situation is.

So some of the benefits of Vue JS over some of the other, uh, frameworks is it has this template syntax. So this template syntax is what really extends it from your standard HTML, uh, making it very familiar. So you have all your same HTML five tags, your div tags, your paragraph tags, so on and so forth. Um, and then it brings in its own view, uh, syntax on top of that, allowing you to mix that into your existing HTML. Um, so for example, on the screen on the the screenshot, you have that v if statement right within your paragraph tag, uh, that’s allowing you to add that logic without having to write JavaScript somewhere else. Um, it’s reactive. So Vue JS has its own state system where you’re actually able to update those, uh, model properties and see them take place within real time in your application. The other biggest benefit to this for me was the components. So Vue JS allows you to build in smaller modularized type blocks. So you can take your larger application, break it down into smaller bite sized pieces that are easier to manage, easier to develop, and easier to maintain and troubleshoot. Um, the last bit of this that makes Vue JS a very, uh, logical choice when looking at a development framework for cloud pages is you can use it with and without a build step. So what that means is you don’t have to have a server environment like an AWS or a GCP to actually use it. You can pull it in directly from a content delivery network so that it works directly in your browser, uh, without a whole lot of extra configuration.

So thinking modular makes your complex applications and your complex, uh, cloud pages more approachable. So when you are looking at a application that you wanna bring to a cloud page or a simple, uh, public facing page, you start to think about it in components. And each component has its purpose. Each component can be reusable, so you’re writing less code. And then depending on how you set it up within your cloud page environment, you can easily add and remove features and components, uh, simply by removing that component from your main pages. Uh, so this really makes adding on to, um, your implementations easier in the long run as well as being able to swap out features or manage those as needed.

So let’s take a look at a little bit a little bit more code, uh, to see what a VUE JS app kind of looks like. So you again, you have that familiar structure. You have your standard HTML tags. This is a standard page that you can take and paste directly into a cloud page, and it’ll work. Um, so you have your standard head, your body tags, your script tags, um, and your standard HTML tags. Um, and again, you have that Vue JS coming in from a, uh, the CDN. So it’s being imported directly, uh, from the library and being brought in to that browser environment without requiring a build step. The next piece of this is that, uh, div that has that ID of app. So that is your container div and that’s where all of your, uh, Vue JS configuration, all of your components are going to be injected into that container div and that’s where all the rendering that’s where all the magic happens for Vue JS. So if you go down to the script tag, you’ll see that App JS object. So that is the core App JS configuration for your application, uh, and this lives at that top level file. So within here, you’ll start to see, um, you know, a a data function that returns an object. So this is all of your data points that are accessible. You can have your methods or your functions, um, and we’ll get into that a little bit later. And then when you go down a little bit more, you have that view dot create app, uh, that’s actually rendering out that object, bringing it all together, and mounting it within that, uh, ID of app with that div and that container div.

So what I wanna do is I wanna take a, uh, a somewhat real world type application that I have built. I’ve built out a handful of times and um, go over how this would come together using Vue JS. So we’re gonna be taking this example from a simple, uh, data extension search with search results. I’m gonna walk through how you break this down modularly, um, and then it’s gonna show you how to take them and break it down into code snippet blocks and use that asynchronous submission method to talk to a a back end code resource page. Um, so we’re not gonna show all of that within these slides, but at the end of the slide, there is a QR code with the full, uh, GitHub repository with all of this code that you can go in and explore, um, and poke around yourself.

So when we talk about the actual cloud page, um, asset itself, if you were to take this application and put it all on that page, this is what you would kinda get. Um, now this implementation isn’t exactly a huge full scale application. It’s a relatively small implementation. But you can imagine, um, um, you might have something where you have a lot of interactivity, a lot of, uh, different views, or a lot of different data. So you’d wanna take this and break this apart into, um, content block snippets. So we’re gonna take this longer file and break it down so that you can use it in, uh, an environment where you bring everything in with, uh, content block by ID, and this is what your cloud page template really starts to look like. Um, and this is a really easy way to build out a system where, uh, you can take Vue JS and really implement it into any of your, uh, projects.

So I’ve been talking about modularity and taking your projects and breaking them down. So let’s take a look at what this page ends up being and how you could take it and break it down into modules. So we start thinking about our furthest out layer, which is our app JS object, our core object, and our app HTML, um, component that is all the HTML that gets imported into your page. Um, so we have the outer layer in the red. So if we go in, then we have two additional components. We have our search component, we have our results component. So we’re able to take each of these components, isolate the functionality, isolate what each one is doing, and break them apart into different content blocks, so each part is a little bit more manageable. So then we can take this and break this down even more for each list item. So each list item could be its own component, um, and, you know, as as much as you need to break your application down as far as it makes sense, um, you can do that. So the benefit of this is for, like, the list component. Right? You’re able to go in, make updates to that one specific component without modifying, um, or having unintended side effects within other components on your page. So the way that Vue JS looks at components is they are very isolated, uh, which helps in that development.

So we’re taking a look at our core components. So if you look at the AppJIS object, it’s really just a simple, uh, JavaScript object that has some specific Vue JS elements to it. You have your components object, which is you’re registering all of your additional components that are being used. You have your data as a function, which returns your object. So that’s what’s going to inject into your application that you’re actually able to see those data points and bring those into each of your components as needed. You have your methods object, which is a way of for Vue JS to organize your interactive, uh, interactive elements, your interactive functions. And this is where that asynchronous JavaScript requests come in or any kind of data manipulation can come in here as well. So then if you look at the HTML component, you have that container, uh, div with the ID of app, and and then we are actually using our components to let Vue JS know that that’s what needs to be injected into that spot. Um, so in the data extension search component, you have a little bit of UJS specific syntax. That at submit search, um, is letting that component know that it’s going to be expecting data from that child component, and I want that data to be passed to that submit search function. Um, and then if you look at the results, you have that search results, um, property. That’s what’s taking that data extension return, pushing that down into your results component so that it can, uh, do what it is to do and render out those list items.

So child components are very similar to that core component. A lot of the syntax is the same, and you have that template string literal, which is going to be the HTML portion of that specific child component. Um, so the really cool thing about child components and how they relate to their parent components is, like we just talked about, you can actually pass data up to a parent component and take data into a child component from the parent. So they’re able to actually talk to each other, uh, as much or as little as you need to, but you need to explicitly tell your components, this is what I want to do.

So let’s take a look at how the data flows within this type of the structure. So we have our search component that has our input with our submission button. That’s gonna send it to our app JS, uh, parent component, which is gonna use that submit search function to talk to our code resource page. Imagine you have that get data extensions function that goes in, grabs all your data based on your filtering, passes that back into your core app JS function, and then that’s gonna pass it down into your results, which is solely that display element of, uh, your Vue JS app.

So the other big part of using a framework like Vue JS is going to be the dev tools. If you’ve ever worked on a fairly large cloud page, um, with vanilla JavaScript or jQuery, uh, you’re probably putting in a whole lot of console dot logs just to see what’s taking place on your front end during development. Um, that’s a good way to see what’s going on, but it’s also a very cumbersome way to see that. So with Vue JS, you actually have your dev tools. So Vue JS dev tools allows you to visualize your data. So it takes that data object, puts it into your dev tools, and you could actually see what’s going on with your data, where everything is changing. Um, and if you’re troubleshooting, you can see what that data property is at that point of error. So it helps you really track down where your problem components are because you’re actually able to see drill down to that specific component and see what’s going on there rather than just looking through a mess of console dot logs or, um, other ways of debugging of vanilla JavaScript project. With the dev tools, you’re actually able to see the specific events that are taking place. So that submit function, when that submit button is clicked, it’s gonna tell the Vue JS dev tools that an event happened. This is the data that I’m admitting, and this is where it’s supposed to go. So So you’re actually able to see and track those events as they’re happening in real time to see where your breakdowns are and where you need to focus your troubleshooting efforts. The other aspect of it that I really, really love is when you have a lot of, uh, JavaScript logic or business rules that are either showing things or hiding things based on your specific rules. Uh, you could actually test those rules directly within the browser without having to go back to a data extension, uh, or a code snippet block to change a value, reload the page, and get back to where you are. With the dev tools, you could actually go in, change that value right then and there, and see how it’s gonna react in your browser without having to do a whole lot of steps, uh, which really saves a lot of time.

So taking a look at the dev tools, this is kind of what that looks like, where you’re actually be able to go into that data extension search component and see what the actual data is at the point in time you’re looking at it. Um, and again, I can go in and I can change that data extension name value. Um, if I had different logic, I can go in and change that, and you’ll see that reflected on your page in real time.

So all of that’s great. Vue JS is great, um, but Vue JS is one of those tools that, uh, needs that developer mindset. So when should you and when should you not use Vue JS? When does it shine and when does it really hinder your development? Um, because it’s really all about the tools the right tools for the project, right tools for the job. So where Vue JS really shines is those small to medium size pages and applications within marketing cloud that you might have a handful of data points that you need to manipulate or handle. A decent amount of business logic you need to maintain or you’re taking a larger application and breaking it down to smaller bite sized modules. Um, that’s really where Vue JS shines. When you’re looking at larger projects that need to be maintained over a good amount of time, there is a certain threshold where Vue JS is only going to help so much, and then you’re gonna start working against Vue JS in the Salesforce marketing cloud environment, might be time to look elsewhere for your your development, uh, needs and your hosting needs. Um, but that small to medium paged applications are where Vue JS can really help streamline some of your development.

So thank you so much for joining me. Um, we do have about eight or nine minutes left for q and a if you guys have any questions. Um, at the the QR code, you can find all my social media links, um, all of the Slack communities that I am a part of, as well as the full project code for, uh, this presentation and that data extension search implementation. Um, if you’re really curious about what a Vue JS app really looks like and how you can take it and break it down to smaller components. Um, so I encourage you to take a look at at that link, and feel free to reach out to me if you guys have any questions or comments. I’d love to hear them. Thank you.

Speaker 0: Thank you Tony that was great um I’m not seeing any questions we’ll give everybody maybe like another minute or so if you have anything to get into the chat But, yeah, I just wanted to say thank you for, uh, presenting your session today. It was awesome, and I learned a few things. You know?

Speaker 1: Excellent. Thank you so much for having me. I appreciate it.

Speaker 0: Of course. And we still have a little bit of content left today at BarDream, and I think we have just the closing, um, some closing remarks and one more, uh, one sessions to go. So

Speaker 1: Excellent. Looking forward to it.

Speaker 0: Cool. Not seeing anything. So oh, question. Okay. So

Speaker 1: Typically use cases for them. Sure. Um, so typically, when you think of cloud pages, you usually look at your preference centers or some sort of, like, lead management. Um, you might build out customer facing forms for specific, um, campaigns, things like that. Um, that’s usually where most people scratch the surface, and then they don’t really explore them further. Um, probably about four or five years ago, maybe longer, um, is when I started to really push that what you can do with a cloud page, um, and realizing that a cloud page is really just a an environment where you can run a single HTML page with JavaScript and HTML and all that kind of stuff, uh, really opened my eyes to what you can really do. So some of the other use cases are, like, internal toolings to build out automated processes, data extension searches, things like that. Um, really depends on what kind of organization you work with and where their efficiencies really can be pushed. Um, I remember at a previous position that I had, we had run giveaways, and we used to do them in a Google, uh, Google form and a Google sheet. And I was like, we can do all this stuff on a cloud page and get it directly into marketing cloud. So we built out a full blown giveaway system within a cloud page where through dynamic query string parameters, you are actually able to read from a data extension and manage giveaways from content within the data extension. So it took their process of standing up a giveaway, um, collecting the information, getting it into marketing cloud from, like, a couple day process to maybe fifteen, twenty minutes, um, with an admin panel that they can go in, put the information directly into a data extension, and then they have their page already created dynamically. Um, so it it’s really about finding the the use cases within your organization that can benefit benefit from a little bit of automated enhancement and just creative thinking around what you can do with them.

Speaker 0: Absolutely. Uh, that was a great question, Alicia. Thank you. Alright. Um, not seeing anything else. So alright. I guess we will, uh, close out this session. Thank you everybody for coming and for saying, um, for all of Marjeenan. Yep. Thank

Speaker 1: you guys so much.