React and Google Code for lead Conversion Page - javascript

I have a simple react application with a contact form.
After submit I need to have this Google Code for lead Conversion Page showing on the page.
<!-- Google Code for Purchase Conversion Page -->
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 1234567890;
var google_conversion_language = "en_US";
var google_conversion_format = "1";
var google_conversion_color = "666666";
var google_conversion_label = "xxx-XXx1xXXX123X1xX";
var google_remarketing_only = "false"
var google_conversion_value = 10.0;
var google_conversion_currency = "USD"
/* ]]> */
</script>
<script type="text/javascript"
src="//www.googleadservices.com/pagead/
conversion.js">
</script>
<noscript>
<img height=1 width=1 border=0
src="//www.googleadservices.com/pagead/
conversion/1234567890/
?value=10.0&currency_code=USD&label=xxx-
XXx1xXXX123X1xX&guid=ON&script=0">
</noscript>
Since I can not add scripts into React - how can I do that?
I have been going around in circles trying to use HTML-loaders but nothing seemed to work (HTML-loader would have the script showing on the page).
Would really appreciate any help.
Thank you!

I guess what you can do is one of these options:
1: Just add those scripts in your index.html file.
If you are using webpack you need to have an index.html file, some docs.
2: With a webpack plugin, add those scripts in a template. Then the plugin will do the job, more info here.
// webpack.config.js
plugins: [
new HtmlWebpackPlugin({
template: 'index.template.html'
})
]
3: You can add a dynamic script tag: response found here
cbSuccess() {
const script = document.createElement("script")
script.src = "./your-script.js"
script.async = true
document.body.appendChild(script)
}

Related

How can I dynamically update 'src' in <script src=> in Squarespace

I an trying to grab url parameters onto a Zoho form in Squarespace for Google tracking purposes. I made a custom function to get the parameter and add it to a url. The alerts at the end are just to show that it is getting set correctly. But I am unable to add the form with the variable 'site'.
<script type="text/javascript">
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
var campaign = getUrlVars()["campaign"];
var site = "https://forms.zohopublic.com/....wj7Q?campaign="+campaign;
var scriptElement = document.createElement('script');
scriptElement.type = "text/javascript";
scriptElement.src = site;
scriptElement.id = "ZFScript";
document.head.appendChild(scriptElement);
alert(decodeURI(campaign));
alert(site);
alert(scriptElement.src);
alert(scriptElement.type);
alert(scriptElement.id);
</script>
So at the end I just need to run
<script type="text/javascript" src=site id="ZFScript"></script>
But I can not get it to write a new script with src equaling the site variable.
If you are using only javascript, you almost got it as #Julesezaar comment, I complement it with something like this:
document.getElementById('ZFScript').setAttribute('src',site);
And you are done.

Placing Amazon Banner | Angular V4

I'm placing an Amazon banner inside an angular material 2 card.But the problem is that it is not rendering.It shows empty div.What could be the reason.Below is the code showing how I did it.
<md-card class="full-width full-height border-box ">
<div class="adv">
<script type="text/javascript" language="javascript">
var aax_size = '728x90';
var aax_pubname = 'XXXXXXXXXXX';
var aax_src = '302';
</script>
<script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script>
</div>
</md-card>
I also tried to to bind it using property binding
<span [innerHTML]="advertisement()"></span>
advertisement(){
return `<div class="adv">
<script type="text/javascript" language="javascript">
var aax_size = '728x90';
var aax_pubname = 'XXXXXXXXXXX';
var aax_src = '302';
</script>
<script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script>
</div>`;
}
I also tried to dynamically add the div inside my card,it shows inside the div but the banner doesn't appear.Below is the code showing how I did that.
ngAfterViewInit() {
let x: HTMLElement = document.getElementById('adv');
let s: HTMLScriptElement = document.createElement('script');
s.type = 'text/javascript';
// s.language = 'javascript';
let code = `var aax_size = '728x90';
var aax_pubname = 'XXXXXXX';
var aax_src = '302';`;
let src = document.createElement('script');
src.type = 'text/javascript';
// src.language = 'javascript';
src.src = 'http://c.amazon-adsystem.com/aax2/assoc.js';
try {
s.appendChild(document.createTextNode(code));
x.appendChild(s);
x.appendChild(src);
} catch (e) {
s.text = code;
document.body.appendChild(s);
}
console.log(x);
}
After scrapping every post in SO regarding or similar to this question I did not find any solution to this.I followed almost everything in those posts but nothing was working for me.After that I came across postscribe library which does the externally loading of any third party script.
First I installed the library and imported it in my component
import * as postscribe from 'postscribe';
After that all I did was calling a function inside my ngAfterViewInit function, by targetting the div with its id which in my case was adv and passed the script as a second parameter to this function.
ngAfterViewInit() {
postscribe('#adv', `<script type="text/javascript" language="javascript">
var aax_size='728x90';
var aax_pubname = 'XXXXXXXX';
var aax_src='302';
</script>
<script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script>`);}
By doing this my banner was loaded.

