How to print javascript variables and show them in console?

Question

I'm trying to implement google ads conversion on my website and as per the google team, I added the tags they gave yet the conversion is not showing up properly.

After getting in touch with one of the team members, he told me to correct the code:

So far My code:

• I m passing an email value through the URL to the 'Thank-you' page.
• I m echoing the value inside a hidden input tag and calling it back using ID in javascript
• I can get the value from the input and print it in the console.

<input type="hidden" id="email_for_ads" value="some@email.com">
<script>
  var email_for_ads = $("#email_for_ads").val();
  var enhanced_conversion_data = {
    "email": email_for_ads
  };
    console.log(email_for_ads);
</script>

I can see the email id in the console, and I'm sure the value is being fetched.

But he said it should be like below upon inspect:

<input type="hidden" id="email_for_ads" value="some@email.com">

<script>
  var email_for_ads = $("#email_for_ads").val();
  var enhanced_conversion_data = {
    "email": "some@email.com"
  };
    console.log("some@email.com");
</script>

I even tried the below code too

var baseUrl = (window.location).href; // You can also use document.URL
  var email_for_ads = baseUrl.substring(baseUrl.lastIndexOf('=') + 1);
  //var email_for_ads = $("#email_for_ads").val();
  var enhanced_conversion_data = {
    "email": email_for_ads
  };
    console.log(email_for_ads);

yet the same output. I can see the value in the console but on inspect. But he insists that it is that way and could be able to see the email value directly in inspecting itself.

Can someone understand, whether this is possible, if so, how can i do it.

Answer 1

It's possible , but very very weird, and I'd highly recommend against it - it doesn't provide any benefits except, I guess, when debugging, but when debugging it'd be easier to just retrieve the input value.

If you wanted the input value to be printed directly in the <script> tag, you'd have to create the script tag dynamically, either with document.createElement('script') or document.write .

For that to be possible, you'd need another script tag to create the dynamic script tag.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="hidden" id="email_for_ads" value="some@email.com"> <script> // remove this script tag document.currentScript.remove(); // append new script tag, with the input value directly in the source code const email_for_ads_first = $("#email_for_ads").val(); document.write(` <script> var email_for_ads = $("#email_for_ads").val(); var enhanced_conversion_data = { "email": "${email_for_ads_first}" }; console.log("${email_for_ads_first}"); // log this script tag contents, so you can see what's in it: console.log(document.currentScript.textContent); <\/script> `); </script>

There's no good reason do this. Please don't.

Answer 2

You may need a server-side rendering technology to generate your email value into your HTML and scripts.
You can consider starting a service in nodejs, get the email value in the request,and in the response，return the email with your html and scripts.