Tracking Anchor Links in Goal Funnels - javascript

On my site I have a form that spans 2 steps each step 1 posts back to the same page and loads the second part of the form. The only difference between step 1 and step 2 in terms of URL is an anchor text in the url
e.g.
STEP 1 : www.mysite.com/enquiry/
STEP 2 : www.mysite.com/enquiry/#message
is it possible to track these in goal funnnels? If not would i have to hardcode some tracking paramater into the GA code?

_setAllowAnchor(bool) won't solve your problem; that's a function for allowing Google Analytics to read campaign query strings from the anchor (ie, #utm_medium=cpc.)
This can be hard to do reliably cross-browser without something like jQuery.
You'll need to include a plugin like this to deal with past IE problems: http://benalman.com/code/projects/jquery-hashchange/docs/files/jquery-ba-hashchange-js.html
The following should attach a function to a cross-browser compatible hashchange event, and then create a 'fake' pageview to allow you to track it separately in Google Analytics.
$(window).hashchange( function() {
_gaq.push(['_trackPageview',location.pathname+location.search+location.hash]);
});
});
This should have wider compatibility than some of the other options.
In GA, in your stated example, the 'anchored' page will track as /enquiry/#message.

Related

I want to track some affiliate link clicks in my blog posts but analytics is not tracking every affiliate link click

Yesterday I got 200+ link clicks on the affiliate dashboard, it only shows around 30 clicks on analytics. I did the setup via tag manager for link click tracking and want to track affiliate link clicks as goals in analytics correctly.
The affiliate platform shows a lot more clicks and analytics is tracking only a few. I have three affiliate links in every post on the blog that I want to be tracked when someone clicks on them.
For e.g: https://www.spiritual-galaxy.com/angel-number-192/ , there are 3 affiliate links here, attaching the screenshots.
Screenshot - Affiliate Link 1
Screenshot - Affiliate Link 2
Screenshot - Affiliate Link 3
Attaching the screenshot for GTM settings.
Screenshot GTM
Attaching the screenshot for tracking event (affiliate link click) as a goal on analytics.
Screenshot - Track Event
GTMs click events can be challenging, and you get no data until it hits GA.
I would use the outbound clicks listener and manage rules inside of ListenLayer for what defines an affiliate link. It will then give you reporting on your click events directly so you will be able to see that compared to GTM.
Step 1: Create an account, get your script and place it on your website via GTM. Then turn on the Outbound Clicks Listener and it's Activity Features on the feature screen.
Step 2: Publish your changes and preview your website in GTM. Click on your affiliate links and you will see an outboundClick event pushed into the data layer for each click. . You can see here there are a ton of pieces of info that are really useful. Each row is a unique element of that click event and you can use them to customize your affiliate click data layer activity for better tracking.
Step 3: Let's identify your affiliate links via ListenLayer with some rules. The issue is that the Listener is going to capture all Outbound Clicks, and I'm assuming you might have some that are NOT affiliate links. You can also use the following process to categorize your affiliate links with a lookup table so you can actually segment which ones are receiving clicks!
Turn on the Custom Data Layer Feature under the Outbound Clicks Features screen. Then create a new data layer variable under Global Custom Data Layer Variables I'm creating one called affiliateClick. I am going to write some rules to push "yes" into this variable in my data layer whenever an affiliate link is clicked!
Step 3: Inside my Outbound Clicks Listener navigation, I will select Custom Values. Then create a Lookup Rule. We're going to use some values in our automatic data layer to determine if a click is an affiliate click. You can see in step 3 I would recommend just using a variable and selecting from this list.
For example, maybe you use hostname because you know all the website domains you will link to that are affiliate. Or you could add a URL parameter to all affiliate links and target that in the click event. I'm going to select Hostname. On the next step, select to define a value for the variable we created in step 2. Then click save and manage values.
Step 4: A table will be generate and you can insert rows. Each row is a rule, read top to bottom and it stops when a match is found. Here are my rules, your affiliate domain is at the top and I have some fake examples of others. You can see how you could also name or categorize these with this rule. At the bottom I have a catch all "no".
Save and publish your changes.
Step 5: Now your outbound clicks that are affiliate links will have this clear "Yes" value in the data layer
So instead of trying to use GTM to target some crazy xpath value, you can simply target event = outboundClick and clickCustomValues.affiliateClick= yes for a trigger that will universally capture your affiliate links. Now, if you wanted to you could get super fancy and categorize your affiliate links and pass them into GTM with a variable and pass that to GA with every event - all dynamically.
I'm sortof assuming you know GTM pretty well but basically you just need to be able to create Custom Event triggers based on the event name in the data layer outboundClick and capture data layer variables. If you need help with just reading and using data layer activity in GTM, there are probably a ton of details in other answers on stackoverflow.

