Skip to content

Latest commit

 

History

History
197 lines (135 loc) · 6.96 KB

README.md

File metadata and controls

197 lines (135 loc) · 6.96 KB
Raw

UTM and Referral Cookie

(utm_referral-cookie.js)

Get traffic referral sources or utm_params and save it to cookies (for first time visit and the last one)

 

Demo: https://arturmamedov.github.io/utm_referral-cookie/index.html

Demo with specified params: index.html?utm_source=GitHub&utm_medium=affiliate&utm_campaign=user123

 

Installation

Bower
bower install utm_referral-cookie --save

Insert into page, and configure

// Inside file configure this thing:

// * Required
$hostname = 'arturmamedov.github.io', // your-hostname-goes.here

// [] Optional
// Params you want to save in cookie
$cookie_params = ['source', 'medium', 'campaign', 'term', 'content'];

// List of search engines to track like organic referral
var $search_engines = [['bing', 'q'], ['google', 'q'], ['yahoo', 'q'], ['baidu', 'q'] ...];

// List of socials to track like social referral
var $socials = [['facebook'], ['twitter'], ['instagram'], ...];
<!-- And simply add to page -->
<script src="utm_referral-cookie.js"></script>

Create one or two cookies with referral sources of user that visit the website

Cookie name Purpose
utm_referral the first visit of user, remain the same at every successive visit
utm_referral_returned the last user visit, change every time the user visit website (when referral is on a different domain or utm_params are set)

Now it also add automatically to a hidden input if defined

So you can not care about how to print data, simply create input with id #utm_referral-input

<input name="utm_referral-cookie" id="utm_referral-input" type="hidden" value="" />

<!-- example: value="Referral 1: google (cpc | gclid) - Referral 2: direct" -->
For read cookies you can use:

at the bottom of this doc there a more practic code yet ready for use

// this return the cookie as it is (so you must decode it fo read)
var session = crumbleCookie('utm_referral'), // encoded cookie with all params
    session2 = crumbleCookie('utm_referral_returned');

// First time session (only the first time visit)
if (typeof session != 'undefined') {
    // use decodeURIComponent(...) for get decoded full cookie string 
    document.getElementById('utm_referral').innerHTML = decodeURIComponent(session);
    
    // use readLogic('cookie_name') for retrieve object with configured $cookie_params
    console.log(readLogic('utm_referral')); 
    
    // use cookieToString(...) for format to string
    console.log(cookieToString('utm_referral')); // formatted string "source (medium | campaign | term: term | content: content)"
}
// Last time session (ever the last time visit)
if (typeof session2 != 'undefined') {
    // use decodeURIComponent(...) for get decoded full cookie string
    document.getElementById('utm_referral_returned').innerHTML = decodeURIComponent(session2);
    
    // use readLogic('cookie_name') for retrieve object with configured $cookie_params
    console.log(readLogic('utm_referral_returned')); // object {source, medium, campaign, term, content}
    
    // use cookieToString(...) for format to string
    console.log(cookieToString('utm_referral_returned')); // formatted string "source (medium | campaign | term: term | content: content)"
}
Formats with cookieToString():

  • direct

  • someweb.site (referral)

  • google (cpc | gclid)

  • google (cpc | CampaignName | term: if, set | content: if set)

  • newsletter (email | campaignName | term: uno, due, tre | content: content)

  • google (organic | term: (not provided))

  • arianna.libero.it (organic | term: query of search)

  • bing.com (organic | term: query of search)

  • also: yahoo, yandex, baidu, ask, virgilio (organic) you can configure $search_engines

  • facebook (social)

  • instagram (social)

  • also: twitter, flickr, tumblr, vimeo, youtube, pinterest social you can configure $socials

Example: You can use it in a hidden input in forms for submit info about referrals

Script doesn't track the same domain referral page's.

So if you want some link to be tracked as referral for save it, you need to define utm_ parameters

<a href="index.html?utm_source=internal&utm_medium=website&utm_campaign=page">URL with utm_ params</a>

<!-- Will be: internal (website | page) -->

General code for get booth cookies

if it set and if the script is present on page

// JavaScript output:   Referral: google (organic | direct) Referral 2: facebook (cpc | your_campaign) 

// Add utm_referral to mail - depends on https://github.com/arturmamedov/utm_referral-cookie
if (typeof cookieToString != 'undefined' && typeof cookieToString('utm_referral') != 'undefined') {
    var utm_referral_returned = '';
    if (typeof cookieToString('utm_referral_returned') != 'undefined') {
        utm_referral_returned = ' - Referral 2: ' + cookieToString('utm_referral_returned');
    }
    var utm_referral = 'Referral: ' + cookieToString('utm_referral') + utm_referral_returned;

    var with_booth_cookies = utm_referral; // or only one, it depend what cookies are yet set
}
// PHP output: Referral: google (organic | direct) 
// 		Referral 2: direct  
// in HTML: <p><span class="lbl">Referral: </span><b class="value">google (organic | direct)</b><br>Referral 2: direct</p

// utm_referral cookie
if ($_COOKIE['utm_referral']) {
    // utm_referral_returned cookie
    $utm_referral_returned = '';
    if ($_COOKIE['utm_referral_returned']) {
        // format cookie that are an url
        $frmt = [];
        parse_str($_COOKIE['utm_referral_returned'], $frmt);
        $utm_referral_returned = "<br>Referral 2: {$frmt['source']} ({$frmt['medium']}";
        $utm_referral_returned .= ($frmt['campaign']) ? " | {$frmt['campaign']})" : ")"; // add campaign name and/or close bracket
        $utm_referral_returned = ($frmt['source'] == 'direct') ? '<br>Referral 2: direct' : $utm_referral_returned; // override if direct only
    }

    // create formatted output
    $frmt = [];
    parse_str($_COOKIE['utm_referral'], $frmt);
    $formatted = "{$frmt['source']} ({$frmt['medium']}";
    $formatted .= ($frmt['campaign']) ? " | {$frmt['campaign']})" : ")"; // add campaign name and/or close bracket
    $formatted = ($frmt['source'] == 'direct') ? 'direct' : $formatted; // override if direct only

    $message .= '<p>';
    $message .= '<span class="lbl">Referral: </span>';
    $message .= '<b class="value">'.$formatted.'</b>'.$utm_referral_returned;
    $message .= '</p>';
}

return $message;
}

CREDITS:

  • Buonsito.it WebAgency // Marketing // Site // SEO // Consulting //
  • FirstDigital Analytics, Conversion, Performance Media, SEO