.png?width=667&height=667&ext=.png)
How to Connect Disqus Comments to Kentico EMS Activity Tracking - Part 2
Introduction
My team and I use the Disqus blog comment system on the blogs that we have created for BizStream.com, my site here at Mcbeev.com, and many other of our client projects. Disqus is a great system for handling blog post comments. It makes the moderating, anti-spam, and community building aspect of running a blog a breeze. I could not recommend it more.
All of those aforementioned blogs are of course powered by my favorite ASP.Net based CMS, Kentico. You might be wondering why, for those very same sites, we do not use the built-in Blog Comment View webpart that comes with Kentico. The truth is that this one area of Kentico is a bit outdated in terms of HTML markup and overall functionality. These deficiencies make styling the webpart a challenge, to meet a good responsive design, plus the anti-spam system that Kentico has is ok, but not great. For those reasons we now use Disqus.
One thing that has always bugged me about using Disqus for comments is that the service is all purely client side / JavaScript based, and therefore I lose a little bit of insight into exactly who is commenting on my blog posts from a Kentico Contact Management and Activity Tracking perspective.
My goal today is to show you how to fix that and trap those client side events that happen via JavaScript and log them in the built in Kentico Activity Tracking database and UI.
You are reading part 2 of this mini blog post series on How to Connect Disqus Comments to Kentico EMS Activity Tracking.
Kentico Configuration
In part one of the series I showed you what you need to do from the code side of the house. It really should not have been too bad, but make sure you have that compiling correctly and working before you continue the walk through. From here on out we are going to focus on the Kentico database configuration needed to complete the process. The Kentico configuration required involves connecting up the Disqus JavaScript that embeds the disqus thread on your page, and attaching a new client side event.
Connect the JavaScript
First we need to go enter the code from Disqus. You should go grab yours from the browser tab that you left open in part one of the series. Add a Javascript webpart to any page template on site, preferrably the template that has your blog posts. In this simple example I am just going to go with In-line Javascript that starts at the end of the body tag as a Startup script. Remember the best practice would be create a file in the Javascript Module and reference it with this webpart so it could be properly minified and compressed/bundled.
In my example here I am seperating out the script from the div tag that Disqus provides so I can place the comments in the DOM whereever I would like. So place just the inside parts of the script in the In-line script property of the webpart, click Include jQuery, and click Generate Script tags too. Now you just need to click Apply or Save & Close to save your changes and see if everything works.
ProTip: Don’t forget to Disable View State on this webpart! There is no reason we need to use View State for a control that doesn’t hold postback value right ?
Wire Up Event Tracking
Next go back and enter the event tracking code from Disqus’ developer page. It is a simple function that you place before the main code executes from Disqus. The key for the event tracking is to add the disqus_config method in your script. The jQuery post call inside of that method is where the page will POST the client side event to the WebApiController that we created in part one. This is the magic that makes it all work.
function disqus_config() { this.callbacks.onNewComment = [function (comment) { //Let Kentico know we had comment activity jQuery.post("http://localhost:1469/api/logdisquscomment", { '': comment.id }); }]; }
When everything is set your script should look like the screen shot below. Also one thing to note about the post call above. Notice that the parameter is an object that has some funky syntax ? The best possible explanation for this is again at Dave Ward's blog post on WebApi and jQuery. Trust me it did not work until I followed his advise. Obviously you also would want to replace the localhost URL with your websites URL as well.
Add Disqus Placeholder DOM Element
Next add in the one placeholder div that Disqus requires, . Add a Static HTML webpart to your page template and paste the div tag from Disqus in there.
If everything worked you should now have Disqus comments on your site like so.
Test the Solution
It is a pretty simple solution to test. Just load up your page, not in Preview mode, and make a new comment. After a short time you should see your Activity show up in the Activity Log under Contact Management. The detail of the event should look like this:
Conclusion
There you have it. You now have opened the possibility to do Lead Scoring, Segmentation, Content Personalization or even Newsletter marketing to website visitors who engage with your site and create new blog post comments. By the way, did I mention Kentico 8.1 rocks? It sure does, read my First Impressions of Kentico 8.1 to find out what you are missing if you have not seen the new features. Hint: Personas are worth it.
It is also worth mentioning that this same approach can be used to capture more client side activity in the Kentico Activity Tracking system such as Facebook likes and Tweets. I hope you found this detailed walkthrough useful. Please let me know your thoughts in the comments below.
