How can I tell if my Google content experiment is running? - google-analytics

I've created a google content experiment without redirects using the docs.
The basic implementation involves a javascript snippet that uses the following code to choose the version of the experiment:
<!-- Load the Content Experiment JavaScript API client for the experiment -->
<script src="//www.google-analytics.com/cx/api.js?experiment=YOUR_EXPERIMENT_ID"></script>
<script>
// Ask Google Analytics which variation to show the user.
var chosenVariation = cxApi.chooseVariation();
</script>
<!-- Load the JQuery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
// Define JavaScript for each page variation of this experiment.
var pageVariations = [
function() {}, // Original: Do nothing. This will render the default HTML.
function() { // Variation 1: Banner Image
document.getElementById('banner').src = 'bay-bridge.jpg';
},
function() { // Variation 2: Sub-heading Text
document.getElementById('heading').innerHTML = 'Look, a Bridge!';
},
function() { // Variation 3: Button Text
document.getElementById('button').innerHTML = 'Learn more';
},
function() { // Variation 4: Button Color
document.getElementById('button').className = 'button button-blue';
}
];
// Wait for the DOM to load, then execute the view for the chosen variation.
$(document).ready(
// Execute the chosen view
pageVariations[chosenVariation]
);
</script>
However, when I visit the page using an incognito window, I only see the first variation of the experiment. When I check chosenVariation in the console, it's always 0. In fact, when I call cxApi.chooseVariation(); in the console, it always returns 0.
Is this because google recognizes my incognito browser windows, or is something broken with cxApi.chooseVariation(); or in my implementation?

I had the same problem, 100% of the sessions were given the original (0) variation. In order to fix the problem, I added the javascript code provided by the experiment. Go to your experiment (edit), click Setting up your experiment code, manually insert the code, copy the code in there.
Now since you (and I) don't want to have a redirect, remove this part at the end of the code <script>utmx('url','A/B');</script>. If your page is templated, you can use a variable and insert your experiment key (not experiment id) where you see var k='########-#'
Now either very few people use the experiments in a client-only fashion or we're totally stupid because it would seem to me that the guide is wrong and there's absolutely no documentation that shows a working client-only setup.

Related

How should I include cdnjs libraries in custom javascript codes in Google tag manager?

I am new to Google analytics and Google Tag Manager and currently I am confused with using external JS libraries. Any help would be appreciated.
I need to use 'https://cdnjs.cloudflare.com/ajax/libs/fingerprintjs2/2.1.0/fingerprint2.min.js' in my custom javascript code in google tag manager. I have tried to include the script as a custom html or even custom template. The script is successfully added to the head and I see it in the inspection. But in my custom JS code , when I try to call and use library functions , it throws exception saying that the lib object is not defined.
I tried sequencing tags also , to make sure script loading tags are fired before my custom js code execution. But that did not fix the problem.
Any suggestion on how to include external JS libraries in your GTM custom JS code? I hope I explained the problem properly.
Thanks !
This example posted by jwest75674 should help. As you need to declare var = fingerprint in your script to allow Google Tag Manager to capture the data after the script has run
In short, you can copy the script below an add it as Custom HTML Tag in GTM (https://github.com/Valve/fingerprintjs2)
<script src="https://cdn.jsdelivr.net/npm/fingerprintjs2#2.1.0/dist/fingerprint2.min.js"></script>
<script type="text/javascript">
var fingerprint; // Variable to allow the Google Tag Manager to capture the data after this script has run.
if (window.requestIdleCallback) {
requestIdleCallback(function () {
Fingerprint2.get(function (components) {
console.log(components) // an array of components: {key: ..., value: ...}
})
})
} else {
setTimeout(function () {
Fingerprint2.get(function (components) {
console.log(components) // an array of components: {key: ..., value: ...}
})
}, 500)
}
</script>

Yandex metrika tag slowing down site speeds google page speed isights reporting

So on all my web pages i have this code what is used by Yandex metrika for analytics. According to google this script is slowing down my pages and needs something changing in the way it loads to not be render blocking, TTI time to input blocking, FID first input delay blocking, First contentful paint blocking.
<script data-cfasync="false" type="text/javascript">
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(XXXXXXXX, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true,
webvisor:true
});
</script>
Googles page speed reports the following
https://developers.google.com/speed/pagespeed/insights/
What can i modify the Yandex metrika javascript to in order to fix this issue ?
You don't have many options I am afraid as it is a third party script.
One option to improve your score and perceived load times is to wrap the call to the function in a setTimeout set long enough to delay loading the script until the essential content is loaded.
<script data-cfasync="false" type="text/javascript">
setTimeout(function(){
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(XXXXXXXX, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true,
webvisor:true
});
}, 5000); //set this as high as you can without ruining your stats.
</script>
This is definitely a workaround and I would instead advise using a different library that is less bloated if you can find one.
<script data-cfasync="false" type="text/javascript">
(function(){
var a = function() {try{return !!window.addEventListener} catch(e) {return !1} },
b = function(b, c) {a() ? document.addEventListener("load", b, c) : document.attachEvent("onreadystatechange", b)};
b(function(){
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(XXXXXXXX, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true,
webvisor:true
});
}, false);
})();
</script>
One option is to use old Yandex Metrika code (new Ya.Metrika...).
You can view the old code if you set checkbox in advanced settings of the Metrika. Old code has some limitation but it's much smaller and few times faster.
Disabling clickmap and webvisor could help.

