Google Analytics: Tracking abandonment and goals for lightbox form - javascript

I have a series of forms which represent my site's Goals in Google Analytics. Each one redirects to the same page with a query string to differentiate between them (e.g. /thank-you/?form-name).
For reasons outside of my control, these forms have to be popups lightboxes and while tracking goal completion is as simple as adding a Goal URI for each "thank you" page, I don't know how to track abandonment. Abandonment in this case would be a user clicking "Cancel" instead of "Submit" in the popup.
Does anyone know how I can setup goal abandonment tracking using clicks on the Cancel button? I read about _gaq.push for sending custom Events to track, but I couldn't find how to link that to a Goal and track it as an abandonment.
Is this possible? If so, how would I set it up? Can it be linked to a specific goal so I can track the abandonment of each form separately?
As an aside, for the situation above would it be better to have separate goals for each form or one goal for all forms differentiated by the goal URI query string?

In cases where you cannot add the GA code to the form (lightbox, or 3rd party), I would suggest you to create a virtual page view that will simulate a page visit on that form.
Use the following in your JS code that calls the form:
_gaq.push(['_trackPageview', '/your-directory/form']);
If you use Universal Analytics, then:
ga('send', 'pageview', '/your-directory/form');
Now the form will be rendered as a pageview, which will appears on your reports and Goals' funnel visualization. Remember to set it as a step in the goal settings:

Related

Application Insights - is it right to use href as "View page name"?

As I know, Application Insights uses page title as View page name. But my application has simillar page title for all pages. And that is why I always get only one pageview and can`t create propper userflow graph, because AI displays, that user visit only one page all the time.
User flow graph with one pageview
That is why I added this TelemetryInitializer on client side to track pageview by href but I am not shure if it is a right approach.
const telemetryInitializer = envelope => {
envelope.baseData.name = window.location.href;
};
appInsights.addTelemetryInitializer(telemetryInitializer);
Maybe Azure Team has any other way to do it without changing page title?
There are a variety of ways to approach this. Application Insights User Flows starts from a page view, custom event, or exception that you specify. In my example below, I've used custom events. A custom event in JavaScript might look like this:
appInsights.trackEvent({name:"SuccessfulUserLogin"});
(For detailed instructions on how to log custom events, see the documentation on TrackEvent.)
Here I've used the custom event "SuccessfulUserLogin" as the Initial Event in Application Insights to create a User Flows graph:
That in turn allowed me to track the user flow using the custom events that I specified on other pages (tracking the custom event "VisitedUserForum" on the user forum page and "VisitedFeedbackForum" on the feedback forum page even if both pages were named "forums"):

Google Tag Manager: Tracking funnel event completion on a single page application

I have an eCommerce-like website set up in the following hierarchy. We currently use Google Tag Manager (GTM) and Google Analytics (GA) as part of our web analytics stack.
Currently, each product has its own sign-up page where a potential customer has to go through 4 steps (Quote > Select Plan > Application Details > Review and Pay). The sign-up pages are single application pages (SPA), with static URLs that do not change.
Essentially, clicking the "next" button causes the page to dynamically load assets for the next step.
The goal is to be able to track at which stage customers usually drop off during the sign-up process. In such a scenario, what kind of options are there available to track the "completion" of each sign-up step? Based on my understanding, I believe that some of the solutions include using virtual pageviews or tracking button clicks on the SPA as custom events.
What would be the most efficient implementation that allows integration with Google Analytics to track the funnel completion on the sign-up page?
You can use virtual pageview so you can then configure a funnel in Analytics on these.
A solution for GTM could be to create a different trigger for each step of the funnel that is activated by clicking on the buttons. These trigger fire a pageview tag to Analytics with the page parameter (in Field to set) different contextually based on the step (i.e. /step-1, /step-2, ...).

Best practice for tracking in page javascript interactions w/ Google Analytics

I have a question regarding best practice for a Google Analytics implementation.
I have a website that has static pages, on which there are several opportunities for javascript interaction. I'm interested in what the best practice is for tracking these interactions.
For Example: There is a button that prompts a modal where users can join a mailing list. On this modal, there is another button for users to submit their email address. I want to know how many people click the prompt button, and how many people continue to submit their email address.
To my knowledge there are two approaches on this--
Events - Trigger an event when the modal is prompted, and a second event when the information is entered and submitted.
Pageloads - Programatically trigger a pageload for each modal dialog.
If I use events, I can track the activity, but don't have access to good funneling tools when I set up conversions. There is the 'Event Funneling Report', but it doesn't give me to give the other correlation tools available with conversions.
I do have access to conversion funneling if I trigger pageloads, but the interactions are not pageloads, and I don't want to skew my other traffic metrics.
What is the best thing to do in this scenario? Thanks!
I too wish GA would expand on event tracking to allow the funnels to be more like the page view funnels. I have yet to see any real argument about why they can't.. But there's no real best practice for this other than going with the limitation you are more willing to deal with.
A couple of suggestions though:
If you go the page load route, prefix it w/ something unique e.g. "~events/..." something that wouldn't normally be a page on your site, so that you can more easily filter them out of your normal pages report. Alternatively, setup a view with a filter that excludes your virtual page name (e.g. "~events/..") so you can see your traffic without it and not have to worry about filtering it out in the reports. Alternatively, create a segment that does the same. None of this offers a perfect solution but it does somewhat help making it less crappy :/
If you go the event route, also pop a custom variable. help as far as creating a funnel but does open up looking at it through those reports.

Google Analytics setup (advanced Javascript)

I have three buttons on my website, all of the buttons opens a pop up contact form.
The three buttons are for different things e.g:
Request a call
Get a brochure
Visit us
But they all open the same form; What I want to do is use Google analytics to track the form and know what button they originally clicked; is this possible?
Can an onClick function be used on the button or something?
Really need some help on this!
Event tracking would be a better option since it won't over-inflate your pageviews. You can also set events as goals now.
Request a call
See the Event Tracking Guide
yes it's posible... '_trackPageview' it's your what are you looking for
check this links:
Official:
http://support.google.com/analytics/bin/answer.py?hl=en&answer=2558867
Others:
http://viget.com/advance/how-to-track-internal-links-in-google-analytics (recommended)
http://www.pointit.com/how-to-track-button-clicks-with-google-analytics/

Facebook select friends and post UIDs to custom URL

I'm building a facebook connect application, and here's the specific use case I'm trying to solve (using the Facebook Connect Javascript toolkit - http://github.com/facebook/connect-js)
There is a link on a page that a user clicks to "invite friends".
This click opens up a facebook friend selector widget (something like the multi-friend-selector), and the user selects friends from it.
The selected friends are POST-ed to a custom URL using an Ajax call and the selector widget goes away.
I'm able to do steps 1 and 2 using a fb:request-form and fb:multi-friend-selector. However, by default that posts to facebook and redirects the page. Is there a way to simply retrieve the UIDs of the selected users and then post them to a custom URL instead?
This topic is muddy water right now.
The current way is to implement your custom URL with an fb:req-choice in the content attribute of your fb:request-form as described here.
But as you can clearly see on that page - they are soon deprecating that element and changing how requests/invites work in general. So you can implement it like this for now, but will probably have to change it when they release more details about the new system.

Categories

Resources