CLOUD PAGE ENABLEMENT - PART 3

 CLOUD PAGE ENABLEMENT - PART 3


USE CASE :

Create a cloud page to collect consent from subscribers. 

1. Leverage content blocks to call AMPScript blocks and HTML blocks
2. Build custom CSS using code resource and leverage it in your cloud pages

In our part 1 and part 2 of this series we have learnt how to built cloud page(s) with form controls using HTML content block, and, AMPScript block to Upsert data into data extension using code snippet.

If you want to recap , here are the links 

In Part 3 of this series we will learn how to add custom css leveraging code resource and how to use them in our Consent Landing page.

Step 1. Create a CSS code resource



Click Next



Step 2. Add Custom CSS and publish the page :


<style class="main_style">p {
    display: block;
}

body {
    color: #000;
    font-family: Arial !important;
    font-size: 12px;
    margin: 0 auto !important;
    max-width: 1280px;
    padding: 5px !important;
    background-color: #e7e9eb !important;
}

.fw-bold {
    font-weight: 700 !important;
}

div {
    display: block;
}

@media screen and (max-width: 1200px) {
    .container {
        max-width: 100%;
    }
}

@media screen and (max-width: 992px) {
    .container {
        max-width: 100%;
    }
}

@media screen and (max-width: 769px) {
    .container {
        max-width: 100%;
    }

    .mobile-hidden {
        display: none !important;
    }

    .responsive-td {
        width: 100% !important;
        display: block !important;
        padding: 0 !important;
    }
}

</style>

Step 3. Go to you landing page and include CSS link to your landing pages

Copy the URL of your CSS code resource and update the "href" attribute value 

<link rel="stylesheet" href="https://tenantEndPoint/ConsentStyles">

For bootstrap CSS , add the below CSS as well
 <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css"> 

I would also suggest you to add meta tag to your html 
   <meta name="viewport" content=
   "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Let's see how our landing page looks like :

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,
    initial-scale=1, maximum-scale=1, user-scalable=0" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href=
        "https://TenantEndPoint/ConsentStyles">
    <link rel="stylesheet" href=
    "https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href=
    "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
    <script runat="server">
      Platform.Load("Core","1.1.1");
      try{
    </script>
    %%=ContentBlockbyKEY("ConsentBlock")=%%
    <script runat="server">
      }
      catch(e){
        Variable.SetValue("@message1",e.message);
      }
    </script>
  </head>
  <body>
    <div class="p-3 mb-2 bg-secondary text-white">
      <div class="section">
        <div class="columns col1">
          <div data-type="slot" data-key="col1">
            <div class="alert alert-warning alert-dismissible fade show"
             role="alert"  %%=v(@hidden)=%%>
              <strong>%%=v(@message1)=%%</strong>%%=v(@message2)=%%
              <button type="button" class="close" data-dismiss="alert"
aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            %%=ContentBlockbyKEY("ConsentForm")=%%
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Comments

Post a Comment

Most Viewed

Image

CLOUD PAGE ENABLEMENT - PART 1

 CLOUD PAGE ENABLEMENT - PART 1 CREATE A CLOUD PAGE IN MARKETING CLOUD  USE CASE : Create a landing page in marketing cloud to collect consent from subscribers. Step 1: Create a landing page and publish it [no coding required] Step 2: Build a form control using bootstrap  <form class = "row g-3"       action = "https://tenantEndpoint/ConsentCollection"       method = "Post" > </form> Update your form "action" attribute value with your cloud page URL. Method attribute "Post" Add form controls  To collect email, add the below form control <div class = "col-md-6" >       <label for = "inputEmail4" class = "form-label" > Email </label>       <input type = "email" class = "form-control"               id = "inputEmail4" name = "inputEmail4"               value = "%%=v(@inputEmail4)=%%" required %% = ...
Image

EMAIL NOT SENT IN JOURNEY BUILDER

TROUBLESHOOTING JOURNEY SENDS First step towards troubleshooting in SFMC is to install Query Studio from AppExchange. https://appexchange.salesforce.com/appxListingDetail?listingId=a0N3A00000FP3yFUAT Once you have access to Query studio you can write SQL queries and troubleshoot the issues quickly. If you are building a complex queries for a use case, you can write and execute the queries to see if it returns the desired output. Once, you are satisfied with your query you can save and add it to query activity. You can also save the output into a data extension if required, by default query studio stores the output into a data extension under the folder QueryStudioResults. If you have to execute another SQL with the output of the previous result, you can reference the Data Extensions and apply it in your FROM statement. FAQ : 1. How to find out who all did not receive email during journey send ? Best practice is to enable send logging for your account. This will help a-lot during troubl...
Image

