AdWords Track Multiple Click Conversions Separately - google-ads-api

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.

Related

Adwords conversion tracking on link clicks that open in a new tab

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;

can you re-initiate a ui-popover?

Since I'm injecting a <span ui-popover></span> after the DOM is constructed I need to reinitiate the popovers otherwise it won't show.
Is there away to do that?
HTML
<div ng-repeat="i in comments">
<div id={{i._id}} class="task" commentId={{i._id}}> {{i.text}} </div>
</div>
I'm using the external rangy library that injects 's around highlighted texts. You can also inject elementAttirbutes to accommodate these span, This is shown in this part of the code:
JS
function initHighLighter() {
var cssApplier = null;
highlighter = rangy.createHighlighter(document);
cssApplier = rangy.createClassApplier('highlight-a',{elementAttributes: {'uib-popover':"test"}}/*, {elementAttributes: {'data-toggle':"popover", 'data-placement':"bottom", 'title':"A for Awesome", 'data-selector':"true", 'data-content':"And here's some amazing content. It's very engaging. Right?"}}*/);
highlighter.addClassApplier(cssApplier);
cssApplier = rangy.createClassApplier('highlight-b', {elementAttributes: {'uib-popover':"test"}}/*, {elementAttributes: {'data-toggle':"popover", 'data-placement':"bottom", 'title':"B for Best", 'data-selector':"true", 'data-content':"And here's some amazing content. It's very engaging. Right?"}}*/);
highlighter.addClassApplier(cssApplier);
}
I'm calling on to highlight parts of the texts, only after I upload them from the server (highlighter1 calls on init highlight written above)
JS
(function(angular) {
'use strict';
angular.module('myApp', ['ui.bootstrap'])
.controller('Controller', function($scope, $http, $timeout) {
$http.get('/comments')
.success(function(response) {
$scope.comments = response;
var allEl=[];
var i;
for (i=0; i<response.length; i++) {
allEl.push(response[i]._id);
}
$http.post('/ranges', {"commentIds":allEl})
.success(function(result){
result.forEach(function(item){
highlighter1(item.dataAction, item.rangyObject, true);
})
})
});
})
})(window.angular);
So in the end my DOM is being changed AFTER I initiated everything and then the attributes associated with the span don't do anything.
your markup should be (notice the prefix)
<span uib-tooltip="hello world"></span>
or if you want dynamic content
$scope.welcomeMessage = "hello world"; // inside controller
..
<span uib-tooltip="{{welcomeMessage}}"></span>
if you want to reinitialize the tooltip, you can trigger a $destroy event and have it rebuilt, one way if by using ng-if and setting it to true when you need it.
<span ng-if="doneUpdating" uib-tooltip="hello world"></span>

Turbolinks and 3d party plugins issue?

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");
}

h:commandLink open in new browser window

I want to open a new window, configured with height and width, all while using < h:commandLink >
<h:commandLink id="zyzid" value="click me" action="#{test.testDo}" target="_blank" />
this renders into:
<a onclick="mojarra.jsfcljs(document.getElementById('myForm'),{'myForm:xyzid':'myForm:xyzid'},'_blank');return false" href="#" id="myForm:xyzid">click me</a>
I looked at jsfcljs() function. It submits the form with target="_blank", but i don't see window.open() anywhere. So, how would I be able to alter this code to change new window's height and width?
for reference:
mojarra.jsfcljs = function jsfcljs(f, pvp, t) {
mojarra.apf(f, pvp);
var ft = f.target;
if (t) {
f.target = t;
}
f.submit();
f.target = ft;
mojarra.dpf(f);
};
I found a few relevant links, and this and I arrived at this solution, which seems to work for me. h:commandLink opens a new page, and I get to manipulate it's width and height. This involves slightly modifying/overwriting the mojarra.jsfcljs function. It opens a window with standard window.open() (triggered by onclick) and associates the form it is submitting with that window.
$(window).load(function(){
mojarra.jsfcljs = function jsfcljs(f, pvp, t) {
mojarra.apf(f, pvp);
var ft = f.target;
if (t) {
if (t.indexOf('options') != -1){
f.target = '_blank' + new Date().getTime();
var options = t.substring(t.indexOf('optionts') + 9);
window.open('', f.target, options);
}
else{
f.target = t;
}
}
f.submit();
f.target = ft;
mojarra.dpf(f);
};
});
markup:
< h:commandLink id="viewLink" action="#{testBean.doTest}" value="h:commandLink" target="options:height=200, width=300" />

Dynamically change href in last tab of jquery 'next/previous tab' controls

I use stackoverflow often so thanks to all who contribute - its been very helpful.
I am not an avid programmer and use jquery at its most basic level. I hope someone can help.
I would like to dynamically change the href url of '.nexttab' controls so that the user can move onto the next html page.
The below is my (juvenile) code.
$(function() {
$("#tabs").tabs();
$(".nexttab").click(function() {
var selected = $("#tabs").tabs("option", "selected");
$("#tabs").tabs("option", "selected", selected + 1);
var href = $(this).attr('href');
var lasttab = $(this).ui.panel('id');
if(lasttab == 'tabs-7'){
$('.nexttab').attr('href', href.replace('#','http://google.com.au'));
}
});
$(".prevtab").click(function() {
var selected = $("#tabs").tabs("option", "selected");
$("#tabs").tabs("option", "selected", selected - 1);
});
});
html is here
<div id="control-arrows">
< Back | Continue >
</div>
How can I identify the correct panel or tab (which is always the last) and then make the url change ?
Thank you,
Sarah

Resources