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 Event with CKEditor googletracker, assigning tag

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:

wordpressSEOweb designDrupalWeb DevelopmentADAHTML5productionresponsive designcompliancesecurityCSSPhotoshopdesignTestingFlashtoolsproduction tipsgoogletypographyGoogle Analyticsmarketingbeta testingautomationharness-bbrowserSSLE-commerceiOSweb standardsplug-infirefoxQAwebsite buildingapp developmentweb preflighttechnologiesJavaScriptthemesintegrationsAdobe MuseAPImobile websiteAppleweb imagesite speedfontsquality controlMicrosoftmodulesOpenSSLserver securityIE8Long TailabletWebOSAndroidtabletsmobile devicesclientcommunicationimage size cloudtechnologyPDFresponsive statebreakpointimage compressionInteraction Metricsinstant video playback solutionvideo sizeInternet Explorer 83rd partyAdobe Edge ReflowawardsoftwarehostBacklinksAdvertisingapp lifespanmobile app challengeweb colorsgammacodecvideo playbackJSONRGBWindows XP LinkedInParfaitvertical layoutiPad screen templatehorizontal layoutcustom fontsweb-fontsnon-Flash animationHTML5 animationEdge ReflowAdobe Edgeoptimizeddevelopmentresponsive buildAdobeCMS for FlashHTML4interactive banner adsWordpress pluginsconvertingfailseleniumW3Cmicrosoft’s project natalsony playstationnintendo wiiaugmented reality3D views of modelsDetroit Diesel CorporationMercedes-BenziTunesfragmented technology landscapeUDIDInDesign to Photoshop conversionExporting from InDesign to Photoshophtmlweb design softwareweb compatibilitynDesignRIAsAdobe AiroutsourcingFacebookdudInDesignformatvideowireframeCMSwebsiteiPhonebrochurewareweb development awardmp4web awardweb developerssidney garberhigh fidelityupdatevulnerabilityCKEditorCVE-2014-0224integrationprogramming awardrevolutionary softwarewebmonline subscriptionInDesign to HTMLFoundationBootstrapICANNgTLDscustom domain suffixesPhotoshop Layer compsdesign best practicesogvHeartbeatcollaborateconceptOSSrelationship marketingCSS3Ps. and CSS HatProject ParfaitAppleScriptecommerceVideos and animations

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...