Track 'conversion' based on callback with Google Experiments - javascript

I'm looking to set up a Google Analytics experiment where we test two pages and tack if a user clicks one of a set of links (don't really care which one of the set).
However, the links will all go off-site and I was hoping to avoid adding a redirect somewhere in between.
What I'd love to do is have a bit of javascript that's called and is counted as a 'conversion' in the experiment, that way I could call it any time one of the buttons is pressed. I don't really care which button, just looking to track the total.
I'm testing this with the following code on two page:
Tracked Link
This is supposed to correspond to a goal I set up like this:
So far after three hours (and I've been clicking the link) there are no results howing up in the test.

Related

How to generate a new Page on a certain event (next.js)

I know the title is confusing, but basically, I want to generate a page on a certain event is triggered (i.e. a button is clicked).
For example, when you make an account on a service like twitter, how exactly does it generate a unique page for your profile (like https://www.twitter.com/exampleuser1234)? This has always confused me and I'd love an answer.
I have searched and scanned Google far and wide, and I could not find any clues at all.
I don't even know how to start.
This is done using dynamic routes, e.g. /users/[id].
You can learn more in the documentation
https://nextjs.org/docs/routing/dynamic-routes

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.

phpBB - two forum views on one board?

Trying to create a scenario in phpBB when a logged in user clicks a link or button (which I can put in the header file), one set of forums is displayed. When user clicks another link in the header, another set of forums displays. I have a large phpBB board, and need to have it where one view shows 15 forums, and then a second views shows the other 15 forums. This would be good for really large boards.
An idea I had was to set up a phpBB usergroup (for example, usergroupF). This usergroup would have permissions set to be accessible for forum view 2 (15 out of the 30 forums on board), but not to forum view 1 (the other 15 out of 30 forums).
So if a user was in usergroupF, they could see the 15 or so forums in forum view 2, but not see the 15 or so forums in forum view 1.
So, when a visitor first sees board, or when user first logs in, they first see forum view 1. If they click on a special link, they are given temporary existence as a member of usergroupF. For this user, forum view 2 would now be visible, but not forum view 1.
Then they click on the link again and their existence as a member of usergroupF would be removed, and they would only see forum view 1.
When I am referring to a link, I mean something that could be simply be put into the over_header.html file of the theme. As far as what could create this switching of usergroups, it seems like a jQuery snippet may be the way to go. For example, I found a simple tutorial here:
http://www.randomsnippets.com/2011/10/09/how-to-hide-or-show-content-based-on-links-or-urls-via-javascript-jquery/
All the query would do is add user to usergroupF, or remove the user from usergroupF.
Two different versions of the script could be created - one to add the user to usergroupF, and one to remove the user from usergroupF. These could be shown depending on if the user was a member of usergroupF, using simple phpBB if statements, so only one link would be visible at a time.
The end result would be a huge board, with 30 forums, could have 2 separate views a user could switch back and fourth between (each with only 15 forums visible). This would be good for membership based sites using phpBB, such as a site integrated with aMember and phpbb.
I guess the question is if it's possible to give a user temporary access to a usergroup, using something such as a jQuery script, or is there a simpler way of creating this. Any suggestions for getting started with this? Thanks for any suggestions.

Omniture - Is it possible to count number of clicks per special tagged link?

I'm trying to figure out is it possible to track number of clicks per special links via Omniture.js (s_code.js). For example -
Set of links should have something like tag_1, others tag_2 etc.:
Menu link 1
Menu link 2
Menu link 3
<div class="some-wrapper">
Some button
</div>
On click I need to +1 for special tag, that's way counting number of clicks per different classes of links.
Official documentation is really confusing, should I somehow do this by specifying eVars or props?
Different variables can be used to populate different reports. Which variables you want to populate depend on what business questions you are trying to answer. For example, if you simply want a running count of # of clicks and that's it, all you really need is the answer provided by #BrettAHale. But if you are looking for more robust reporting, e.g. correlating clicks with other activities or data, then you're going to want to populate some of the other variables.
Providing general training for the variables and what reports they populate is outside the scope of Stack Overflow. If the documentation is too confusing then I suggest you enroll in some of the training courses Adobe offers. But, if you have a specific question about a specific variable that you are confused about, feel free to ask.
<a href="#" onClick="s.tl(this,'o','tag_1');”>Menu link 1</a>
This makes some assumptions:
Your Omniture object is named "s"
You don't need any additional props and evars set
This method will surface data in the custom links report with tag_1, tag_2 etc as the line items.

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