I am using the Tawkto script in my index.html file in my react project but I don't want it to be accessible in all components. How do I do this.
This is all I know so far.
<!--Start of Tawk.to Script-->
<!-- <script type="text/javascript">
var Tawk_API = Tawk_API || {},
Tawk_LoadStart = new Date()
;(function () {
var s1 = document.createElement('script'),
s0 = document.getElementsByTagName('script')[0]
s1.async = true
s1.src = 'https://embed.tawk.to/propertyId/tawkId'
s1.charset = 'UTF-8'
s1.setAttribute('crossorigin', '*')
s0.parentNode.insertBefore(s1, s0)
})()
</script> -->
<!--End of Tawk.to Script-->
Please anyone should help me
Related
Inside my JS function I need to add this:
< script src=https://xxxx.com/c3.js type="text/javascript" async defer>< /script>
How to edit the code the right way?
<script>
function affilate() {
var ab_instance = "xxx.com";
var ab_kampan = 3;
var ab_cena = 1;
var ab_id_transakce = document.getElementById("email").value;
<script src=https://xxxx.com/c3.js type="text/javascript" async defer></script>
console.log(ab_id_transakce);
}
</script>
If I understand your question correctly, you are trying to add a script tag to the DOM. It seems that you are trying to add the HTML script tag in the Javascript function, which will not work. What you can try is:
Add the script tag directly in the HTML like this:
<script src=https://xxxx.com/c3.js type="text/javascript" async defer></script>
<script>
function affilate() {
var ab_instance = "xxx.com";
var ab_kampan = 3;
var ab_cena = 1;
var ab_id_transakce = document.getElementById("email").value;
console.log(ab_id_transakce);
}
</script>
Add the script tag dynamically
<script>
function affilate() {
var ab_instance = "xxx.com";
var ab_kampan = 3;
var ab_cena = 1;
var ab_id_transakce = document.getElementById("email").value;
console.log(ab_id_transakce);
var script_tag = document.createElement("script");
script_tag.src = "https://xxxx.com/c3.js";
script_tag.type = "text/javascript";
script_tag.async = true;
script_tag.defer = true;
// in case you want to add the script tag to the <head>
document.head.appendChild(script_tag);
// in case you want to add the script tag to the <body>
document.body.appendChild(script_tag);
}
</script>
I used the following javascript function for our cookie consent message on our website. How can I add the Mailchimp code to this? The problem is that Mailchimp needs the <script id="mcjs">
Code I'm using to check if someone allows cookies. If so than activate Google Analytics etc.
function BlockCookie() {
var imported = document.createElement('script');
imported.src = 'https://www.googletagmanager.com/gtag/js?id=ANALYTICS_CODE';
document.head.appendChild(imported);
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'ANALYTICS_CODE', { 'anonymize_ip': true });
window._mfq = window._mfq || [];
(function() {
var mf = document.createElement(\"script\");
mf.type = \"text/javascript\"; mf.defer = true;
mf.src = \"//cdn.mouseflow.com/projects/cae0bb6e-2421-49b4.js\";
document.getElementsByTagName(\"head\")[0].appendChild(mf);
})();
}
Mailchimp code I would like to add to the function
<script id="mcjs">!function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,"script","https://chimpstatic.com/mcjs-connected/js/users/01ad3420bde595/306da052f4.js");</script>
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¤cy_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)
}
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.
Currently I am using three external JS file.
<script src="https://code.jquery.com/jquery-2.0.0.min.js" type="text/javascript"></script>
<script src="http://example.com/jquery.cookie.js" type="text/javascript"></script>
<script src="http://example.com/js.cookie.js" type="text/javascript"></script>
I like to make all three JS file in one.
Do it possible. i create aio.js and inside aio.js
src="https://code.jquery.com/jquery-2.0.0.min.js";
src="http://example.com/jquery.cookie.js";
src="http://example.com/js.cookie.js";
And then i will add
<script src="http://example.com/aio.js" type="text/javascript"></script>
So the Single File aio.js call all the 3 files.
Thanks in advance.
Here is the Live example..
var element1 = document.createElement("script");
element1.src = "https://code.jquery.com/jquery-2.0.0.min.js";
document.body.appendChild(element1);
console.log(element1)
For you :
Put this code in your http://example.com/aio.js file
window.onload = function() {
var element1 = document.createElement("script");
element1.src = "https://code.jquery.com/jquery-2.0.0.min.js";
document.body.appendChild(element1);
var element2 = document.createElement("script");
element2.src = "http://example.com/jquery.cookie.js";
document.body.appendChild(element2);
var element3 = document.createElement("script");
element3.src = "http://example.com/js.cookie.js";
document.body.appendChild(element3);
}
And in your html file..
<script src="http://example.com/aio.js" type="text/javascript"></script>