CONSIDERATIONS FOR JOURNEY BUILDER

 CONSIDERATIONS FOR JOURNEY BUILDER   WHAT HAPPENS WHEN YOU SEND AN EMAIL OUTBOUND MAIL MANAGEMENT GETS INVOKED BY MARKETING CLOUD , OMM IS NOT IN OUR CONTROL BUT LETS GO THROUGH BEHIND THE SCENE ACTIONS. 1. OOM PREPARES DATABASE FOR THE JOBS, OOM ANALYZES THE EMAIL, WHETHER IT'S A TEMPLATE BASED EMAIL OR HTML, WHETHER EMAILS CONTAINS PERSONALIZATIONS OR DYANMIC CONTNETS.  2.  OOM STRUCTURES THE EMAIL BASED ON HEADER , BODY AND FOOTER. OOM RETRIEVES THE SUBJECT LINE , BODY CONTENT , AMPSCRIPT IN THE EMAIL AND INTERPRETS THE AMPSCRIPT AND RETIRVES IMAGES. 3. BASED ON THE DATABASE AND STRUCUTRE MAINATAINED BY THE OOM, IT DETERMINES THE CONTENT FOR THE SUBSCRIBERS AND PROCESSES TO MAINTAIN THE PLACEHOLDERS FOR EACH SUBSCRIBERS. 4. OOM HAS PLACED THE PROCESSES IN THE QUEUE, OOM BUNDLES EMAILS IN 500 BATCHES AND SEND TO SUBSCRIBERS INBOX.  NOW WE HAVE THE BACKGROUD , WHAT ARE THE CONSIDERATIONS FOR BUILDING A JOURNEY  JOURNEY PERFORMANCE ARE BASED ON : 1. DATA M...
Image

Understanding Transactional Messaging

Understanding Transactional Messaging Home Page Understanding Transactional Messaging Transactional messaging refers to the process of sending automated messages to users in response to specific actions or events. These messages are typically triggered by user interactions or system events and are often personalized and time-sensitive. The primary goal of transactional messaging is to provide relevant and timely information to users based on their actions. Key Characteristics of Transactional Messaging Triggered by User Actions: Transactional messages are usually triggered by ...
Image

Preference Center Demystified

Preference Center Demistifier Home Page Preference Center Demystified Email preference centers can unlock a wealth of subscriber information if executed properly. Learn more about them to create the personalized email experiences that build loyalty and trust. ...

Knowledge Article

Popular Posts

Image

CLOUD PAGE ENABLEMENT - PART 1

 CLOUD PAGE ENABLEMENT - PART 1 CREATE A CLOUD PAGE IN MARKETING CLOUD  USE CASE : Create a landing page in marketing cloud to collect consent from subscribers. Step 1: Create a landing page and publish it [no coding required] Step 2: Build a form control using bootstrap  <form class = "row g-3"       action = "https://tenantEndpoint/ConsentCollection"       method = "Post" > </form> Update your form "action" attribute value with your cloud page URL. Method attribute "Post" Add form controls  To collect email, add the below form control <div class = "col-md-6" >       <label for = "inputEmail4" class = "form-label" > Email </label>       <input type = "email" class = "form-control"               id = "inputEmail4" name = "inputEmail4"               value = "%%=v(@inputEmail4)=%%" required %% = ...
Image

EMAIL NOT SENT IN JOURNEY BUILDER

TROUBLESHOOTING JOURNEY SENDS First step towards troubleshooting in SFMC is to install Query Studio from AppExchange. https://appexchange.salesforce.com/appxListingDetail?listingId=a0N3A00000FP3yFUAT Once you have access to Query studio you can write SQL queries and troubleshoot the issues quickly. If you are building a complex queries for a use case, you can write and execute the queries to see if it returns the desired output. Once, you are satisfied with your query you can save and add it to query activity. You can also save the output into a data extension if required, by default query studio stores the output into a data extension under the folder QueryStudioResults. If you have to execute another SQL with the output of the previous result, you can reference the Data Extensions and apply it in your FROM statement. FAQ : 1. How to find out who all did not receive email during journey send ? Best practice is to enable send logging for your account. This will help a-lot during troubl...
Image