Capture the state of a web page in a URL

I find myself having to interact with a web page that hides state in various places so that one cannot easily share it as a URL, for example this page which allows users to look up information from city zoning applications:
https://aca.cityofberkeley.info/community/Default.aspx
You can interact with the page all you want, but the URL in the location bar will remain the same as the above.
Currently, city staff provide users with instructions like "Load this URL, click on the 'Zoning' tab, enter DRCP2020-0010 under the 'Permit Number' field, click 'Search', then when the records come up, click 'Record Info' and then select 'Attachments' from the dropdown menu, then click on the PDF document that says '2020-10-21_DRCP_APP_PCKT_2801 Adeline.pdf'". I would like to be able to replace these instructions with a URL.
Another example is the website where video from city council meetings is archived:
http://berkeley.granicus.com/MediaPlayer.php?publish_id=cbebb4e6-5b83-11eb-920e-0050569183fa
It would be nice to be able to produce a link which brings up one of the meeting videos, and seeks to a certain timestamp like 53:40, so that I can refer to something specific that was said at a meeting.
Looking at the pages that are loaded when I follow the instructions in each case, I can see that there are some POST forms, cookies, hidden input fields, and so on.
Is there some kind of tool that I can use to create "deep links" to pages like these, that were generated using non-URL hidden state, which will allow me to quickly share what I'm looking at with another user?
What I'm seeking is similar to the frmget "bookmarklet", which changes the forms on a page to use GET instead of POST. Sometimes this succeeds in producing a URL which captures form submission query parameters. However, it doesn't work for these applications, for whatever reason.
This question is possibly related to the idea of capturing a web page's DOM state using "browser screenshots" and a script called html2canvas. A possible solution might involve getting and setting cookies in a bookmarklet. Ideally something that produces a normal "https://" URL would be ideal, but if it is impossible to solve the problem except by outputting a "javascript:" URL (bookmarklet) then that is acceptable to me (in spite of the security implications). Thanks.
That seems like not a programming matter. It seems like the site has some security issues as well.
QUESTION A: About Zoning
Here are some links you can use
Direct link to Zoning (I've found it via Advanced search from the site):
https://aca.cityofberkeley.info/CitizenAccess/Cap/CapHome.aspx?module=Planning&TabName=Planning&TabList=Home%7C0%7CBuilding%7C1%7CHousing%7C2%7CPlanning%7C3%7CFire%7C4%7CLicenses%7C5%7CPublicWorks%7C6%7CCurrentTabIndex%7C3
A strange link to the list of files (I've found it via downloading a file, then going to chrome://downloads, then right-clicking the file I've download. The link has been the following):
https://aca.cityofberkeley.info/CitizenAccess/FileUpload/AttachmentsList.aspx?iframeid=ctl00_PlaceHolderMain_attachmentEdit&module=Planning&isInConfirm=False&isdetail=True&isaccountmanager=False&isAdmin=True&isPeopleDocument=&agencyCode=BERKELEY&isForConditionDocument=N
It still doesn't give the direct link to the file, but it it gives the list of attachement of the previously opened Zoning record.
Currently I have no idea what file is triggered by javascipt:__doPostBack('attachmentList$gdvAttachmentList$ctl02$lnkFileName','').
In any case, based on what we have, step one, and then step two seems like minimize the path to download the file. I guess there could be a way to download the file directly, but I currently don't see any easy way. Maybe someone else could figure it out.
QUESTION B: About video
I've used an embed link that shows all the attributes that can be used.
There is a pretty strange but working way to give the exact timestamp. Change starttime from the link below:
https://berkeley.granicus.com/MediaPlayer.php?publish_id=cbebb4e6-5b83-11eb-920e-0050569183fa&starttime=0&stoptime=undefined&autostart=1
So replacing 0 for 3600 will rewind the video forward by one hour (3600 seconds):
https://berkeley.granicus.com/MediaPlayer.php?publish_id=cbebb4e6-5b83-11eb-920e-0050569183fa&starttime=3600&stoptime=undefined&autostart=1
The problem here is that ... you cannot rewind back manually that particular hour (it just gets kind cropped out). But it works to show the exact episode.
That's a pretty strange site.

How to detect url change using jquery (or javascript) for urls without a hash

I've been searching for an answer to this and the most I can find is to use window hashchange. However my urls do not contain hashes.
Please note that I do not have any control over the urls or the code for the sites.
So here is what I am doing. I create a drop down button with a few options.
Button A -> Option 1, Option 2, Option 3, etc....
How the site is designed is this. The base url is
http://example.com/12345zzzyyyxxx
To modify anything on that page, you need to click on the edit button. This will take you to the url (which is the edit page)
http://example.com/12345uuuyyyttt/e
As you can see above, 12345 is a constant and anything after that (up to the /e on the second url) is dynamic. But no hashes.
So I am trying to automate the following:
1. Click on Edit
2. Fill in the required fields based on option selected.
3. Save the changes. Once save is triggered, the site will take automatically take you back to /12345zzzyyyxxx base url.
So I have it working from the edit page, but that means you have to manually click on edit. I want to automate that.
I have tried using setTimeout and setInterval to detect when this happens, but what I have found out during debugging is that both of these go out of scope when the frame changes.
Also note that the entire page does not change, the frame changes keeping the logo and a few other items untouched and you can physically see that they stay while the frame changes.
History JS is basically the standard js-lib to handle all History state changes, check their github account for more information.
https://github.com/browserstate/history.js/

Google Analytics Goal for selecting text on web page

I have a project page at http://fulldecent.github.io/cameralife/ and some users will "convert" by selecting this text on the page:
git clone https://github.com/fulldecent/cameralife.git
And hopefully they will paste this into a terminal :-)
I am looking for advice on how to fire a Google Analytics goal when this text is selected. Right now I am working with:
Attach to mouseup
Check createRange or window.getSelection
Fire Analytics goal
That technique is at: Selected text event trigger in Javascript
This approach is from 2010, and wanted to ask first. Is this the best approach with HTML5 or should I be using a more modern approach?
I would suggest looking at CopyPaste by Tynt. The main purpose is different (inserting your URL to copied text), but why wouldn't it allow firing an trackEvent request, which would subsequently record a conversion (assuming you would set up goal tracking based on specific event occurrence)