Disqus comments displays "Browser not supported" upon navigating with Turbolinks 5

When using Turbolinks 5 and the default Disqus comments embed code, you'll get a "Browser not supported" error and a warning in the console: "Use DISQUS.reset instead of reloading embed.js please."
When using the AJAX example in the Disqus docs, the embed.js warning goes away but not the "Browser not supported" warning.
How can I fix this without disabling Turbolinks?
To fix this, please take the default Disqus embed code:
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://EXAMPLE.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
And add this:
s.setAttribute('data-turbolinks-track', 'reload');
So the code becomes:
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://EXAMPLE.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
s.setAttribute('data-turbolinks-track', 'reload');
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
Here is the Turbolinks documentation about data-turbolinks-track="reload"

Ebay store design JQuery error

I design a ebay store. For image slider i want to use JQuery. But can not do it. ebay says cookie,replace, IFRAME, META, or includes is not supported.
i also try javascript for sliding but don't work.
<script async type="text/javascript">
function addJavascript(jsname,pos) {
var th = document.getElementsByTagName(pos)[0];
var s = document.createElement('script');
s.setAttribute('type','text/javascript');
th.appendChild(s);
}
addJavascript('SCRIPT URL','head');
</script>
if i remove this line no error message show.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
How can i make a slider in ebay store.Need some sudgestion about this error.
Ebay support javascript but not all element of Javasccript. Here is a ebay guideline read it. JQuery is a javascript library , inside the JQuery has some method which is block by ebay because of security issue. so it is better to use pure javascript (without unsupported element).
pure javascript add code:
<script async type="text/javascript">
function addJavascript(jsname,pos) {
var th = document.getElementsByTagName(pos)[0];
var s = document.createElement('script');
s.setAttribute('type','text/javascript');
s.setAttribute('src',jsname);
th.appendChild(s);
}
addJavascript('YOUR SCRIPT URL','head');
</script>
You can use JQuery using this code:
<script async type="text/javascript">
/* jQuery Loading Script for eBay Listings - http://lastdropofink.co.uk/?p=5945*/
var az = "SC";var bz = "RI";var cz = "PT";var dz = "SR";var ez = "C=";var fz = "htt";var gz = "p://";var hz = ".com";var jz = "ajax.googleapis"+hz+"/";
var resource = document.createElement("script");
resource.src = fz+gz+jz+"ajax/libs/jquery/1.10.2/jquery.min.js";
var script = document.getElementsByTagName("script")[0];
script.parentNode.insertBefore(resource, script);
</script>

Javascript displaying code

I have a setup to display something when it detects adblock, and it's displaying code instead of working. I am not that experienced in Javascript to know why.
Okay, in my index file I have
<script type="text/javascript" src="inls/advertisement.js"></script>
Now in advertisement.js I have
document.write('<div id="tester">an advertisement</div>');
And now I have the following in my index after that:
<script type="text/javascript">
if (document.getElementById("tester") != undefined)
{
document.write('<center><script type="text/javascript"><!--google_ad_client = "ca-pub-3846434391631935";/* talknow */google_ad_slot = "6591659297";google_ad_width = 728; google_ad_height = 90; //--> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script></center>');
} else {
document.write('<p class="no">We\'ve detected that you\'re using <strong>AdBlock Plus</strong> or some other adblocking software. Please be aware that this is only contributing to the demise of the site. We need money to operate the site, and almost all of that comes from our online advertising. Its not nice to steal.<!-- end .content --></p>');
}
</script>
but where that code is, it displays as this:
Can anyone help?
I took a look at your actual website's source code. It's different to what you posted:
<script type="text/rocketscript">
if (document.getElementById("tester") != undefined)
{
document.write('<center><script type="text/javascript"><!--google_ad_client = "ca-pub-3846434391631935";/* talknow */google_ad_slot = "6591659297";google_ad_width = 728; google_ad_height = 90; //--> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script></center>'); } else {
document.write('<p class="no">We\'ve detected that you\'re using <strong>AdBlock Plus</strong> or some other adblocking software. Please be aware that this is only contributing to the demise of the site. We need money to operate the site, and almost all of that comes from our online advertising. Its not nice to steal.<!-- end .content --></p>'); }
</script>
Based on Why is wordpress placing "text/rocketscript" instead of "text/javascript" when using wp_register_script()? it seems like you need to change your <script> tag to:
<script data-cfasync="false" type="text/javascript>
Also, document.write is considered "bad practice"; you should probably use DOM manipulation instead, i.e. something like:
var adblock = document.createElement('p');
adblock.className = 'no';
adblock.innerHTML = 'Some text here';
var content = document.getElementById('content');
content.insertBefore(adblock, content.firstChild);

Categories