I am running a Image gallery website which can be used to download images... say if you call somedomain.com/flowers it will return a zip file containing top 10 flower images....
Now my requirement is to track these downloads.. how can I implement this.. any possibility to use Google Analytics.
Update:
I forgot to add another important thing because of which I can't use custom events...
It is not necessary to always click and download a zip file.... I have created a little app (AIR application) to directly download the file.In that case I can't able to use any GA script... I want to know whether it is possible to use GA in this case if yes then how to implement?
Fire a custom event when the user clicks on the download link.
You need to associate google analytics events with your links. Please read
http://code.google.com/apis/analytics/docs/tracking/eventTrackerOverview.html
http://code.google.com/apis/analytics/docs/tracking/eventTrackerGuide.html
The two basic ways are event tracking (registering the click) and the other is by a virtual 'pageview'. The problem with the first is that clicks are less reliably measured; the problem with the second when the user clicks the link, trackPageview might not have time to execute. One common solution is to use the virtual pageview technique and add a small timer to cause a 100 millisecond delay:
In practice, you need two pieces of js code--one to modify the a href tag by binding the onclick handler to a function, and the other to create that function: (shown first, below)
<script type="text/javascript">
function obl(this) {
try {
var pageTracker=_gat._getTracker("UA-XXXXXXX-X");
pageTracker._trackPageview("a_download_link");
setTimeout('document.location = "' + this.href + '"', 100)
}catch(err){}
}
</script>
<a href="a_download_link" onclick='obl(this);return false;'>Click Here to Download</a>
If you are using the newest (asynchronous GA Code) replace the function above with this one:
<script type="text/javascript">
function obl(this) {
_gaq.push(['_trackPageview', 'a_download_link'+this.href]);
setTimeout('document.location = "' + this.href + '"', 100)
}
</script>
One complication this technique introduces is that it causes your downloads to be co-mingled with your page view totals. As long as you are aware of it, it's trivial to deal with--just create a filter to remove these 'false' page views. Similarly, to actually show the downloads in the GA Browser, you might want to create a separate profile (e.g., 'Downloads') and then create an 'Advanced Segment' by filtering all page views except the download page views.
Related
I'm working on Google Tag Manager/Analytics for a site, here's an example page that a tag is being fired on:
https://www.forktrucktraders.co.uk/listings/refurbished-combilift-multi-directional-gas/
The tag is fired when the "Send Message" button on the contact form is clicked:
https://imgur.com/a/qTPb3Ci
Right now I've got the event's action returning the URL of the current page the form was sent from, but I'd like to know if it's possible to get the href from the "Visit dealer's website" link on the page, as it would give a faster idea of which dealer the listing is coming from. Probably a long shot to make this happen solely through Tag Manager (if not possibly just a hidden bit of data that just has the dealer's name in on the "Send Message" button) but I'd appreciate any input.
You most certainly can. Off the top of my head something along the lines of the following should work...
It depends on whether you prefer just having the url or breaking it down further.
Just the URL:
Create the following in a custom HTML tag within GTM
<script>
//This selects your desired href:
var dealerURL = document.querySelector(".stm-dealer-image-custom-view a").href;
//This pushes the value into the dataLayer temporarily for use later:
window.dataLayer.push({
event: 'formSubmit',
dealer: dealerURL
})
</script>
Ideally, this should be fired on page load of all your listings pages.
Next create a new User-Defined Variable of the dataLayer var type
within GTM corresponding to dealer, this will store the value to be
pulled through in your event.
Now just change your event action to {{dealer}} (or whatever you
ended up naming the datalayer variable), and this value should be
pulled through in your event.
Getting the dealer name:
Now presuming the href format is always the same across the site you could split this by a delimiter instead:
var dealerURL = document.querySelector(".stm-dealer-image-custom-view a").href;
var dealerSplit = dealerURL.split("/");
var dealer = dealerSplit[4];
The above would leave you with a variable containing the string 'hitec'.
This however is quite prone to breaking if the page path does not always follow the same format, as such it would be better to use RegEx instead.
To answer your specific question, you would need to create a variable to target that specific link element that contains the dealer's website's url. The simplest way is probably to add an id to the <a> element and create a variable in GTM to track it.
I had a quick look at your site and I think you have more problems with the form.
Your even triggers without validating the form, this would lead to extra events.
The event category, action and label could use some work in organizing it to help you analyze the data
You also have a mix of gtag.js and GTM snippet on the page, I would say this is not normal practice, usually, GTM is enough. You can contact me through my profile if you'd like to chat more about it.
I was asked to capture the analytics on a website. The website is made up of 5 web pages, but I now realize that the domain is the same and the only thing that changes is the URL fragment, i.e. www.domain.com#a, www.domain.com#b. The only info that comes through to GA is the domain and it does not include the URL fragments. The tracking code I'm using is Tealium and the data is being sent back to Google Analytics. How can I set this up so that i can see the entire URL in GA including the URL fragments?
So, from Tealium's perspective we need to trigger a view event when a new fragment is loaded (if I am understanding this correctly).
If we assume that the fragment change occurs on a link click then we need to trigger the view event when the link click occurs.
From the GA perspective, we need to trigger a view that captures the new information. For a view this is likely to be location, path and title.
Therefore, we need Tealium to construct the new data points and then pass them in a view event to GA.
The simplest way to do this in Tealium (all things being equal) is via a jQuery onHandler Extension
The jQuery extension requires the following information:
jQuery selector (or selectors) to pay attention to
"Trigger On" event type (this will be Click in this example)
Tracking event type to run (View event in this case)
Variable & values to set
Tealium jQuery onHandler extension config
note it's always a good idea to set a condition on your jQuery extensions so that they only run when needed instead of all the time and everywhere
In this extension, I have set the following:
jQuery Selector: '#MyID_1, #MyID_2, #MyID_3' -- yes you can pass a list of selectors or nearly any other valid jQuery selector statement
Trigger On: 'click'
Tracking Event: 'view'
3 Variables:
a. 'page_name' : $(this).text(); //get the link text
b. 'my_url' : utag.data['dom.url']+$(this).attr('href') //building the full URL including the fragment
//utag.data['dom.url'] is a variable/datapoint that Tealium automatically generates
c. my_path : utag.data['dom.pathname']+$(this).attr('href'); //building the path
//utag.data['dom.pathname'] is a variable/datapoint that Tealium automatically generates
NOTE: make sure to set the type for each these to "JS Code" otherwise your JavaScript will be quoted out as a string.
Why these three variables? As I understand GA, these are the values it would expect for a new page view -- location/URL, path, and Title so we are constructing those values in the extension to pass them to GA on the view event.
Now, we just need to map these new variables to GA.
my_path gets mapped to page in the GA mapping toolbox
page_name gets mapped to title
location isn't a default option in the mapping toolbox so we need to add a custom destination variable called location and map my_url to it.
custom variable mapping for GA
That's how you do it from within Tealium and minimal coding. If for some reason you don't want to / can't do it inside of Tealium, this provides us with a very nice template for a custom function to add to our codebase:
`$(document.body).on('click', '#altID', function(){
utag.view({
"page_name": $(this).text(),
"my_url": utag.data['dom.url'] + $(this).attr('href'),
"my_path": utag.data['dom.pathname'] + $(this).attr('href')
})
})`
See both in action over here at CodePen.
I have an Google apps script and I want to call this Google apps script on my web page?How can I achieve this?This is my Google apps Script code for creating a google doc on my drive.
function createAndSendDocument() {
var doc = DocumentApp.create('Hello World');
doc.appendParagraph('This document was created by my first Google Apps Script.');
doc.saveAndClose();
var url = doc.getUrl();
var emailAddress = Session.getActiveUser().getEmail();
GmailApp.sendEmail(emailAddress,
'Hello '+ url);
}
and I want to call this function when I click on a button on my web page.But I don't know how to call this function on my button click.And one more thing I also save this script and change this version number and deploy as a web app and get the URL of this Google apps Script.
UPDATE: (added incorrectly in an answer)
Actually i am using this line like this.
btnClick.addEventListener("click", function () {
Page.ClientScript.RegisterStartupScript(this.GetType(), "GoogleFunction", "createAndSendDocument()", true);
}
So please now tell me what's wrong in that?When i run my application then it's show me an error like "The Page is not defined".
Look also at this documentation and also this one, everything is clearly explained .
you can add the div and the code in your page as you needed. also you need to add the javascript codes inside your head if it exists.
hi you can use this code on button click after adding a script manager in the form
Page.ClientScript.RegisterStartupScript(this.GetType(),"GoogleFunction","createAndSendDocument()",true);
I have outbound links like this in my html:
<a href="http://www.example.com" class="gaLink1"
target="_blank" onCLick="ga_track_link('action', '123', 'abcde', 'fghij')">
<img src="http://www.example.com/image.jpg" alt="image name" height="180" style="max-width:153px;max-height:150px;" />
</a>
So, When there is a click on this image, the link www.example.com should open in a new tab, since there is target="_blank". Also, the onCLick event will call the function ga_track_link which is defined as:
function ga_track_link(action, id, name, source) {
_gaq.push(['_trackEvent', 'category 1', action, id+': '+name]);
_gaq.push(['_trackEvent', 'category 2', 'example', source, 15]);
}
This function is defined in the script section at the end of the html (inside the body section)
I'm observing in GA, there both events are tracked (category 1 and 2), but the amount of times that both are tracked is not equal. Category 2 appears almost half of times, which makes me think that the 2nd event is not always being fired.
I found this link http://support.google.com/googleanalytics/bin/answer.py?hl=en&answer=55527
that suggests to put the function "ga_track_link" in the head section of the html and use a return False in the onClick function.
According to some other answers like When and why to 'return false' in JavaScript? , the return false statement would tell the event (onClick) not to be fired, which is not what I want, since I do want it to be fired but after my 2 GA events were fired.
So, I have 3 questions:
1) Is there any problem firing more than 1 GA event (with _trackEvent) on 1 click? What is the best way to do it?
2) Why Google Analytics link above states that the function should be placed in the head section of the html?
3) Can someone please clarify the "return false" statement's goal and how to use it correctly?
1) Is there any problem firing more than 1 GA event (with _trackEvent) on 1 click? What is the best way to do it?
No, no issue with that although you could do both with one push. One Push, Multiple Commands
2) Why Google Analytics link above states that the function should be placed in the head section of the html?
Because the user may click the link before the javascript has time to load on the page.
3) Can someone please clarify the "return false" statement's goal and how to use it correctly?
My understanding is that it prevents the default behavior of the element and if listed after your function call it should have no effect on that function call. This is just as stated in one of the answers to the question you cited:
<a href="#" onclick="doSomeFunction(); return false;">
In the Google Analytics support link you provided, the return false; is stopping the link from immediately sending the user off the site. It runs the tracking function before hand and then redirects the user to the external site after a delay. This allows the tracking code the time needed to be sent off before the redirect.
function recordOutboundLink(link, category, action) {
_gat._getTrackerByName()._trackEvent(category, action); //set tracking
setTimeout('document.location = "' + link.href + '"', 100); // redirect to external site after delay
}
Do you have target="_blank" on all links using your ga_track_link() function?
If the link is opening in the same window, it's possible that the tracking pixel requests made by _trackEvent might not have time to complete before the new page starts being fetched. If the link is opening in a new window, it's not a problem.
I'm trying to duplicate the behaviour of the "Share on Facebook" button from Youtube. Basically, inside a Flex app I'll have a button and when I click it I want a popup that enables me to post something on the wall.
While it is possible to make a call to javascript to open the pop-up I want to be able to set the images and the text of my posting.
Do you know how I could set the images or text as a paramter to the sharer window?
Thank you!
This is fairly straightforward to do. Youtube uses the Facebook API which pops up a new window (Info on Facebook sharer API).
To do this in flex,
Create a button that onClick will call a javascript method, ExternalInterface.call("fbLink", "www.yahoo.com");
In your HTML file (most likely index.template.html) add the JavaScript method, fbLink which does the following:
function fbLink(url) {
window.popup("http://www.facebook.com/sharer.php?u=" + url, {height:440, width:620, scrollbars:true})
}
Now when a user clicks on the button they will be sharing the link "yahoo.com" with facebook account.
as I understood you asking for some help in accessing js popup in html page of facebook share button, so you should use ExternalInterface in this casa and access needed DOM node using getElementById function in your js interface.
In other case I want propose you to read another one way http://www.riaxe.com/blog/flex/publish-into-facebook-wall-from-flex/
It seems that you want to have a button on the flash application and once clicked it opens the facebook page that shares the video/image that pertains to the clicked button. What you want to do is simply create a button that on click opens a new website to facebook using their share api which has the following format:
var facebookShare:String = "http://www.facebook.com/share.php?u=' + encodedVideoLink + '&t='+ encodedVideoText";
Where the u parameter stands for the link that you wish to share, and the t parameter stands for the title of the piece that you want to share, whether it be a picture or video.
You want to add an event listener on MouseEvent.CLICK that has as its callback function a method that handles the opening of the facebook page passing the facebookShare variable as shown above. To open another page on your browser you can use this AS3 Class called URLNavigator: http://www.danishmetal.dk/project/source/com/zorked/URLNavigator.as
To sum it up, something along these lines would do:
var facebookShare:String = "http://www.facebook.com/share.php?u=' + encodedVideoLink + '&t='+ encodedVideoText";
facebookButton.addEventListener(MouseEvent.CLICK, this._goToUrl(facebookShare));
private function _goToUrl(link:String):Function {
var window:String = "_blank",
feats = "",
thisOverlay:Object = this; // to not lose scope when returning a func
return function (e:MouseEvent):void {
trace("Opening link to:"+link);
try { URLNavigator.ChangePage(link, window, feats); }
catch (e:Error) { trace("error launching "+link+" in "+window+" with feature set "+feats); }
}
}
I hope that helps. If you have questions regarding the code please let me know.