Many share buttons for social networks on one page

I am currently doing some work on a research database where they have decided that they want to be able to share links to articles from the site on social networks (Facebook, Twitter, LinkedIn and Google+).
Preferably this should be done through the share buttons provided by the respective networks. I quickly got the buttons working and displayed correctly on the site by following the implementation instructions from each network.
My problem is a consequence of that the site offers the possiblity to show 1000 (1K) post on a single search result page. This means that when such a page is created it needs to create 1000 share buttons for each social network (effectively 4000).
Sadly this seems to overwhelm the browser as it offers to stop the javascript provided by the social networks and whether you choose to stop it or not - the page ends up in deadlock waiting for a response from the social networks and never finishes the page loading process.
I have an idea that the problem may be that the large number of asynchronous requests means that the browser somehow misses some of the responses and thus ends up waiting forever for a response that will never come.
As mentioned it is only a problem with such a large number of posts, if a page for example displays 100 posts (effectively 400 share buttons) it works perfectly.
While it could be argued that 1000 post on a single page is overkill, limiting the maximum number of displayed post is sadly not an option.
My question therefore is whether any of you know of a way to solve this kind of problem or if my only real option is to create custom share buttons that doesn't need to be created through the javascript provided by the social networks ?
The following references leads to the documentation for each of the share buttons.
Twitter
Facebook
LinkedIn
Google+
For all these buttons, there is a main js file which does the heavy work.
So, for LinkedIn, add the script tag:
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
once in the page. And use the below script as a placeholder for your linkedin button whereever you need it. (don't forget to replace the data-url attribute in below script)
<script type="IN/Share" data-url="http://developer.linkedin.com/plugins/share-plugin-generator" data-counter="top"></script>
For Twitter similarly, the below script tag needs to be added once in the page as it's job is to get the main js file and add it to the page.
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
The below script needs to be added multiple times whereever you want. Replace the data-url attribute with your url which needs to be tweeted when you click on it.
Tweet
When you get the code for FB or Google Plus like, you will get a script which needs to be added once and then the code to be added where ever you need.
EDIT:
Based on your comment below: The scripts will surely cause issue because they need to convert each and every placeholder into a good looking 'like' button. Below are few ways to improve the performance:
run these scripts only on page load (i.e., add the main scripts at load time)
using setTimeout or setInterval, work on every 100 placeholders at a time (requires change in main scripts)
Lazy load the init of like buttons. When the user scrolls the page and the like buttons will show up in the page, then initialize the buttons (requires change in main scripts)
Recommended Approach: Keep just one set of like buttons. When user hovers over a search result, then add this set of buttons to that div and change the attributes related to url in the buttons. With this way, only one set of buttons will be shown and won't take time at all to init them.

Categories