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 designWeb DevelopmentHTML5productionresponsive designDrupaldesignCSSPhotoshopsecurityADAgooglebeta testingautomationharness-btoolsGoogle AnalyticsTestingmarketingFlashproduction tipstypographyAdobe Museweb imagesite speedintegrationswebsite buildingtechnologiesJavaScriptfirefoxbrowsercomplianceserver securityquality controlfontsthemesMicrosoftmodulesApplemobile websiteapp developmentplug-inAPIweb standardsweb preflightiOSInDesignE-commerceOpenSSLSSLIE8JSONQAmobile devicestabletsAdobe AirRIAsInteraction MetricsAdvertisingLong TailExporting from InDesign to PhotoshopInDesign to Photoshop conversionresponsive buildWordpress pluginshorizontal layoutBacklinksAdobegTLDscustom domain suffixesdevelopmentwireframeaugmented realityweb awardprogramming awardPhotoshop Layer compsdesign best practicesmobile app challengeapp lifespannon-Flash animationHTML5 animationAdobe EdgeiPad screen templateICANNweb development awardvertical layoutvideo playbackfaildudrevolutionary softwareInDesign to HTMLcommunicationclienthtmlimage sizesoftwareimage compressionweb compatibilitybreakpointresponsive statePDFAdobe Edge ReflowconvertingEdge ReflowParfaitweb design softwareogvcloudawardhostseleniumFoundationBootstrapCKEditor3rd partyAppleScriptecommercetechnologycollaborateupdatevulnerabilityCMSwebsiteiPhoneCSS3Ps. and CSS HatProject Parfaithigh fidelityconceptcodecwebmformatweb developerssidney garberVideos and animations3D views of modelsDetroit Diesel CorporationMercedes-BenziTunescustom fontsHTML4web-fontsRGBweb colorsrelationship marketingOSSW3Cfragmented technology landscapeAndroidvideo sizegammamp4microsoft’s project natalUDIDvideoCVE-2014-0224integrationLinkedInFacebookWindows XPInternet Explorer 8interactive banner adsbrochurewaresony playstationinstant video playback solutionHeartbeatonline subscriptionWebOSabletCMS for Flashoptimizednintendo wiioutsourcing
Google algorithm update on April 21, 2015 will rank mobile-friendly websites WAY higher than all those other websites

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

New Firefox 41 for Mac OS thinks your video card sucks

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