Install Customer.io Tracking Script in Yii - javascript

I am trying to install Customer.io to Yii but not sure the process so asking if anyone knows, how should I use the JavaScript code from http://customer.io/docs/api/javascript.html?
I tried to copy into my footer.php under views for main module but it gives me errors.

The simplest way to include JS tracking code in all pages of your site, is to insert it into the master layout.
Browse to protected/views/layouts/main.php, and insert the JS at the bottom of your page right before the closing <body> tag like this:
<script type="text/javascript">
var _cio = _cio || [];
(function() {
var a,b,c;a=function(f){return function(){_cio.push([f].
concat(Array.prototype.slice.call(arguments,0)))}};b=["identify",
"track"];for(c=0;c<b.length;c++){_cio[b[c]]=a(b[c])};
var t = document.createElement('script'),
s = document.getElementsByTagName('script')[0];
t.async = true;
t.id = 'cio-tracker';
t.setAttribute('data-site-id', 'YOUR SITE ID HERE');
t.src = 'https://assets.customer.io/assets/track.js';
s.parentNode.insertBefore(t, s);
})();
</script>
</body>
</html>

Related

How to dynamically add scripts to new webpages in javascript?

I'm currently learning javascript without any frameworks. How do you guys redirect to another html file, then assign a script to it dynamically?
So far, what I have done is:
onClick()
{
window.location = newpage.html;
var script = createElement('script');
script.src = dynamic + 'script.js';
var body = document.findbyID('body');
body.appendChild(src);
}
One of the examples of the dynamic script goes like this:
function addText()
{
var text = createElement('p');
text.innerhtml = sometext;
var textHolder = findbyid('div_somewhere_in_html');
body.appendChild(text);
}
The above code doesn't show the text inside the new webpage. The window.location command works. But after dynamically adding a text, it will not show up inside the new webpage. If I would console.log(window.location), it would only show my localhost:3000.
EDIT:
All files are hosted locally.
Since you own the target page, you can load (instead of pushing) a script based on a query string parameter. For example:
newpage.html
<!DOCTYPE html>
<html>
<body>
<script>
const dynamic = new URL(location).searchParams.get('script-prefix');
const script = document.createElement('script');
script.src = dynamic + 'script.js';
document.body.appendChild(script);
</script>
</body>
</html>
anotherpage.html
When clicking the following link, newpage.html will load and execute a script called MyPrefixscript.js.
<html>
<body>
My Link
</body>
</html>
BTW, I used an anchor, but window.location = '/newpage.html?script-prefix=MyPrefix' would work as well.

Problem with WebExtensions: second injected script doesn't see the first one

I need to create Firefox WebExtension that should use Amazon AWS SDK for Javascript. So to use its functions I try to inject such scripts into the loaded page:
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.485.0.min.js"></script>
<script>My code using AWS functions</script>
When I just create such page it works fine:
<html>
<body>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.485.0.min.js">
<script">console.log(AWS)</script>
</body>
</html>
Then I try to inject this code to the loaded page with WebExtensions content script like:
var s1 = document.createElement('script');
s1.src = "https://sdk.amazonaws.com/js/aws-sdk-2.485.0.min.js";
document.body.appendChild(s1);
var s2 = document.createElement('script');
s2.textContent = "console.log(AWS);";
document.body.appendChild(s2);
The scripts are successfully injected but in this case the second script returns the error: "AWS is not defined".
How can I fix this?
Thanks :)

Jquery Script not loading in head when I create dynamically html page using javascript

I created dynamically new window in JavaScript and add some HTML code in it through JavaScript, but when I insert some script link into html head, it does not load when window is open.
<script type="text/javascript">
function newWindowMap(){
var myWindow = window.open('','_blank');
var head = myWindow.document.getElementsByTagName('head')[0];
var body = myWindow.document.getElementsByTagName('body')[0];
var jqueryScript = myWindow.document.createElement('script');
jqueryScript.src = 'jquery.min.js';
jqueryScript.type = "text/javascript";
head.appendChild(jqueryScript);
var alertScr = myWindow.document.createElement('script');
var inlineScript =
document.createTextNode('$(document).ready(function(){alert("Hello World!");});');
alertScr.appendChild(inlineScript);
body.appendChild(alertScr);
}
</script>
Error on console:
Uncaught ReferenceError: $ is not defined
at :1:1
$ is from JQuery, which is a popular library for JavaScript, and from the looks, you haven't imported it.
Add this into your head tag to fix the issue
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

Page loading blocks by remote javascript

I am loading external javascript on my site through:
<script language="javascript" type="text/javascript">
document.write("<script src='http://remoteserver/banner.php?id=10&type=image&num=3&width=200'><\/script>");
</script>
Everything was fine, but today was a big timeout from the remote server and page loading on site was blocking.
Is there possibility to load javascript asynchronous or to load it after page loads?
I don't want page load interruption while remote server not working.
I know there are tag async in HTML5, but it's not working, i think because this script is more complex than javascript (its ending with ".php").
Also i know it's better to put javascript files before /body tag to prevent this problem, but it's not the best solution.
Do you know other solutions?
Sync script blocks the parser...
Incorrect Method:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
</script>
Async script will not block the rendering of your page:
Correct method:
<script type="text/javascript">
(function(){
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
Source: http://www.youtube.com/watch?feature=player_detailpage&v=Il4swGfTOSM&t=1607
You can easily do it by creating DOM nodes.
<script>
var scriptEl = document.createElement("script"); //Create a new "script" element.
scriptEl.src = "http://remoteserver/banner.php?id=10&type=image&num=3&width=200";
// ^ Set the source to whatever is needed.
document.body.appendChild(scriptEl);
// Append the script element at the bottom of the body.
</script>

Insert code snippet to div

I used Jquery to insert a variable to div. Please check my code.
var msg = '<script src="https://gist.github.com/3010234.js?file=new.html.erb"></script>'
$('.result').html(msg);
msg variable contains a script that render a code snippet. msg is dynamic variable.
The above code is not working to insert code snippet to div.
Any Idea?
This script generate code snippet like this.
To add script, I would add it to head like this;
var s = document.createElement('script');
s.src = 'https://gist.github.com/3010234.js?file=new.html.erb';
s.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(s);
You cannot load a github gist into a page dynamically using that embed code. The embed code is fine if you can add the script tag to the HTML, but to do it dynamically via JavaScript as you are trying to do, it won't work because it relies on document.write().
Instead, use the github gists api:
$.get("https://api.github.com/gists/3010234", function(response) {
$(".result").text(response.data.files["new.html.erb"].content);
}, "jsonp");
Working demo: http://jsfiddle.net/naTqe/
function loadScript() {
var script = document.createElement("script");
script.src = "https://gist.github.com/3010234.js?file=new.html.erb";
script.type = "text/javascript";
document.getElementById("result").appendChild(script);
}
It looks like your remote JS is buggy. I ran it through JS Lint and came up with several errors.
Anyway, here is my working example. Keep a javascript console open and you'll see the error when it tries to parse the remote JS.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<title>Jquery test</title>
</head>
<body>
<h1>jQuery</h1>
<p class="result">Some result</p>
<script>
/*<![CDATA[*/
$(document).ready(function(){
var msg = '<script type="text/javascript" src="http://gist.github.com/3010234.js?file=new.html.erb"><\/script>";
$('.result').html(msg);
});
/*]]>*/
</script>
</body>
</html>

Categories

Resources