My first Ruby on Rails Project

I spent the week between Christmas and New Year’s building my first Rails app with a lot of help from the simply amazing Rails Tutorial. I’m a big fan of Michael Hartl’s approach to technical sophistication (googling stuff, being comfortable with not understanding everything you read in the code, and just being resourceful enough to get stuff done).

It’s something I’ve always had more or less but never considered a skill and it took me back to my early days on the web of hacking around with WordPress blogs and figuring out what was going on despite not knowing PHP.

The course took me about a week to go through and around chapter five I veered off a bit from the sample app, which is basically a bare bones Twitter clone, and used the tutorial to build out my own app, onfire.co, a website for tracking your progress as a writer (hey, solve a problem you have, right?).

I found that while I did get a LOT out of the tutorial, it was a help to have already gone through most of the Ruby lesson on CodeCademy so that when I got to the chapter on Rails-flavored Ruby, I learned more because it was reinforcing knowledge that was there but not fully actualized.

But the real learning happened when I started to take the basic structure of what the tutorial had given me and tried to add some features of my own, like a button on the user profile page to update their streak.

It’s a simple feature. Just a form that sends an attribute to the controller, which updates the database record for the user. But it took me like 6 hours to figure out, which seems silly to me now because I know how to do it.

I think that the hardest thing is that while, yes, there is a lot of great information out there on StackOverflow and other places, a lot of times you kind of have to sidestep your way into someone else’s question or problem, figure out if it applies to your situation, and then try the solution on your own problem. In some cases you have to cobble together 3 or 4 tidbits you pick up from various places. And it can be frustrating when someone responds with “just do this” and a line of code, but doesn’t give enough context as to where the code should go (controller or model?).

The way I really solved it though was by realizing that I didn’t have a firm enough grasp on the fundamentals, specifically how routing works. So I read through the Railsguide page on routing and that clarified a lot and gave me a new approach to the problem.

And when it worked, man was that a good feeling. It just clicked and now it seems silly to me that I even had a problem with it. And while I understand most of what was covered in the tutorial, it’s a passive understanding — I won’t really understand it until I have to code it myself.

Anyway, check out the app. It’s a tool for writers to track your daily writing streak, an approach to writing that was popularized by Jerry Seinfeld, who used a wall calendar to make sure that he wrote every day when he was starting out.

I’m going to spend a few more weeks adding features and trying to get more than a handful of users and then move on to something more challenging.

(coding | learning to code)

Google Tag Manager and Turbolinks in Ruby on Rails

I’m pretty new to Ruby on Rails (and coding in general), but I finally got my first little app up and running and so naturally I wanted to add Google Tag Manager to it so I could track traffic to it.

Turns out that the Turbolinks gem doesn’t play well with GTM. I googled around for it and everyone was pointing to this article, which I was going to try as a last resort because I’m just not a fan of virtual pageviews and it just seems like their should be a way to get Turbolinks to fire JS when you tell it to.

I read the Turbolinks docs and found this:

Running JavaScript When a Page Loads

You may be used to installing JavaScript behavior in response to the window.onload, DOMContentLoaded, or jQuery ready events. With Turbolinks, these events will fire only in response to the initial page load—not after any subsequent page changes.

In many cases, you can simply adjust your code to listen for the turbolinks:load event, which fires once on the initial page load and again after every Turbolinks visit.

document.addEventListener("turbolinks:load", function() {
// ...
})

I used that snippet to modify my GTM <script> tag so it looks like this:


 <script>
 document.addEventListener("turbolinks:load", function() {

(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','dataLayer','GTM-XXXXXXX');

console.log("GTM fired");
 })
 </script>

I put in the console.log("GTM fired"); so I could see in the console when it was firing. When I debugged it, it fired once and only once on each page load and my events are firing correctly too.

Like I said, I’m new to Rails, so YMMV. Leave a comment if works or I’m breaking something without realizing it.

(analytics | coding)

Extracting URL strings into Google Tag Manager

I’ve been teaching myself JavaScript in the last few weeks to up my GTM implementation skills, so I thought I’d share some examples of how I’ve used it.

This one is for pulling out the sub-directory from the URL to use in an event. This came in handy for me when implementing Mixpanel a couple months ago for a client, and is especially helpful for sites that have a solid directory structure. For instance, the shoes page on an eCommerce clothing site might look something like this:

example.com/men/shoes/sneakers/the-new-lebrons/

If you want to create an event for all of the category pages, it’s helpful to be able to pull out “sneakers” and use it in a property so that you can compare it to events with the property of “dress-shoes” and “sandals”.

I created a Custom JavaScript variable in GTM and here’s the code I used:

function () {
 var value={{Page Path}}.split("/");
 return value[1];
 }

This pulls out the 2nd sub-directory (‘shoes’ in this case) and stores it in a GTM variable. You can change which directory level gets pulled by changing the [1] to [0] or [2] or whatever (the counting always starts with 0).

Here’s a screen shot of the custom variable in GTM:

 

(analytics | coding)





<< | >>