0

i have a cloud page in marketing cloud.

In cloud page, I am using ampscript and javascript both. Can i pass variables values from my ampscript to javascript directly?

I have already tried this example:

%%[

var @CodeP
set @CodeP = RequestParameter("j")

]%%

<script runat="server">

  Platform.Load("Core","1");
  var CodeP = Variable.GetValue("@CodeP");
  Write("<br>CodeP: " + CodeP);

</script>

The problem is that this approach breaks my javascript because my javascript on cloud page starts with this:

 <script type="text/javascript">

Adding runat="server" breaks the existing functionality of my javascript.

please help?

Improve this question
2
  • You don't have to write "type" part, why don't you use it with just <script runat="server">? – Selim Sevim Aug 20 '18 at 7:55
  • can you provide more context? This sounds like an outlying syntax issue and not an issue with the GetValue function. – Gortonington Aug 20 '18 at 12:45
6

I think what you are missing here is that Salesforce Marketing Cloud Server Side JavaScript is not the same as JavaScript that runs on the browser. Adding runat="server" to the script block causes your code to be executed by the SFMC server as Server Side JavaScript, meaning if it includes any of the standard browser JavaScript functions like DOM manipulation, it will not work. In fact, it will not even load on the page and will possibly throw a server error due to the limitations of what SFMC will allow you to run server side.

The Variable.GetValue function is specific to Server Side JavaScript and will not work to pass the value of the variable to browser JavaScript. To do so, the best way I have found is to create a hidden form field or div with the value of the variable like this:

<input id="CodeP" type="hidden" value="%%=v(@CodeP)=%%">

Or this:

<div style="display:none;"><p id="CodeP">%%=v(@CodeP)=%%</p></div>

You can then retrieve that value in you JavaScript like this:

<script>
  // Retrieve value of hidden field
  var codeP = document.getElementById("CodeP").value;
  // Retrieve inner html of the p tag
  var codeP = document.getElementById("CodeP").innerHTML;
</script>
Improve this answer
1
  • This is exactly what I did as a workaround. Thank you for sharing the info @ncv – kuml Aug 27 '18 at 15:06
0

Even I am trying to pull the Ampscript Data into Javascript Variable. Your approach didnt work for me.

Couple of questions here:

  1. Where should the Script Tag included? Is it inside Head tag/inside Body tag/after body tag?

  2. Tried with Document Ready/body onLoad functions too. No luck!

  3. Tried with Wait time to load element, I could see the element in console as below.

    input id="CodeP" type="hidden" value="<table cellpadding"

Here is my code:

<!DOCTYPE html>
<html>
  <head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        // Retrieve value of hidden field
        var promoId1 = document.getElementById("promoId1").innerHTML;
        console.log('promoId1 ready->',promoId1);
        // Retrieve inner html of the p tag
        var codeP = document.getElementById("CodeP").value;
        console.log('codeP ready->',codeP);
      });
    </script>
  </head>
  <body >
    <div class="myClass" id="page1">
Header
      %%[
       var @promoTemplate1

       SET @promoTemplate1=ContentBlockbyKey("PromoTemplate1_Key")

      ]%%

      html:
      <div style=""><p id="promoId1">%%=v(@promoTemplate1)=%%</p></div>
      value:    
      <input id="CodeP" type="hidden" value="%%=v(@promoTemplate1)=%%">

    </div>
    
  </body>
  <script>
      // Retrieve value of hidden field
      var promoId1 = document.getElementById("promoId1").innerHTML;
      console.log('promoId1->',promoId1);
      // Retrieve inner html of the p tag
      var element= document.getElementById("CodeP"); 
      console.log('element->',element);
      var codeP = document.getElementById("CodeP").value;
      console.log('codeP->',codeP);
    </script>
</html>

PS: I am able to see Ampscript Values inside Cloudpage UI

When I printed the Output using below log, i could see HTML Text wrapped to my actual content. Could'nt seperate it out even with TreatAsContent.

console.log(`%%=v(@promoTemplate1)=%%`);

Output:

<table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper"><tr><td class="stylingblock-content-wrapper camarker-inner">**mycontent**</td></tr></table>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.