Blog Posts Page: 4 of 5
Add Google Event Tracking to Links in OU Campus
The University of Northern Colorado has recently embraced all things analytics and as part of that we had a need to add event tracking code to buttons. The best use of this is when a pdf or document needs to be tracked. Since that content can’t have the analytics code, the link to it can fire an event that can be tracked in Google Analytics.
The Google Event Tracking Gadget will help web contributors create event tracking codes on links.
This gadget works with the most recent version of Google Analytics, or analytics.js. Full documentation about events can be found within Google’s Event Tracking Documentation.
The final code that is produced by the gadget is this:
Test to see if it worked
Publish the file with OU Campus and click on the link. Next, login to Google Analytics and open up a view that is part of that page. On the right column select “Real-Time” / “Events”. The current events happening on the site will be displayed. It usually takes a few seconds for an event to show up.
Item #3 below is the event that was fired when the link from the code above was clicked on.
Clicking into the row will show the Event Label, which in this case was “Jesse”
The Gadget
The code for the gadget is up on GitHub or if you would like to install it via GitHub Pages, follow OmniUpdate’s Instructions for installing a gadget, when asked for the URL use:
https://jessgusclark.github.io/gadget-event-tracking/build/
Certificate of Accomplishment, DFIN-511 Introduction to Digital Currencies
The University of Nicosia uses the Bitcoin blockchain to verify the authenticity of certificates that have been awarded.
Removing Extensions with XSL to create SEO Friendly URLs
Using a server rewrite, a url such as http://example.org/jesse could read from http://example.org/jesse.php. However, in the content management system the link would go to the .php version. How can the URL be rewritten from:
Creating Websites without Code, 2016 Version
What is the average amount of time between blocks mined?
I am taking an online class through the University of Nicosia in digital currencies and covers Bitcoin and the Blockchain. It is a free MOOC and can also be used as credit towards their Masters in Computer Science.
During the Live Q&A section on October 3rd, 2016, there was a question about the timing between blocks being mined. It was suggested that we look at the previous 2016 blocks to see what the average time between blocks mined.
The Bitcoin protocol is set to average the time to be 10 minutes between blocks. Every 2016 blocks the network readjusts the difficulty so the average time blocks are mined is 10 minutes. If the average time is longer than 10 minutes then the difficulty decreases, if the average time is shorter than 10 minutes the difficulty increases.
I wrote a small JavaScript script to parse Blocktrail’s API to get the previous set of 2016 blocks and convert it to a CSV. I opened that file in Excel and created the chart and the results below.
The blocks started at 429408 and finished at 431423. The difficulty was set at 225,832,872,179.46.
Results
The average time to mine a block was 563 seconds or 9:23. The longest time was 1:17:36 and the shortest was less than a second.
Because the average time to mine was less than 10 minutes, the difficulty was increased starting at block 431424 to 241,227,200,229.99
The Code
I posted the code up on GitHub if you are interested in contributing.
Use of Blockchain for Monitoring, Identification and Notification of Population Health Trends and Outbreaks
In July 2016, the Department of Health and Human Services put out a call for whitepapers about using the blockchain in health care. I had used the Bitcoin blockchain but hadn’t considered how the blockchain could be used outside of a ledger system.
Inserting Icons into OU Campus
Our web authors love icons and for the longest time they inserted them as icons that they found from google searches. Our designer would design custom icons for sites and they would be converted to svgs and placed in the page. Both of these solutions worked but were clunky. Luckily, icon fonts and icon sets have been popping up which provide end users an array of icons to use on their pages.
Non-content tag’s in WUSIWYG editors
The biggest challenge with inserting icons into a WYSIWYG interface is that they are usually only code and don’t render until after you preview the page. Most icon code looks similar to this:
<i class="material-icons xl UNC-blue">assessment</i>In this example, the word assesssment would be written on the page without any context. Within the WYSIWYG editor, a user could get stuck within the tag and could be difficult to get out of. Typing content inside the tag would be hidden by CSS.
Table Transformations
OU Campus users are familiar with table transformations as it allows users to create tab navigation, accordions and other content structures where some of the content may be hidden when the page loads. This solution works great in edit mode because the web author can edit all of the content on the page. If your installation was like ours, you may have the ‘Place cursor at the end of this sentence to add more content’ content which helps with the cursor issue in WYSIWYG editors with tables.
Image Transformations
I’d like to introduce the concept of an image transformation for icons. The benefit of using an image instead of a table is that the
tag is inline so icons can be placed with content. When the user inserts and image with a specific class to the page, it gets converted into an icon.
In the picture above the source of the image is a placeholder, it doesn’t matter what image this is because it will be replaced using XSL on preview and publish. (The source could be a dependency tag if the image was within OU but this image will never get served to the public.)
The description is the one of hundreds of icons that could be inserted. This demo uses Google’s Material Icon set but any icon set would work.
Class is the additional classes that the tag needs to render out the icon. material-icons is the parent class that is used by Google and will be searched for in the XSL match below. xl is the size (extra-large) and gold is the color of the icon. The Dimensions are also added but this only effects the editor.
After hitting [OK], the WYSIWYG editor puts an image in the editor that we can edit just like an image:
<img class="material-icons xl gold" src="https://www.unco.edu/omni/gadgets/icons/img/placeholder.svg" alt="account_balance_wallet" width="200" height="200" />HTML Transform!
On preview and publish the image needs to be replaced with the icon code. A simple template match to find the class .material-icons will work:
<!-- Convert img to icon --> <xsl:template match="img[starts-with(@class, 'material-icons')]"> <i class="{@class}"><xsl:value-of select="@alt" /></i> </xsl:template>So you expect web authors to remember all these steps?
This solution works great if you follow these steps and know the short code for each icon. Expecting web authors to know this and go through the process each time is not reasonable. This is where the Material Icons Gadget comes in! With a side bar gadget, the user can select their icon, size and color from dropdowns and then insert the
code into the editor. The only downside is that when they are in edit mode they see the placeholder image.
Install
Take a look at the Readme file at the root of the GitHub repository for detailed instructions. CSS for the icon set, colors and sizes needs to be added. The XSL transformation needs to be applied and the gadget needs to be installed.
Final Thoughts
Google’s icon set was used here but any icon set could work. In fact the gadget could be expanded to provide multiple icon sets for users. If you feel like contributing, please do on Github!
Create an A-Z directory with XSL
In the previous tutorial, data was pulled into a page using OU Campus’ Tags. In this tutorial, data will be pulled in based on a folder location, sorted and then displayed.
View a simplified but workable code on GitHub.
Get All the Journal Data Files and Organize them by File Name
In case you haven’t read the previous tutorial, Data files are standalone .pcf files that are similar to a database entry. Each file contains the information for a single journal entry: Journal Name, Description, URL and a dropdown for Active, which will tell the XSL if the data file should be pulled in or not.
All the data files exist in one folder and XSL can grab those files and parse the data. The XSL needs to get those file names and sort them alphabetically:
Two variables are setup, the first tells the XSL where to look for our data files. In this demo, the value is hard coded in. The second variable is a variation of the first but for OU Campus includes the root and the site. These are separated out into individual variables because
$data-folderis used later when tags are pulled in.Next a variable of
$sortedcopyis defined by looping through all of the files in the directory. This is stored as a variable because to use the functionality ofpreceding-siblingis used in the next code snippet and this and<xsl:sort />can not be used in the same loop.Loop Through the Sorted Data Files
The following for-each statement is a bit longer, and could be separated out into multiple functions, but then the parameters would need to be passed to each function. This decision would depend on how much of the code is reused. For this tutorial, it is a single loop and is split up into three separate code snippets below:
Each data file in the
$sortedcopyvariable is looped on line 2. The variables are setup for the file name (line 5) and then the content of that data file is stored into the second variable (line 6).Next the page type is checked to make sure it is a library-database file. In many OU instances, a
_props.pcffile may exist that should not be pulled in.Does the Journal Need an A-Z Heading?
On the A-Z Listing page, the journals should be listed out in alphabetical pagination. If the journal’s title starts with a new letter then a heading for that label should be displayed. XSL functions below have been separated out into individual lines for better readability, but in practice it could be on one line.
Current Letter
Line 3 gets the first character of the current title using the XSL function
substring(string, starting integer, ending integer). Then on Line 2 it converts it to uppercase with the XSL functionupper-case(string). If the character is not converted to a uppercase, the lowercase version would be treated as a different letter.Previous Letter
This is my favorite part of the code. To get the previous starting letter the XSL function
preceding-sibling()can be used. Line 10 should be true unless this is the first node in the data set. If this is not checked, the first item will fail and an XSL error will be thrown.The first part of line 13:
doc(concat($data-location,'/', preceding-sibling::file[1]))starts by selecting the previous data file, then gets the database-name:/document/ouc:properties/parameter[@name='database-name']. Similar to the current letter’s code it selects just the first letter and then capitalizes it. Now the current letter and previous letter are both stored as variables.Need a Heading?
On line 20 the current letter is compared against the previous letter and if it isn’t the same, or if it is the first letter, a heading with that letter is displayed.
Display the Journal’s Information
The journals now need to be displayed. If there are a lot of journals, then the description could be hidden. Or in our final version of the UNC Libraries version accordions are used.
Lines 2 – 4 display the name, description and create a link for the database.
Lines 7-9 call a template that will get the tags for the page. Here the $page-path parameter, that was defined in the first code example, is used again. This template is described next.
Finally, lines 14 and 17 close open tags from the code snippet above.
List the Subjects Associated with the Journal
Below the link to the journal database, there will be a list of the subject tags that this journal is associated with. This will help with usability for the end users who may not be aware that the categories exist. These subject tags will link to the subject page so the user can explore more databases.
$page-pathis passed to the function and on line 5, the tags associated with the data file are returned as the variable $page-tags. On line 6 the tags are looped and lines 8-10 the tag is passed to an additional template to display the tag.Display the Tag and Link to the Subject Page
Bootstrap and Foundation have a class for tags called .label. This will be wrapped with an anchor to link to that subject page.
The variable on line 6 removes the prefix of ‘library-database’ which was the naming convention used in the previous blog post. On line 9 an anchor is used to link to that subject page. This only works if the tag name and the subject file name are exactly the same. If the files are in a sub folder, that should be defined here.
Line 12 replaces the underscore in a tag with a dash. This naming convention allows for a tag with multiple words. As an example: library-database-hispanic_studies gets converted into hispanic studies but keeps the URL of hispanic_studies.aspx.
Thanks for Reading
- Previous Posts
- Page: 4 of 5
- More Posts