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="[email protected]">
<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="[email protected]">

<script>
  var email_for_ads = $("#email_for_ads").val();
  var enhanced_conversion_data = {
    "email": "[email protected]"
  };
    console.log("[email protected]");
</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.

you are right, your colleagues is not.

高欣平
– 高欣平

2022-05-23 07:00:27 +00:00
Commented May 23, 2022 at 7:00 — 高欣平
– 高欣平, Commented May 23, 2022 at 7:00

CertainPerformance · Accepted Answer · 2022-05-23 07:00:00Z

2

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="[email protected]">
<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.

answered May 23, 2022 at 7:00

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Harry Over a year ago

Thank you bro, learned something today. really appreciate your time.

Harry Over a year ago

Can you please take a look at this other question of mine? Thanks. stackoverflow.com/questions/72256374/…

zyp · Accepted Answer · 2022-05-23 07:14:58Z

0

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.

answered May 23, 2022 at 7:14

zyp

553 bronze badges

Collectives™ on Stack Overflow

How to print javascript variables and show them in console?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related