Blog

Adding Google Analytics attributes to links using CKEditor

Apr 9th, 2015 by Max Tokman

We recently ran into an issue with commonly used Google Analytics plugin for CKEditor, called appropriately googletracker.  While that plugin allows adding attributes to links in content, the issue we encountered is that subsequent content editing removes all inserted onclick attributes. 

To address this issue, we made slight modifications googletracker plugin, available for download here and now it uses data-tracking attribute which is not removed by CKEditor.

Google Event Page Tracking

Google Analytics Tracking Real Time

Next we added JavaScript code to front end which replaces data-tracking to onlick and generates additional meaningful information for Google Analytics, such as link name (using link's text), category and webpage address.

Here is a sample code we used

var pageUrlArr = window.location.href.split('/');
$('a').each(function () {
    if ($(this).attr('data-tracking')){
        var tracking;
        //console.log($(this));
         var page;
        if (pageUrlArr[pageUrlArr.length-1]) {
            page = pageUrlArr[pageUrlArr.length-1];
        }else {
            page = 'home';
        }
        tracking = '"' + $(this).text() + '"'+ ' link on "' +page+ '" page.';
        tracking = tracking.replace(/&/g,"_");
 
        if ($(this).data('tracking') == '_trackEvent') {
            $(this)
                .removeAttr('data-tracking')
                // .attr("onclick", "_gaq.push(['_trackEvent', 'page_view', 'click', '" + tracking + "']);");
                .attr("onclick", "ga('send', 'event', 'Track event from CKEditor', 'click', '" + tracking + "',{'nonInteraction': 1});");
        } else {
            $(this)
                .removeAttr('data-tracking')
                // .attr("onclick", "_gaq.push(['_trackPageview', '" + tracking + "']);");
                .attr("onclick", "ga('send', 'pageview', 'Track event from CKEditor', 'click', '" + tracking + "',{'nonInteraction': 1});");
        }
    }
});


After adding tags to CKEdtior content and custom JavaScript to front end, we can see our tracking on Google Analytics, Real Time > Events screen.

Google Analytics Tracking Real Time Event with CKEditor

Google Analytics Tracking Real Time Event with CKEditor, Specific Link

Categories:

wordpressSEOADAWeb Developmentweb designDrupalproductionHTML5responsive designcompliancesecurityCSSdesignTestingPhotoshopproduction tipsFlashtechnologiestoolsgoogletypographyGoogle Analyticsmarketingautomationharness-bbeta testingbrowserSSLE-commercethemesweb standardsplug-inQAwebsite buildingapp developmentweb preflightfirefoxJavaScriptquality controlintegrationsAdobe MuseAPImobile websiteAppleweb imagesite speedfontsiOSMicrosoftmodulesOpenSSLserver securityIE8Androidtabletsmobile devicesclientcommunicationimage compressionimage size cloudPDFresponsive statebreakpointInternet Explorer 8Windows XP FacebooktechnologyWebOSLong TailInteraction MetricsLinkedInhostsoftwareAdvertisingJSONapp lifespanabletmobile app challengeRGBgammacodecvideo sizeinstant video playback solutionBacklinksweb colorsvideo playbackintegration3rd partyParfaitvertical layoutiPad screen templatehorizontal layoutcustom fontsweb-fontsnon-Flash animationHTML5 animationEdge ReflowAdobe Edgeoptimizeddevelopmentresponsive buildAdobeCMS for FlashHTML4interactive banner adsWordpress pluginsconvertingfailseleniumW3Csony playstationnintendo wiiaugmented realityVideos and animations3D views of modelsDetroit Diesel CorporationMercedes-BenziTunesfragmented technology landscapeUDIDInDesign to Photoshop conversionExporting from InDesign to Photoshophtmlweb design softwareweb compatibilitynDesignRIAsAdobe AiroutsourcingCVE-2014-0224dudInDesignformatvideowireframeCMSwebsiteiPhonebrochurewareweb development awardmp4web awardweb developerssidney garberhigh fidelityawardupdatevulnerabilityCKEditorAdobe Edge Reflowprogramming awardrevolutionary softwarewebmonline subscriptionInDesign to HTMLFoundationBootstrapICANNgTLDscustom domain suffixesPhotoshop Layer compsdesign best practicesogvHeartbeatcollaborateconceptOSSrelationship marketingCSS3Ps. and CSS HatProject ParfaitAppleScriptecommercemicrosoft’s project natal

Sep 23rd, 2015 by Max Tokman

Released earlier this week, Firefox 41 uses different algorithm for processing DIV rotations via graphics/video card. That affects CSS “ transform” property by creating screen artifacts or freezing browser altogether. Many an award winning website with fancy CSS animations will be humbled by this unexpected...

Mar 31st, 2015 by Max Tokman

’Tis the time to be excited as Google plans to role out a major algorithm update on April 21, 2015 that will improve rank of mobile-friendly websites and mercilessly punish desktop-only detractors. How will it impact the world around us? 1. This is not the first, nor is it the last Google algorithm update.&nbs...