CONSIDERATIONS FOR JOURNEY BUILDER

 CONSIDERATIONS FOR JOURNEY BUILDER   WHAT HAPPENS WHEN YOU SEND AN EMAIL OUTBOUND MAIL MANAGEMENT GETS INVOKED BY MARKETING CLOUD , OMM IS NOT IN OUR CONTROL BUT LETS GO THROUGH BEHIND THE SCENE ACTIONS. 1. OOM PREPARES DATABASE FOR THE JOBS, OOM ANALYZES THE EMAIL, WHETHER IT'S A TEMPLATE BASED EMAIL OR HTML, WHETHER EMAILS CONTAINS PERSONALIZATIONS OR DYANMIC CONTNETS.  2.  OOM STRUCTURES THE EMAIL BASED ON HEADER , BODY AND FOOTER. OOM RETRIEVES THE SUBJECT LINE , BODY CONTENT , AMPSCRIPT IN THE EMAIL AND INTERPRETS THE AMPSCRIPT AND RETIRVES IMAGES. 3. BASED ON THE DATABASE AND STRUCUTRE MAINATAINED BY THE OOM, IT DETERMINES THE CONTENT FOR THE SUBSCRIBERS AND PROCESSES TO MAINTAIN THE PLACEHOLDERS FOR EACH SUBSCRIBERS. 4. OOM HAS PLACED THE PROCESSES IN THE QUEUE, OOM BUNDLES EMAILS IN 500 BATCHES AND SEND TO SUBSCRIBERS INBOX.  NOW WE HAVE THE BACKGROUD , WHAT ARE THE CONSIDERATIONS FOR BUILDING A JOURNEY  JOURNEY PERFORMANCE ARE BASED ON : 1. DATA M...
Image

Understanding Transactional Messaging

Understanding Transactional Messaging Home Page Understanding Transactional Messaging Transactional messaging refers to the process of sending automated messages to users in response to specific actions or events. These messages are typically triggered by user interactions or system events and are often personalized and time-sensitive. The primary goal of transactional messaging is to provide relevant and timely information to users based on their actions. Key Characteristics of Transactional Messaging Triggered by User Actions: Transactional messages are usually triggered by ...
Image

Preference Center Demystified

Preference Center Demistifier Home Page Preference Center Demystified Email preference centers can unlock a wealth of subscriber information if executed properly. Learn more about them to create the personalized email experiences that build loyalty and trust. ...
Image

Journey Builder REST API Documentation

Journey Builder REST API Documentation Home Page Journey Builder REST API Documentation Introduction The Journey Builder REST API allows you to programmatically interact with the Journey Builder feature of Salesforce Marketing Cloud. With this API, you can create, update, and manage customer journeys, as well as perform various operations related to contacts and interactions within those journeys. This document provides detailed information on how to use the Journey Builder REST API to integrate and automate your marketing workflows. Base URL The base URL for accessing the Journey Builder REST API is: ...

Share with Friends

Disclaimer:

The information provided on this technical blog is for general informational purposes only. As a SFMC (Salesforce Marketing Cloud) Technical Architect, I strive to offer accurate and up-to-date content related to SFMC and its associated technologies. However, please note that technology is constantly evolving, and the information provided may become outdated or inaccurate over time.

The content published on this blog represents my personal views and experiences as a SFMC Technical Architect and does not necessarily reflect the official views or opinions of any organization or employer I may be affiliated with.

While I make every effort to ensure the accuracy and reliability of the information presented, I cannot guarantee its completeness, suitability, or applicability to your specific circumstances. Therefore, it is essential to verify any information provided and make your own independent assessments or seek professional advice if needed.

Furthermore, any actions taken based on the information provided on this blog are at your own risk. I shall not be held liable for any damages, losses, or inconveniences arising from the use of the information presented here.

Please keep in mind that SFMC and its associated technologies are complex and require technical expertise for proper implementation and management. It is recommended to consult with qualified professionals or official SFMC documentation for comprehensive guidance.

Finally, please note that any product or company names mentioned on this blog are trademarks or registered trademarks of their respective owners. The mention of these trademarks or registered trademarks does not imply any endorsement or affiliation with the blog.

By accessing and using this blog, you agree to the terms of this disclaimer. If you do not agree with any part of this disclaimer, please refrain from using this blog.

Home Page