Cloudpage code resources - add a interactive experience that was built for our site into Cloudpage

Ashleigh Willard (Nationwide Insurance) 

I am trying to add an interactive experience that was built for our site into Cloudpage. I received the files with the code sources from my vendor and it looks as though there are 60+ .js files. Is there anything that I can do to upload this all at once or am I going to need to minify them or upload them separately. Any help or suggestions on this would be super helpful! Thank you.


Christopher Barrett (Digital Toulouse)

Hi Ashleigh, my initial thoughts are do you really need 60+ js files for your cloud page? I would imagine a few common js files like bootstrap, jquery, and some UI component libraries. Other than these types of files, on a SFMC cloud pages the number of js files isn't often that numerous. I don't know your context, but it might be worth doing an initial audit to see what you really need. If you can reduce the number of files then this will always save on maintenance and debugging. I guess when you say that you are building an "interactive experience", no doubt this would require multiple js files to build out the UI.   

 

OK, working with the fact that the number of js files is 60+, then an asset bundler could be a good option. One of the more popular ones is  webpack. It will bundle and minify your js files into a single bundle.js file. There is an initial time investment to get it setup but over the long term it may save you time with maintenance.  It is possible to also bundle up all the js files from a folder.   

On youtube there are no doubt tutorials on how to set this up. It does get a little codey, so I'm not sure if this solution is for everyone. Nevertheless, once it's mastered, it can be useful for other similar situations. 

 

Otherwise, besides the obvious approach of including the scripts tags on the 60+ js files, it could be possible to create a js file that inclues all the other files.  Here is an example of this approach to include multiple js files in a script. https://www.geeksforgeeks.org/how-to-include-a-javascript-file-in-another-javascript-file/


Comments

Post a Comment

Popular posts from this blog

Data Extension and List in SFMC

   Q1. What is Difference between Data Extension and List ?   Q2. Why Most the Marketers they go with Data Extension ?  --  List :  List is a storing data method in SFMC. Collection of subscribers that receive your communications. You can create as many lists as you want to segment your subscribers.    1. Your lists contain  500,000 subscribers or fewer. 2. You prefer simplicity over performance. 3. You don’t  require fast import speed. 4. You plan to use a  limited number of subscriber attributes. (First Name, Last Name, Email Address, Status.) Advantages: 1. A List can be configured to  send a welcome email when a new subscriber opts in. 2. Lists also give you the option to  enable double opt-ins for new subscribers to receive an email  containing a link to confirm their email address.   Disadvantages: 1. If we have data of  more than 500,000 then we can't use List. 2. If a  recipient u...
Read more

What is the different email-sending options in SFMC with examples?

Salesforce Marketing Cloud (SFMC) offers various email-sending options to cater to different use cases and requirements. Here are some of the commonly used email-sending options in SFMC, along with examples: Standard Send: Description: The Standard Send option allows you to send an email to a specified list or data extension. Example: Sending a promotional email to a segment of subscribers who meet specific criteria, such as customers who have made a purchase in the last 30 days. Triggered Send: Description: Triggered Sends are initiated by specific events or actions, such as a subscriber filling out a form on a website or making a purchase. Example: Sending a welcome email to a new subscriber immediately after they sign up on your website. User-Initiated Send: Description: User-Initiated Sends allow users to manually send an email to a specific recipient or a small group of recipients. Example: Sending a personalized email response to an...
Read more

Difference between Journey Builder and Automation studio?

  Journey Builder and Automation Studio are both powerful tools within Salesforce Marketing Cloud (SFMC) that enable marketers to automate and manage customer journeys and campaigns. However, there are key differences between these two tools. Here's a comparison: Journey Builder: Journey Builder is a visual and interactive tool in SFMC that allows marketers to create and manage customer journeys. It provides a drag-and-drop interface to design and orchestrate multi-channel, personalized customer journeys across email, SMS, push notifications, social media, and more. Marketers can define different stages, decision points, and actions within a journey to deliver relevant and timely messages based on customer interactions, behaviors, and attributes. Journey Builder offers capabilities such as entry criteria, split paths, decision splits, engagement splits, goal settings, and reporting to optimize and measure the succe...
Read more