Make a button of any language which has your user and pass embedded to make easy log in for particular website

I have 'several accounts' in a website which I always log in everyday. Now, I want it to be easy by just clicking buttons in order to log in a particular account. Is it possible? How can I do that?
If you have any experience using jQuery for DOM manipulation, it's fairly easy to do what you're asking using tampermonkey / greasemonkey
Basically you'd add a script that would trigger only on a particular domain. That script would import jQuery (just for ease of use) and append N buttons to the DOM. Using jQuery again, those buttons would have a given behavior that, in your case, fill the login and password input fields and submit the info.
// ==UserScript==
// #name Multilogin
// #version 0.1
// #match http://website.com/*
// #require http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js
// #run-at document-start
// ==/UserScript==
jQuery(document).ready(function() {
jQuery('body').prepend('<button id="my1stID" data-login="brian1" data-password="asdfg" value="my1stID"/>');
jQuery('body').prepend('<button id="mi2ndID" data-login="brian2" data-password="asdfg2" value="my2ndID"/>');
jQuery('body').prepen('<button id="mi3rdID"...');
jQuery(document).on('click','my1stID',function() {
var login=jQuery(this).data('login');
var password=jQuery(this).data('password');
jQuery('#login_input').val(login);
jQuery('#password_input').val(password);
jQuery('#submit').click();
});
jQuery(document).on('click','mi2ndID',function() {
....
});
jQuery(document).on('click','mi3rdID',function() {
....
});
});
Take into consideration that storing your passwords in a script is very insecure and with my answer I'm giving you enough rope to hang yourself.

Framework7 starter page "pageInit" NOT WORKING

anyone using framework7 to create mobile website? I found it was great and tried to learn it by myself, now I meet this problem, after I create my App, I want to do something on the starter page initialization, here, my starter page is index.html, and I set data-page="index", now I write this below:
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
// in my browser console, no "index page" logged
if (page.name === 'index') {
console.log("index page");
});
// but I changed to any other page other than index, it works
// my browser logged "another page"
if(page.name === 'login') {
console.log('another page');
}
});
Anyone can help? Thank you so much.
I have also encountered with the same problem before.
PageInit event doesn't work for initial page, only for pages that you navigate to, it will only work for index page if you navigate to some other page and then go back to index page.
So I see two options here:
Just not use pageInit event for index page - make its initialization just once (just make sure you put this javascript after all its html is ready, or e.g. use jquery's on document ready event)
Leave index page empty initially and load it dynamically via Framework7's mainView.loadContent method, then pageInit event would work for it (that was a good option for me as I had different index page each time, and I already loaded all other pages dynamically from underscore templates)
I am facing same issue and tried all solutions in various forums.. nothing actually worked. But after lot of RnD i stumbled upon following solution ...
var $$ = Dom7;
$$(document).on('page:init', function (e) {
if(e.detail.page.name === "index"){
//do whatever.. remember "page" is now e.detail.page..
$$(e.detail.page.container).find('#latest').html("my html here..");
}
});
var me = new Framework7({material: true});
var mainview = me.addView('.view-main', {});
.... and whatever else JS here..
this works perfectly..
surprisingly you can use "me" before initializing it..
for using for first page u better use document ready event. and for reloading page event you better use Reinit event.
if jquery has used.
$(document).on('ready', function (e) {
// ... mainView.activePage.name = "index"
});
$(document).on('pageReinit', function (e) {
//... this event occur on reloading anypage.
});

Google Analytics file tracking

I'm using Google Analytics to track my pages, and I've added, last week, this code which I've found to try to track my PDF downloads, but this doesn't work :
Link to PDF :
<a href="pdf/my-pdf.pdf"
onClick="javascript:pageTracker._trackEvent('PDF','Download','My New PDF');
void(0);">
PDF
</a>
GA Tracking Code (minified) :
var _gaq=[['_setAccount','UA-XXXXXXXX-XX'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
Of course, I changed my UA Values for the same of this post.
How can I edit this to allow for file download tracking ?
Edit
PDF
function trackLink(e)
{
e.preventDefault();
_gaq.push(['_trackEvent','Download','PDF', e.target.href]);
window.setTimeout('location.href="'+e.target.href+'"',100);
return false;
}
var _gaq=[['_setAccount','UA-XXXXXXXX-XX'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
Note: XX's have been added for the purpose of the post and are not in the actual code.
Okay so a couple things here. Firstly, as gerl pointed out, you are using the wrong GA syntax for the version of the core code you have. So you need to fix your code according to that answer, regardless. But there is another issue to consider: timing.
First, more often than not, the GA code isn't going to have enough time to execute, before the browser redirects to the target URL. There are 2 ways you can get around this: force a timeout of ~100ms before redirect, or make your pdf open up in a separate tab/window.
Personally, I think the latter is a better solution. Since the pdf is loaded into a separate window, you don't need to worry about delaying the redirect to give GA a chance to execute. Also, most people prefer things like pdfs to open up in a separate tab/window, so that they aren't taken away from the page they are on. To do this, add a `target='_blank' to the link:
PDF
But if you really want to stick with having the pdf open in the same window/tab, then you will need to force a timeout. I don't like this option as much as the first, because what ~100ms is usually enough time to wait, it's not a guarantee that it's enough time. You can increase the timeout, but the more you do, the longer the visitor has to wait before the redirect occurs, which makes for a bad user experience. But this is one way you could do it:
PDF
<script type="text/javascript">
function trackLink(e) {
e.preventDefault();
_gaq.push(['_trackEvent','Download','PDF', e.target.href]);
window.setTimeout('location.href="'+e.target.href+'"',100);
return false;
}
var _gaq=[['_setAccount','UA-XXXXXXXX-XX'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
Also note that if you upgrade to universal analytics, that version has timeout/callback funcationality built in to link tracking (that article talks about outbound link tracking but the principle of using the callback function to do the redirect is the same).
You have pageTracker instead of _gaq.. Try this instead:
onclick="_gaq.push(['_trackEvent','Download','PDF', 'pdf/my-pdf.pdf']);"
Instead of writing a function, you can just add something into the html of the element... perhaps something like this?
<a href="pdf/my-pdf.pdf" onClick="_gaq.push(['_trackEvent', 'PDF','Download','My New PDF']);">
That ought to do it.
I had a similar problem with this sort of thing when trying to decide which type of GA code to use.
This question I posted might help (using ga vs. _gaq.push):
ga or _gaq.push for Google Analytics event tracking?
pdf
That should do the job! More info here: https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide
Also, you can always test if your event tracking is working by looking in Real Time Analytics.
See this link: https://support.google.com/analytics/answer/1136920?hl=en
It shows how to use the hitCallback to help with the issue of the browser redirecting before the event gets pushed.
I think this would be how to modify your code:
PDF
<script type="text/javascript">
function trackLink(e) {
e.preventDefault();
ga('send', 'event', 'Download', 'click', 'PDF', {'hitCallback':
function () {
document.location = e.target.href;
}
});
return false;
}
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-XXXXXXXX-X', 'auto');
ga('send', 'pageview');
</script>

Resources