I want to track the conversion for links in adwords; For this i have the classic code that looks like this(don't worry about values for conversion_id and conversion_label):
<!-- Google Code for Joc Sloturi2 Conversion Page
In your html page, add the snippet and call
goog_report_conversion when someone clicks on the
chosen link or button. -->
<script type="text/javascript">
/* <![CDATA[ */
goog_snippet_vars = function() {
var w = window;
w.google_conversion_id = xxxxxxx;
w.google_conversion_label = "dsadsadsadsadadsa";
w.google_conversion_value = dsadasda;
w.google_conversion_currency = "RON";
w.google_remarketing_only = false;
}
// DO NOT CHANGE THE CODE BELOW.
goog_report_conversion = function(url) {
goog_snippet_vars();
window.google_conversion_format = "3";
var opt = new Object();
opt.onload_callback = function() {
if (typeof(url) != 'undefined') {
window.location = url;
window.open(url, '_blank')
}
}
var conv_handler = window['google_trackConversion'];
if (typeof(conv_handler) == 'function') {
conv_handler(opt);
}
}
/* ]]> */
</script>
<script type="text/javascript"
src="//www.googleadservices.com/pagead/conversion_async.js">
</script>
After that the outbound links are looking like this
Link text whatever
My problem with this is that when I click on the link it opens the link in a new tab and also in the same tab (basically it opens the link twice); Is there a way to only open the link in a new tab in the browser and also track the conversion for it?
I know this is a bit old, but I found a solution. Remove
window.location = 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 tinkering with the code from the Angular Dart tutorial to make use of the Tooltip class. Rather than have the text for the tooltip in the Dart file, I want to place it in the html file. I've tried
dom.Element footnote;
footnote = querySelector("#fn1");
htext = footnote.innerhtml;
This code is in the Tooltip class. I get warnings on the last two lines and the Dart doesn't run nor does it throw an error. How do I retrieve HTML from the main html file (i.e., not from a component html file)?
The original code is from the angular dart website tutorial, chapter four. The unchanged code doesn't build cleanly, but it doesn't appear to affect it operation. This is a known bug for which there is an open issue.
pub build output
[Info from Dart2JS]:
Compiling tutorial|web/main.dart...
[Dart2JS on tutorial|web/main.dart]:
1 warning(s) suppressed in package:tutorial.
[Info from Dart2JS]:
Took 0:00:11.779928 to compile tutorial|web/main.dart.
Built 182 files to "build".
This output is with the last line commented out
tooltip.dart
library tooltip;
import 'dart:html' as dom;
import 'package:angular/angular.dart';
#Decorator(selector: '[tooltip]')
class Tooltip
{
final dom.Element element;
#NgOneWay('tooltip')
TooltipModel displayModel;
dom.Element tooltipElem;
dom.Element footnote;
Tooltip(this.element)
{
element..onMouseEnter.listen((_) => _createTemplate())
..onMouseLeave.listen((_) => _destroyTemplate());
}
void _createTemplate()
{
assert(displayModel != null);
tooltipElem = new dom.DivElement();
footnote = querySelector("#fn1");
htext = footnote.innerhtml;
if (displayModel.text != null)
{
dom.DivElement textSpan = new dom.DivElement()
..appendHtml(displayModel.text)
..style.color = "white"
..style.fontSize = "smaller"
..style.paddingBottom = "5px";
tooltipElem.append(textSpan);
}
tooltipElem.style
..padding = "5px"
..paddingBottom = "0px"
..backgroundColor = "black"
..borderRadius = "5px"
..width = "${displayModel.imgWidth.toString()}px";
// position the tooltip.
var elTopRight = element.offset.topRight;
tooltipElem.style
..position = "absolute"
..top = "${elTopRight.y}px"
..left = "${elTopRight.x + 10}px";
// Add the tooltip to the document body. We add it here because we need to position it
// absolutely, without reference to its parent element.
dom.document.body.append(tooltipElem);
}
void _destroyTemplate()
{
tooltipElem.remove();
}
}
class TooltipModel
{
final String text;
final int imgWidth;
TooltipModel(this.text, this.imgWidth);
}
As you can see, I'm not using the html yet. I'm trying to get it to work one step at a time.
index.html
<!DOCTYPE html>
<html ng-app>
<head>
<title>Chapter Four - A Simple Recipe Book</title>
<link rel="stylesheet" href="style.css">
<script src="packages/web_components/webcomponents.js"></script>
<script src="packages/web_components/dart_support.js"></script>
</head>
<body>
<recipe-book></recipe-book>
<div id="fn1">
<h2>Citation</h2>
<p>source specification</p>
<p>additional information</p>
</div>
<script type="application/dart" src="main.dart"></script>
<script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>
I added the div with the id fn1.
Answer
To summarize Günter Zöchbauer answers, I made the following changes to get it to work:
footnote = dom.querySelector("#fn1");
String htext = footnote.innerHtml;
You have import 'dart:html' as dom; which means that querySelector (without qualifier) can't be found or is used from another unqualified import if found.
With
footnode = dom.querySelector("#fn1");
// or
footnode = dom.document.querySelector("#fn1");
the whole document is searched except the content of shadow DOMs. If you want to search the shadow DOMs too you can use
footnote = dom.document.querySelector("* /deep/ #fn1");
or
footnote = dom.document.querySelector("* >>> #fn1");
The 2nd version is the newest but I don't know which browsers or polyfills support it yet.
I can't find any up to date documentation on this scenario, and it's really frustrating.
I have tel:555-555-5555 links and mailto:johndoe#555.com and I want to track each click separately.
Should I add two of these snippets, one for each type? I noticed there is a "Conversion_Label" field, so I assume I should?
<script type="text/javascript">
/* <![CDATA[ */
goog_snippet_vars = function() {
var w = window;
w.google_conversion_id = XXXXXXXXX;
w.google_conversion_label = "XXX1";
w.google_remarketing_only = false;
}
// DO NOT CHANGE THE CODE BELOW.
goog_report_conversion = function(url) {
goog_snippet_vars();
window.google_conversion_format = "3";
window.google_is_call = true;
var opt = new Object();
opt.onload_callback = function() {
if (typeof(url) != 'undefined') {
window.location = url;
}
}
var conv_handler = window['google_trackConversion'];
if (typeof(conv_handler) == 'function') {
conv_handler(opt);
}
}
/* ]]> */
<script type="text/javascript"
src="//www.googleadservices.com/pagead/conversion_async.js">
</script>
From here, now Google just says to add the onClick handlers but they are the same other than the link inside:
<a onclick="goog_report_conversion
('http://www.example.com/whitepapers/a.pdf')"
href="#" >DOWNLOAD NOW</a>
<a onclick="goog_report_conversion
('tel:555-555-5555')"
href="#" >CALL NOW</a>
Will Google tell the difference between the two click events?
Thanks for any advice!
No, there will be no difference between the two click events.
This is my workaround:
Setup one additional conversion code (for the download conversion). The difference from the first conversion code will be only in this line w.google_conversion_label = "XXX2";
Next change the line of the new code from goog_snippet_vars = function() { to goog_snippet_varsD = function() {
Next change the line of the new code from goog_report_conversion = function(url) { to goog_report_conversionD = function(url) {. Don't mind the warning // DO NOT CHANGE THE CODE BELOW. :)
Next change the line of the new code from goog_snippet_vars(); to goog_snippet_varsD(); Don't mind the warning // DO NOT CHANGE THE CODE BELOW. :)
Last change - from:
<a onclick="goog_report_conversion
('http://www.example.com/whitepapers/a.pdf')"
href="#" >DOWNLOAD NOW</a>
to
<a onclick="goog_report_conversionD
('http://www.example.com/whitepapers/a.pdf')"
href="#" >DOWNLOAD NOW</a>
Voila! Now you are ready to track two conversion actions in one page.
Im currently using input type number, but as ie9 does not support this type, does anyone have any good alternatives(and example)? im using ASP.NET MVC4 if that helps
The jQuery UI Spinner Widget is an alternative. You could combine it with Modernizr to only use the jQuery UI Spinner Widget with browsers that natively doesn't support number as input type
<script>
$(function () {
if (!Modernizr.inputtypes.number) {
$("input[type=number]").spinner();
};
});
</script>
Have a look at this jsFiddle demonstration using Modernizr
Yes basically give your input field a class as jqNos
And use this script:
<script language="javascript" type="text/javascript">
$(".jqNos").each(function () {
$(this).keypress(function (e) {
var code = $.browser.mozilla ? e.charCode : e.keyCode;
if (((code >= 48) && (code <= 57)) || code == 0) {
return true;
}
else {
return false;
}
})
});
</script>
This script will allow only numbers in your text box.