As it is November, I want to continue to share one of the tricks I am so thankful for having learned. This trick has made creating CloudPages so much easier for me, not to mention the amount of time it’s saved me. It is definitely something I am thankful to have in my bag of development tricks.
If you’ve worked with cloudpages, then you’ve seen the warning from SFMC that it can take from 5-10 minutes for changes to publish to your cloudpage. 5-10 minutes doesn’t sound that bad until you realize the number of little changes you make as you debug. If you go one change at a time, the 5 minutes here and 10 minutes there can really add up. On the other hand, if you do a whole bunch of changes and it doesn’t work, then you have a whole bunch of things to sort through to find the error, which could take longer than if you had gone one at a time.
I find when I am working on CloudPages that I do a batch of things at the start to get going, but after that, edits and additions happen one at a time. It is easier to debug and easier to see if the change you made had the result you wanted, and with the trick, I am going to teach you today, you don’t have to wait for the changes to publish.
I am constantly learning new things in Marketing Cloud and often attend SFMC trainings. I attended a training in January hosted by Eliot Harper, co-author of The Ampscript Guide, where he edited and loaded the changes to a cloudpage without publishing the changes. In fact, he didn’t even have his code in the Cloudpage. Instead, he had his code in a text editor and used Dropbox to host the code so that the cloudpage could retrieve and load. Every time he edited the code in the text editor, he simply hit save and then refreshed the cloudpage. And tada…. the changes showed on the cloudpage. No delay! No waiting for the code to publish! Nothing. He simply hit refresh, and the cloudpage did a new retrieve of the saved file and loaded.
Let’s break it down and then I’ll show you how to do it.
In SFMC, on the cloudpage – we enter a single line of code. This command is simply giving the instructions to the cloudpage to go to this web address and load the specified file. This is where Dropbox comes in. As long as the file I want to load on the page is saved to my dropbox, I can use the Dropbox link to that file, with a minor change, as the web address in my cloudpage. This eliminates the wait time for publishing changes on the cloudpage. Every time I refresh the cloudpage, it does a fresh reload of the file. So the only wait time I am tied to is how long it takes to update the file in my dropbox. If you enable Dropbox on your machine, you can update it simply by saving the file. This, most times, is relatively instantaneous. Once I’ve saved the file, all I need to do is just hit refresh on the browser tab so that my cloudpage retrieves the code and runs it. This takes WAY less than 5-10 minutes.
Here are step by step instructions so you can try this.
Step 1: Create your file.
You can use any text editor or HTML editor you like. I personally use Sublime Text Editor, as they color code based on the language syntax. This makes it easy to see if I have forgotten a parenthesis or quote. They also have an available add-on for HTML w/AMPscript.
We will use the age old standard of “Hello World” for this tutorial.
Open a new file in your text editor and type:
Then give your file a name and save it.
Step 2: Save to Dropbox.
If you have dropbox enabled on your computer, you should be able to save directly to your Dropbox folder from the save window.
Otherwise, open your dropbox account (A free one will work fine if you do not already have one set up) and upload your file.
Step 3: Retrieve Dropbox Link.
If you have dropbox enabled on your computer, you can open your File Explorer and right-click on the file name, and select “Copy Dropbox Link.”
Otherwise, in your dropbox account, find your file and click on the share button. Don’t email it to anyone. Instead, look at the bottom and click “create link.”
Step 4: Create Your CloudPage.
Go to Web Studio> CloudPages and either select an existing collection or create a new one.
Within the collection click create and select Landing Page.
Give the page a name and shorthand for the URL — Don’t worry you can change these later.
Select “Content Builder” and select “Blank” as your layout.
Step 5: Adding or Clearing your Code Block.
If you want to use the stylings built into Content builder – Drag and Drop an HTML Block into the page layout. This block will be referred to as the “code block.”
The other option is to control all the CSS in your code. For this, select Code View and Delete everything in the Left-hand editable code block – which will be referred to as the “code block” for this option. (This is my preferred)
Your code block should be empty of everything else.
Step 6: Adjusting your DropBox URL.
Next we are going to adjust the URL we pulled from Dropbox that links to our file.
The sample file I set up has the following link from Dropbox:
We need to make 2 changes to this link so that Dropbox will allow our cloudpage to load it.
Change 1: Remove everything after the “?”
Change 2: Replace “www” at the beginning of your URL with “dl”
My sample link looks like this after these 2 changes:
Step 7: HTTPGET & REDIRECTTO
Our code block is only going to have 1 line of code –>
So for my link above my line of code would look like this:
Step 8: Save, Publish & Load
Save your Cloudpage and publish it. (This may take up to 5-10 minutes.)
Click on the URL for your cloudpage to load the page. (To keep things straight, I will refer to this as your “browser window.”
It should load a blank page with the words “Hello World”
Step 9: Edit and Reload
Now that the page is loaded. Go back to your text file. Make a change and save the file. (Make sure your save process also saves to Dropbox – this is done automatically if you are using the desktop application). Then go to your browser window and hit refresh. You should see the changes show immediately on the screen.
Once you are done developing your code, I recommend that you move the code into the CloudPage in Marketing Cloud – especially if you are using a free or personal dropbox. This ensures that the code for the page has a copy in SFMC, so should you leave the company, that page isn’t suddenly gone.
If you don’t have a preferred text editor or a dropbox account – you can still use this trick but with content blocks. To do this – add all the code you would want on the page (what in the previous example was in the saved text file uploaded into Dropbox) into an HTML content block. Instead of a URL – open the content block properties and pull down the ID. Then in the code block on the cloudpage, you would use the following line of code: