I have a requirement to track downloads of PDF files in my site.
I am using my own plugin to achieve this: https://github.com/rsleggett/Quick-Event-Tracking
However, underneath all it does is call the trackEvent function with the correct parameters. My problem is that when tracking the PDF download the event is fired but never finishes loading:
Here's my code:
Track lots
<script>
$('.track-pdf').gaTrackEvent({
category: 'Download',
action: 'PDF',
labelAttribute: 'href',
useEvent: true,
event: 'click'
});
</script>
Here's what I see in the Network panel for firebug:
This request never completes and this doesn't seem to be recorded in Google Analytics.
Does anyone have any ideas why?
I have tried adding a delay before changing the document.location like this:
Track lots
<script>
$('.track-pdf').gaTrackEvent({
category: 'Download',
action: 'PDF',
labelAttribute: 'href',
useEvent: true,
event: 'click',
complete: function (elem, e) {
setTimeout(function () { document.location = $(elem).attr('href') }, 100);
e.preventDefault();
return false;
}
});
</script>
This seems to work - the request completes if I look at it in fiddler. However, this feels hacky and I don't really want my downloads to open in the same window (it breaks my requirements anyway).
Any ideas?
You can use javascript to remove the node which contains __utm.gif
Related
I have changed the a function to load on page load but it will not do it.
The original code which runs with a link:
function updateBannerText(text) {
smartsupp('banner:set', 'bubble');
smartsupp('banner:update', { text: text });
});
Welcome,
This chat is awesome
My code which should run on page load:
function updateBannerText(text) {
smartsupp('banner:set', 'bubble');
smartsupp('banner:update', { text: "{$Artikel->cName}" });
}
window.onload = updateBannerText;
I have changed updateBannerText(text) to updateBannerText() but it was not possible to run it.
The problem is that the Smartsupp widget itself only starts to load on the page load, so your window.onload function runs before the widget is properly initialized and thus has no effect. You can test this by delaying the banner update, which should have an effect:
window.onload = function () { setTimeout(updateBannerText, 5000) }
To get around this, you should attach your startup code to an appropriate Smartsupp widget event, say, the rendered event for updating the banner:
smartsupp('on', 'rendered', function() {
updateBannerText('whatnot')
})
I'm integrating Filepicker into a form on a web page. Everything is working fine but I cannot stop the modal from opening by itself on each page load. I can't find a way of disabling this.
Here's the set up I'm playing with at the moment:
<script>
// Set up the API key
filepicker.setKey("XXXXXXX");
filepicker.pickAndStore(
// picker_options
{
openTo: 'COMPUTER',
services: ['CLOUDDRIVE','COMPUTER','DROPBOX','FACEBOOK','GITHUB','GOOGLE_DRIVE','GMAIL','SKYDRIVE','URL','FTP','CLOUDAPP'],
maxSize: 20971520,
},
// store_options
{
},
function(Blobs){
console.log(JSON.stringify(Blobs));
},
function(error){
console.log(JSON.stringify(error));
},
function(progress){
console.log(JSON.stringify(progress));
}
);
</script>
Same thing happens on codepen so it's nothing in the rest of the page that causes it.
Since you're picking a file, you should have the action of the pickAndStore function within the function called when you click a button to activate it.
var button = document.getElementById('filePick');
button.onclick(function() {
filepicker.pickAndStore({
//etc.
});
});
I'm putting an exit intent feature on my wordpress website and am having an unusual problem.
After loading in the script via wp_enqueue_script in functions.php, I then put the below function in my scripts file. It pulled in just fine.
After I access inspect element in chrome the console is indeed printing 'ouibounce fired'. However, nothing afterwards is working and no modals are popping up.
Also, just to eliminate another possibility,styles for the below ouibounce have been loaded into my styles file.
var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), {
aggressive: true,
timer: 1,
callback: function() {
console.log('ouibounce fired!');
}
});
body.on('click', function() {
$('#ouibounce-modal').hide();
});
$('#ouibounce-modal .modal-footer').on('click', function() {
$('#ouibounce-modal').hide();
});
$('#ouibounce-modal .modal').on('click', function(e) {
e.stopPropagation();
});
Thanks for your help in advance!
Well I figured it out.
My filewatcher on my styles file was not compiling due to a sass-cache file. I restarted my editor and it worked just fine.
I have the following situation on a web application.
A dialog is built and opened on the fly when clicking on a link:
var dialogInitiator = $("<div id='dialog-initiator' style='background-color: "+bgcolor+";'>Loading...</div>");
dialogInitiator.appendTo(parentFrame);
dialogInitiator.dialog({
modal:true,
autoOpen: false
}).on('keydown', function(evt) {
if (evt.keyCode === $.ui.keyCode.ESCAPE) {
dialogInitiator.dialog('close');
}
evt.stopPropagation();
});
dialogInitiator.dialog('open');
Right after that, I load a new html page into the dialog, with an < object >, like this:
var objectFrame = $('<object style="border: 0;width:'+(dlwidth-30)+'px;min-height:'+(dlheight-46)+'px;" type="text/html" style="overflow:auto;" data="'+url+'"></object>');
dialogInitiator.html(objectFrame);
Now, the "url" variable contains a link to this new html document. When that page is ready, it will focus on an input field. This prevents the ESCAPE key from closing the dialog. So, I am trying to manually trigger the .dialog('close') event on escape keypress.
I do the following, from within the loaded document:
$('#dialog-initiator', window.parent.document).dialog('close');
It get the following error:
"Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'"
Strange thing is, when i call:
console.log( $('#dialog-initiator', window.parent.document).html() );
it shows me the html from the dialog. So it actually IS initiated.
Well, I have tried to fix this error with the help of Google, but without success. I guess my situation is quite specific.
Note: we are forced to use the technique with loading this whole webpage into the dialog due to older functionality we used in modalDialogs. Since they are depricated in the latest Google Chrome, we've built a temporary solution with jQuery dialog.
I hope someone can help me out. I appreciate it!
You can try a global method created after the modal is created
dialogInitiator.dialog({
modal: true,
autoOpen: false,
create: funtion(e,ui) {
window.closeMyDialog = function() {
$('#dialog-initiator').dialog('close');
};
}
})...
Then call it by doing window.parent.closeMyDialog();.
Why not use JQuery UI? It's easier than making your own.
http://jqueryui.com/dialog/#default
I need to bind a function to initialize a js plugin after {Permalink} is clicked so Tumblr IPA "redirects" the browser to a new page, with the post details.
How can I do so? There's not so much documentation on how {Permalink} really works, whether it's ajax or whether it has some callback function (which I would appreciate).
Of course this would try to initialize before the "new" page is loaded. I think it's ajax though.
$("#{Permalink}").click(function() {
$('.jqzoom').jqzoom({
zoomType: 'standard',
lens:true,
preloadImages: false,
alwaysOn:false
});
});
{Permalink} renders a string that is the URL to the post: http://sample.tumblr.com/post/123
For reference, Tumblr theme operators don't have anything to do with javascript. They render mainly strings.
You need to bind the actual element that is clicked:
HTML
...
jQuery
$(".permalink").click(function() {
...
});
Reference: http://www.tumblr.com/docs/en/custom_themes#posts