In Manifest v2 I was using GA - was working great. But with V3
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-30398300-16']);
_gaq.push(['_setCampSourceKey', 'chrome-extension']); // source
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = 'https://ssl.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
not working inside background script
Related
I use Amit Agarwal code from https://www.labnol.org/internet/light-youtube-embeds/27941/ in my website to lite embeded youtube video.
Is there any way to add start time to the script so that I could load each video with different start time.
<div class="youtube-player" data-id="VIDEO_ID" start-id="TIME"></div>
His complete script are as follows:
<script>
function labnolIframe(div) {
var iframe = document.createElement('iframe');
iframe.setAttribute('src', 'https://www.youtube.com/embed/' + div.dataset.id + '?autoplay=1&rel=0');
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('allowfullscreen', '1');
iframe.setAttribute('allow', 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture');
div.parentNode.replaceChild(iframe, div);
}
function initYouTubeVideos() {
var playerElements = document.getElementsByClassName('youtube-player');
for (var n = 0; n < playerElements.length; n++) {
var videoId = playerElements[n].dataset.id;
var div = document.createElement('div');
div.setAttribute('data-id', videoId);
var thumbNode = document.createElement('img');
thumbNode.src='//i.ytimg.com/vi/ID/hqdefault.jpg'.replace('ID', videoId);
div.appendChild(thumbNode);
var playButton = document.createElement('div');
playButton.setAttribute('class', 'play');
div.appendChild(playButton);
div.onclick = function () {
labnolIframe(this);
};
playerElements[n].appendChild(div);
}
}
document.addEventListener('DOMContentLoaded', initYouTubeVideos);
</script>
I have added timeId var into the mix hoping that I could use start-id value to let embed video to start at specific time. It still start at 0 sec of the video.
function labnolIframe(div) {
var iframe = document.createElement('iframe');
iframe.setAttribute('src', 'https://www.youtube.com/embed/' + div.dataset.id + '?start='+ div.dataset.id + '&autoplay=1&rel=0');
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('allowfullscreen', '1');
iframe.setAttribute('allow', 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture');
div.parentNode.replaceChild(iframe, div);
}
function initYouTubeVideos() {
var playerElements = document.getElementsByClassName('youtube-player');
for (var n = 0; n < playerElements.length; n++) {
var videoId = playerElements[n].dataset.id;
var timeId = playerElements[n].dataset.id;
var div = document.createElement('div');
div.setAttribute('data-id', videoId);
div.setAttribute('start-id', timeId);
var thumbNode = document.createElement('img');
thumbNode.src = '//i.ytimg.com/vi/ID/hqdefault.jpg'.replace('ID', videoId);
div.appendChild(thumbNode);
var playButton = document.createElement('div');
playButton.setAttribute('class', 'play');
div.appendChild(playButton);
div.onclick = function () {
labnolIframe(this);
};
playerElements[n].appendChild(div);
}
}
document.addEventListener('DOMContentLoaded', initYouTubeVideos);
Just change:
iframe.setAttribute('src', 'https://www.youtube.com/embed/' + div.dataset.id + '?autoplay=1&rel=0');
to:
iframe.setAttribute('src', 'https://www.youtube.com/embed/' + div.dataset.id + '?start=YOUR_START_TIME_IN_SECONDS&autoplay=1&rel=0');
Note the added start=YOUR_START_TIME_IN_SECONDS& in the URL.
I have website
http://www.optimapo.ru/
and I have some 3d party scripts installed:
live chat (https://www.jivochat.com/) and yandex analitics.
But because of turbolinks they don't work properly.
For example live chat appears only on main page. But when we go to another page which is loaded using turbolinks it dissapears.
I include scripts in my code before closing body tag
<!-- BEGIN JIVOSITE CODE {literal} -->
<script type='text/javascript'>
(function(){ var widget_id = '2qq06akKwZ';var d=document;var w=window;function l(){
var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = '//code.jivosite.com/script/widget/'+widget_id; var ss = document.getElementsByTagName('script')[0]; ss.parentNode.insertBefore(s, ss);}if(d.readyState=='complete'){l();}else{if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();</script>
<!-- {/literal} END JIVOSITE CODE -->
<!-- Yandex.Metrika counter --> <script type="text/javascript"> (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter39034390 = new Ya.Metrika({ id:39034390, clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true, trackHash:true, ut:"noindex" }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks"); </script> <noscript><div><img src="https://mc.yandex.ru/watch/39034390?ut=noindex" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter -->
</body>
So what do I do to make scripts work with turbolinks?
I don't think that this is strictly possible with how the snippet you include is implemented. Let's look at it, I put it over multiple lines to make it easier to read, but this is all in there:
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = '//code.jivosite.com/script/widget/'+widget_id;
var ss = document.getElementsByTagName('script')[0];
ss.parentNode.insertBefore(s, ss);
If you look at turbolinks compatibility, one of the issues it reports are self loading scripts appending to head: http://reed.github.io/turbolinks-compatibility/
I don't know where document.getElementsByTagName('script')[0] lives on your page, but there's good chance it's in the head, since it's the first script on the page. Can you change to snippet to insert at the end of the body instead?
I've managed to find a solution that actually works in Turbolinks 5. I've added this piece of code s.setAttribute('data-turbolinks-track', 'reload'); in between existing code, like this:
s.type = 'text/javascript'; s.setAttribute('data-turbolinks-track', 'reload'); s.async = true;
Side note: I've also submitted a PR with this solution to Turbolinks Compatability repository
Turbolinks overrides the normal page loading process and sometimes scripts needs refresh. Here is the rails guide for using tubolinks on page load. It is coffescript. Here is javascript equivalent :
$(document).on("turbolinks:load", function() {
// your code here
});
Below code snippet works for me.
var ready;
ready = function() {
...your code ...
};
$(document).ready(ready);
$(document).on('page:load', ready);
You can try using this gem in your application:
gem 'jquery-turbolinks'
Follow the set-up instructions here.
Place your Metrika and JivoSite scripts onto the bottom of the page. You do not need to require them explicitly.
This works for me, just change
jivo_id = 'ID-MY-ACCOUNT';
Source: https://gist.github.com/Brunomm/5c227e6c254332290812
jQuery(document).on('page:load', runChat);
jQuery(document).ready(function($) {runChat();});
// Chat online jivo
function runChat(){
$('#jivo-iframe-container, .jivo_shadow, [src*="//code.jivosite"]').remove();
delete(window.jivo_api);
delete(window.jivo_config);
window.jivo_magic_var = undefined;
window.$jivosite = null;
(function(d,s){
var z = $jivosite=function(c){ z._.push(c) },
el_script = z.s = d.createElement(s),
e=d.getElementsByTagName(s)[0],
jivo_id = 'ID-MY-ACCOUNT';
z.set=function(o){
z.set._.push(o)
};
z._=[];
z.set._=[];
$.async = !0;
el_script.setAttribute("charset","utf-8");
el_script.src='//code.jivosite.com/script/widget/'+jivo_id;
z.t=+new Date;
el_script.type="text/javascript";
e.parentNode.insertBefore(el_script,e)
})(document,"script");
}
I'm using Segment.io to do tracking on my site. We have a live chat widget that I'd like to be displayed on every page. However I'm unable to figure out how to make this work.
I've created an analytics.js which loads in the body (I've also tried adding the analytics.page(); to the body without any results):
window.analytics = window.analytics || [];
window.analytics.methods = ['identify', 'group', 'track',
'page', 'pageview', 'alias', 'ready', 'on', 'once', 'off',
'trackLink', 'trackForm', 'trackClick', 'trackSubmit'];
window.analytics.factory = function(method){
return function(){
var args = Array.prototype.slice.call(arguments);
args.unshift(method);
window.analytics.push(args);
return window.analytics;
};
};
for (var i = 0; i < window.analytics.methods.length; i++) {
var key = window.analytics.methods[i];
window.analytics[key] = window.analytics.factory(key);
}
window.analytics.load = function(key){
if (document.getElementById('analytics-js')) return;
var script = document.createElement('script');
script.type = 'text/javascript';
script.id = 'analytics-js';
script.async = true;
script.src = ('https:' === document.location.protocol
? 'https://' : 'http://')
+ 'cdn.segment.io/analytics.js/v1/'
+ key + '/analytics.min.js';
var first = document.getElementsByTagName('script')[0];
first.parentNode.insertBefore(script, first);
};
window.analytics.SNIPPET_VERSION = '3.1.0';
window.analytics.load('kYDWuP6nxI');
window.analytics.page();
document.addEventListener("turbolinks:load", function() {
console.log('page change');
analytics.page();
});
When I visit a new page on the app it shows the console log, but analytics.page(); doesn't seem to be rendered except when I do a manual page refresh.
Anybody know how to fix this?
I embed Youtube videos in my angular app using two directives which make use of the YouTube Iframe API. The first loads the library async
angular.module('myApp')
.service('youTubeService', function($rootScope, $window) {
var self = this;
self.ready = false;
$window.onYouTubeIframeAPIReady = function () {
self.ready = true;
console.log("Youtube service ready");
$rootScope.$broadcast('youTubeServiceReady', true);
};
var tag = document.createElement('script');
tag.src = '//www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
});
I then embed the video using the javascript library
angular.module('myApp')
.directive('youtube', function (youTubeService) {
return {
link: function (scope, element, attrs) {
var player;
var playerReady = false;
var playerState;
var callback;
var carouselScope = element.parent().parent().scope();
function createPlayer() {
player = new YT.Player(element[0], {
height: attrs.height,
width: attrs.width,
videoId: attrs.youtube,
playerVars: { 'start' : attrs.starttime, 'end' : attrs.endtime, 'origin': 'https://', showinfo: 0, modestbranding: 1 },
events: {
onReady: function () {
playerReady = true;
// if (callback !== null) {
// callback();
// }
},
onStateChange: function (event) {
//console.log("Time:" + getCurrentTime() + ", Duration:" + getDuration() );
playerState = event.data;
if (playerState === YT.PlayerState.PAUSED) {
carouselScope.play();
}
}
}
});
}
if (youTubeService.ready) {
createPlayer();
} else {
scope.$on('youTubeServiceReady', function () {
createPlayer();
});
}
...
This was working for months up until yesterday but now I get the following video as my embed in all desktop browsers as documented here
https://support.google.com/youtube/answer/6098135?hl=en-GB
My problem is I can't figure out what I should be changing because as far as I understand the iframe api is the correct one. Does anyone know what I should be changing?
So we were having the exact same issue with our site.
It turns out that our client, which uses code very similar to yours above is functioning correctly. Our problem ended up being the way in which we were adding videos and video meta data to our database.
This might not be your issue, but we were using
http://gdata.youtube.com/feeds/api/videos/<video id>?v=2&alt=json
to add videos to our system. As this turns out to be a deprecated endpoint, we had to upgrade to the v3 system which is explained here: https://developers.google.com/youtube/v3/docs/videos/list
The following code works fine on a desktop browser exactly how it is, but isn't working in my phone gap/cordova app. My output says connect and iOS received stream, but nothing is showing up in the body of my app. This is in my index.js file:
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
app.receivedEvent('deviceready');
////////////////////////////////
//////Start of my opentok code////////////
var apiKey = '21692492';
var sessionId = '2_MX4yMTY5MTQ5Mn5-RnJpIEZlYiAwNyAwODozMjozOSBQU1QgMjAxNH4wLjIwMzc2MDV-';
var token = 'T1==cGFydG5lcl9pZD0yMTY5MTQ5MiZzaWc9ZWUxMTNjNjZiYjlkNWI4NTkwZTE2MDZiMjM0MzFkOWYyMzhiYzgxNjpzZXNzaW9uX2lkPTJfTVg0eU1UWTVNVFE1TW41LVJuSnBJRVpsWWlBd055QXdPRG96TWpvek9TQlFVMVFnTWpBeE5INHdMakl3TXpjMk1EVi0mY3JlYXRlX3RpbWU9MTM5MTc5MDgwNSZyb2xlPXB1Ymxpc2hlciZub25jZT0xMzkxNzkwODA1LjIzMzk0MTE4MzcyJmV4cGlyZV90aW1lPTEzOTQzODI4MDU=';
function connectedHandler(event) {
for (var i = 0; i < event.streams.length; i++) {
var newDiv = $('<div />', {id:event.streams[i].streamId});
$('body').append(newDiv);
session.subscribe(event.streams[i], event.streams[i].streamId,{});
}
}
var session = TB.initSession(sessionId);
session.addEventListener('sessionConnected', connectedHandler);
session.connect(apiKey, token);
//////End of my opentok code////////////
////////////////////////////////////////////////
},
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
This is the output I get:
2014-02-07 11:44:19.407 HelloCordova[2377:60b] iOS Connected to Session
2014-02-07 11:44:19.408 HelloCordova[2377:60b] object for session is {
connection = {
connectionId = "4B191468-46D5-4414-A46A-5C97376D6F2E";
creationTime = 1391791459;
};
connectionCount = 0;
environment = production;
sessionConnectionStatus = OTSessionConnectionStatusConnected;
sessionId = "2_MX4yMTY5MTQ5Mn5-RnJpIEZlYiAwNyAwODozMjozOSBQU1QgMjAxNH4wLjIwMzc2MDV-";
streams = (
);
}
2014-02-07 11:44:19.456 HelloCordova[2377:60b] iOS Received Stream
Does anyone know why this isn't working and what I need to change?
Cordova plugin is modeled after OpenTok JS 2.2. In this new version, there are several changes. First of all, 'addEventListener' has been renamed to 'on'. To add events, you can do this:
session.on({
'sessionConnected': function(event){
session.publish( publisher );
},
'streamCreated': function(event){
var newDiv = $('<div />', {id:event.stream.streamId});
$('body').append(newDiv);
session.subscribe(event.stream, event.stream.streamId, {});
}
})
Note the following changes:
* addEventListener no longer exists
* on sessionConnected events, you no longer get an array of existing streams in the session. Every stream in the session will trigger a streamCreated event.
* streamCreated event callback parameter only has 1 stream element. This event will be triggered once for every stream
Here's a list of coming v2.2 changes: http://labs.tokbox.com/javascript-2.2
I have added some working sample code for you to reference: https://github.com/songz/cordova-plugin-opentok/blob/master/README.md#sample-code