I had created an extension that opens a page from 3 different methods:
right click on an image and clicking on the menu item.
link I create dynamically on each image.
Upload an image in the background pop up.
Once the user clicks on the link or uploads his own image, a new tab is opened with the info of the image he clicked (or uploaded).
I had added the utm_source and utm_campaign to the link but for some reason, the traffic counts as direct traffic and doesn't add the info to the analytics code.
Example url: chrome-extension://leoaaeofnhfjkmghbdngecpnadnolnnj/index.html?utm_source=extension&utm_medium=upload#data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/
Other then that issue, tracking is working correctly (sending pageview and events).
Anyone experienced this issue and have a workaround?
After a long investigation I had found a solution:
First, we get the URL params:
var url_string = window.location;
var url = new URL(url_string);
var utm_source = url.searchParams.get("utm_source");
var utm_medium = url.searchParams.get("utm_medium");
Then we make sure to count own domain as referrer:
ga('create', 'UA-xxx-x', 'auto',{'alwaysSendReferrer': true});
And finally we set the source and medium manually before calling for the page view event:
ga('set', 'campaignSource', utm_source);
ga('set', 'campaignMedium', utm_medium);
ga('send', 'pageview', '/xxx.html');
I'm guessing that as the protocol is chrome-extension:// the utm params doesn't handle correctly and also as the referral is the same domain (extension id) it doesn't count as a referral.
Hope this will help someone...
Related
I'm making a Google Chrome extension that has various parts. It has an iframe, a pop-up and an options page. Currently the iframe and pop-up communicate fine and send the collected data off to a database. However I want to capture some data from the options page (an email address) to be used elsewhere in the app. I planned to do this through capturing the email address and storing it but the code doesn't seem to be working.
I've attached the code I'm trying to use in options.js
function save_email(){
var email = document.getElementById('email').value;
chrome.storage.sync.set({
userEmail: email} );
};
I would hope to see it in local/session storage but nothing is there.
How to pass parameters(envelope,PF and r ID) within iframe while returning URL in embedded docusigning? If I enter the POWERFORM link on browser I'm returning URL with the parameters (envelope,PF and r ID) but if I run code within iframe I'm unable to get the parameters. Please do assist me about this issue.
You are opening Powerform inside an IFrame, so the scope of the opened URL is inside the IFrame only and DocuSign cannot do anything to redirect the browser to come out of the IFrame. You have write a code on your end to capture the redirect URL and break the flow out of IFrame, you can find a similar query here. Normally DocuSign does not recommend using IFrame for Signing, also to capture the data like envelopeId, r Id etc, it is better to configure DocuSign Connect with a listener on your side. Using url redirect is a fragile solution as user might close the browser (or browser hangs/network issue) and you might lose the data. Whereas with DS Connect, DocuSign will publish the event to your listener and you will be able to capture all the required data in your listener.
<script>
function myFunction()
{
var x = document.getElementById("form1").action;
document.getElementById("demo").innerHTML = x;
}
</script>
This thing works for displaying the parameters.
window.parent.window.location.href = 'Parent URL' works to break out of an iframe and load the parent page.
I have added this gtm code in my chrome extension page(injected by the content script in and iframe)
// <!-- Google Tag Manager -->
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','owDataLayer','GTM-XXXXXXX');
// <!-- End Google Tag Manager -->
I confimred the gtm.js file loaded successfully.
Request URL:https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXX&l=dataLayer
Request Method:GET
Status Code:200 (from disk cache)
I have a button and below code has been attached to the click event of the button
dataLayer.push({
'event': 'tab click',
'user id' : 123,
'description' : "Social"
});
When I click the button dataLayer.push worked with success but nothing is being sent to https://www.google-analytics.com/r/collect?
no activities in the "Network" tab of developer toolbar window.
Can anybody help me resolving this? Thanks in advance!
EDIT:
Adding screenshot of the tag setup.
I have spent a lot of time this weekend on reading gtm and Google chrome extension.
Finally I got this blog post by Simo Ahava. He discussing the exact same problem with solution. Thanks to Simo.
Here is partial paste of his blog post. We must add checkProtocolTask : false to each gtm tag in order to send track them from
Google Chrome Extension.
Add checkProtocolTask : false to Fields to Set
Scroll down to Fields to Set, and add a new field:
Field Name: checkProtocolTask
Value: false
Normally, Google Analytics requires that the request to GA originate from either HTTP or HTTPS. If the requests originate from anywhere else, the process is cancelled. By setting the task named checkProtocolTask to false, we can prevent this check from happening, since the extension uses the custom chrome-extension:// protocol.
Screenshot:
Posting this so others an find this answers helpful if they face same issues. Thanks!
I have this XAgent with seems to work fine but it opens it in the CURRENT browser. How would I open it in a new window?
This code is running in After RenderedResponse of an XPage.
Thanks
// Track Downloads
// Setup XAgent stuff
var exCon = facesContext.getExternalContext();
var writer = facesContext.getResponseWriter();
var response = exCon.getResponse();
var fileLink = param.get("link");
// Insert Logging Code here
facesContext.getExternalContext().redirect(fileLink);
writer.endDocument()
Looks like you are trying to track when somebody clicks on the download link.
Without tracking the link would have been pointing directly at the file causing the browser to initiate the download and the user would stay on the current page. With the XAgent tracking in place the user is going to a different page in the application to do the tracking and initiate the download.
You could add a target of '_blank' to the initial link that is calling the XAgent. This will cause a new window/tab to open in the users browser but it will close once the download initiates.
Using this method of tracking the downloads will, however, remove the ability for the user of the site to be able to right click on your download link and do a 'save as'.
For a download link you could also consider to just stream the file using the OutputStream (there only can be one: Writer or Stream!) to directly serve the bytes of the file to download. You need to set the MIME type in the header. If it is not a file type the browser can handle, the download dialog will appear anyway. Opening a new window is actually considered bad style these days. If a user wants a new Window there is Ctrl+Click and Shift+Click -> a decision you shouldn't make for them (which opens the can of worms of browser illiterate users).
How do you track outbound links for your web site, since the request is logged on the destination server, not yours?
You can add a quick JQuery script to the page that will track external links and can either redirect them to a file on your server that will track the link and then forward to it, or add an ajax request that will submit on click for external links, and track them that way.
See:
http://www.prodevtips.com/2008/08/19/tracking-clicks-with-jquery-and-google-analytics/
https://web.archive.org/web/20090214024330/http://www.justskins.com/development/how-to-track-clicks-on-outgoing-links/132
Method #1: target="_blank", onclick and Google Analytics Events
Format your outgoing links with the following attributes:
outgoing
Define a javascript tracking function (requires google analytics to be loaded already):
function trackOutgoing(el) {
ga('send', 'event', {eventCategory: 'outbound',
eventAction: 'send',
eventLabel: el.getAttribute('href'),
eventValue: 1});
};
Pros:
Does NOT interfere with normal link behavior
Does NOT require redirecting to another url
Cons:
The onclick is not guaranteed to execute (user or browser could terminate the main window)
Method #2: Redirecting with Javascript and Google Analytics Callbacks
Format your outgoing links with the following attributes:
outgoing
Define a javascript tracking function (requires google analytics to be loaded already):
function trackOutgoingAndRedirect(el) {
var url = el.getAttribute('href');
ga('send', 'event', {eventCategory: 'outbound',
eventAction: 'send',
eventLabel: url,
eventValue: 1,
hitCallback: function() { document.location = url; }});
}
Pros:
Does not require target="_blank"
Higher chance of your event being registered with Google Analytics (compared to Method #1)
Cons:
Overrides the default behavior of links with return false;
Cannot open outgoing links in a new window
Method #3: Using a Redirect URL
Format your outgoing links with the following attributes:
outgoing
On your site you will need to implement a redirect script which is beyond the scope of this answer.
Your redirect script would most likely track the outgoing link and then redirect to the provided url.
Pros:
No Javascript required
Does NOT require Google Analytics
Does NOT interfere with the normal link behavior
Cons:
Harder to trigger Google Analytics Events
Links do not link to their original URL. Which may have negative SEO implications.
Add an onclick or onmousedown handler to the anchor tag. You can see many sites doing this, such as Google.
I don't like the redirect as described by Eric Tuttleman, as you unfortunately lose the 'search engine friendliness' of the link.
I handle this on a site I own by adding an onClick to my outgoing links, which fires a function which sends the link URL and a timestamp to my database. I then wrote a backend which retrieves the data, and lets me view it by such categories as 'Most clicked / 24h', 'Most clicked / 1w' etc.
I hope this helps.
On one system I've worked on, we ended up storing redirects in a database table and creating a redirect page that takes an id as an input. On our content pages, we link to the redirect page with an unique id from this table. Once the redirect page looks up the url via the id from the table, it then sends the client a redirect response, sending them to the ending page.
This does give us logging of external links, and as an added bonus, it makes mass changes to external urls a bit easier in some cases.
Some newer options that work without any hacks as explained in https://css-tricks.com/send-an-http-request-on-page-exit/ are Fetch with the keepalive-flag or navigator.sendBeacon.
keepalive is not yet (Aug. 2022) supported by Firefox (Can I Use), but navigator.sendBeacon works in all modern browsers (Can I Use).
// normal fetch, not guaranteed to work
someLink.addEventListener('click', function(event){
fetch('http://www.testing.local/?origin=classic-fetch');
});
// fetch + keep alive (not working in Firefox as of 103, Aug. 2022)
someLink.addEventListener('click', function(event){
fetch('http://www.testing.local/?origin=fetch-keep-alive', {
keepalive: true
});
});
// navigator.sendBeacon (all modern browsers)
someLink.addEventListener('click', function(event){
navigator.sendBeacon('http://www.testing.local/?origin=beacon');
});