So I got an invite to preview MeasureMap the other day, and I wanted to get it up and running on my Typo blog. Tonight I finally got it working, and just wanted to record for posterity how I did it.

My strategy here is actually a combination of two different methods I found for doing this, the first from Dennis Lamotte and the second from Kevin Clark. Both of them were workable, so I combined Dennis’ use of a partial with Kevin’s actual experience (Dennis isn’t currently using Typo), and I think came out with something even better. Do check their instructions out too, though, especially if you have any difficulties with mine.

Integrating MeasureMap in to Typo

First of all, I’m assuming you’re running at least Typo 2.5.8. If not, you’ll need to upgrade – I did this before adding MeasureMap and process was painless. At this point I’ll also note that we’re going to be editing your theme, so you might want to create a backup copy.

Next up, we need to add a new partial that will do our MeasureMap heavy lifting, so put the following in the new file views/shared/_measuremap.rhtml (all the paths from here on out are from the root of your theme directory):

1<tt>
</tt>2<tt>
</tt>3<tt>
</tt>4<tt>
</tt>5<tt>
</tt>
 
<span class="ta">&lt;script</span> <span class="an">type</span>=<span class="s"><span class="dl">&quot;</span><span class="k">text/javascript</span><span class="dl">&quot;</span></span><span class="ta">&gt;</span><span class="c">&lt;!--<tt>
</tt>if(!mmposts){var mmposts=[];}mmposts[mmposts.length]=&quot;&lt;%= @article.id %&gt;&quot;;<tt>
</tt>//--&gt;</span><span class="ta">&lt;/script&gt;</span><span class="c">&lt;!-- mmp mmid:&lt;%= @article.id %&gt; mmdate:&lt;%= @article.created_at.strftime('%Y%m%d%H%M%S') %&gt; mmurl:&lt;%=h article_url(@article) %&gt; mmtitle:&lt;%=h @article.title %&gt; --&gt;</span><span class="c">&lt;% @article.comments.each do |comment| %&gt;</span><span class="ta">&lt;script</span> <span class="an">type</span>=<span class="s"><span class="dl">&quot;</span><span class="k">text/javascript</span><span class="dl">&quot;</span></span><span class="ta">&gt;</span><span class="c">&lt;!--<tt>
</tt>if(!mmcomments){var mmcomments=[];}mmcomments[mmcomments.length]=&quot;&lt;%= comment.id %&gt;&quot;;<tt>
</tt>//--&gt;</span><span class="ta">&lt;/script&gt;</span><span class="c">&lt;!-- mmc mmid:&lt;%= comment.id %&gt; mmdate:&lt;%= comment.created_at.strftime('%Y%m%d%H%M%S') %&gt; mmauthor:&lt;%= h(comment.author) %&gt; --&gt;</span><span class="c">&lt;% end -%&gt;</span>

Only one more thing to do – add two lines in layouts/default.rhtml, right above the closing &lt;/body&gt; tag:

<tt>
</tt>
 
<span class="ta">&lt;script</span> <span class="an">type</span>=<span class="s"><span class="dl">&quot;</span><span class="k">text/javascript</span><span class="dl">&quot;</span></span> <span class="an">src</span>=<span class="s"><span class="dl">&quot;</span><span class="k">http://tracker.measuremap.com/a/YOUR_KEY_HERE</span><span class="dl">&quot;</span></span><span class="ta">&gt;</span><span class="ta">&lt;/script&gt;</span><span class="c">&lt;%= render_partial &quot;shared/measuremap&quot; if @article %&gt;</span>

Make sure to replace the YOUR_KEY_HERE with your MeasureMap key (it’s the number in the url in the first text area on that page) as things won’t work right otherwise.

Ta-da! Now you’re all set to check out MeasureMap! Do let me know in the comments if you have any difficulties getting it to work or if anything needs clarifying.