SegmentIO와 관련된 문제 analytics.js의 오픈 소스 버전 설정

Question

SegmentIO에서 오픈 소스 버전으로 전환 중입니다. 이 blog post을 가이드로 사용했지만 추적하지는 않습니다. 이 코드의 문제는 누구나 볼 수 있습니다.

window.analytics || (window.analytics = []); 
    window.analytics.methods = ['identify', 'track', 'trackLink', 'trackForm', 'trackClick', 'trackSubmit', 'page', 'pageview', 'ab', 'alias', 'ready', 'group', 'on', 'once', 'off']; 
    window.analytics.factory = function (method) { 
    return function() { 
     var args = Array.prototype.slice.call(arguments); 
     args.unshift(method); 
     window.analytics.push(args); 
     return window.analytics; 
    }; 
    }; 
for (var i = 0; i < window.analytics.methods.length; i++) { 
    var method = window.analytics.methods[i]; 
    window.analytics[method] = window.analytics.factory(method); 
} 

analytics.load = function(callback) { 
    var script = document.createElement('script'); 
    script.async = true; 
    script.type = 'text/javascript'; 
script.src = 'https://assets.gonegreenstore.com.s3.amazonaws.com/js/analytics.min.js'; 
    script.addEventListener('load', function (e) { 
    if(typeof callback === 'function') { 
     callback(e); 
    } 
    }, false); 
    var firstScript = document.getElementsByTagName('script')[0]; 
    firstScript.parentNode.insertBefore(script, firstScript); 
}; 

// Continues from above 
analytics.load(function() { 
    analytics.initialize({ 
    'Google Analytics': { 
     trackingId: 'UA-40148609-3' 
    }   
    }); 
}); 

analytics.page(); 

Answer 1

블로그의 Ok 코드가 잘못되었거나 오래된 것입니다. 오픈 소스 버전 async를 실제로로드 할 수 없다는 사실이 드러났습니다. 나는 그것이 작동하도록 코드를 수정했다.

요점 : https://gist.github.com/cyberwombat/11008970

// Create a dummy analytics object until real loaded 
window.analytics || (window.analytics = []); 
window.analytics.methods = ['identify', 'track', 'trackLink', 'trackForm', 'trackClick', 'trackSubmit', 'page', 'pageview', 'ab', 'alias', 'ready', 'group', 'on', 'once', 'off']; 
window.analytics.factory = function(method) { 
    return function() { 
    var args = Array.prototype.slice.call(arguments); 
    args.unshift(method); 
    window.analytics.push(args); 
    return window.analytics; 
    }; 
}; 
for (var i = 0; i < window.analytics.methods.length; i++) { 
    var method = window.analytics.methods[i]; 
    window.analytics[method] = window.analytics.factory(method); 
} 

// Load analytics async 
analytics.load = function(callback) { 
    if (document.getElementById('analytics-js')) return; 

    // We make a copy if our dummy object 
    window.a = window.analytics; 
    var script = document.createElement('script'); 
    script.async = true; 
    script.id = 'analytics-js'; 
    script.type = 'text/javascript'; 
    script.src = ('https:' === document.location.protocol ? 'https://' : 'http://') + 'path/to/your/analytics.min.js'; 
    script.addEventListener('load', function(e) { 
    if (typeof callback === 'function') { 
     callback(e); 
    } 
    }, false); 
    var first = document.getElementsByTagName('script')[0]; 
    first.parentNode.insertBefore(script, first); 
}; 

analytics.load(function() { 

    // On load init our integrations 
    analytics.initialize({ 
    'Google Analytics': { 
     trackingId: 'UA-XXXXXX-1' 
    } 
    }); 
    // Now copy whatever we applied to our dummy object to the real analytics 
    while (window.a.length > 0) { 
    var item = window.a.shift(); 
    var method = item.shift(); 
    if (analytics[method]) analytics[method].apply(analytics, item); 
    } 
}); 

analytics.page(); 

Answer 2

당신은 다음과 같이 사용할 수 있습니다 :

npm install --save analytics.js

import analytics from 'analytics.js'; 

analytics.initialize({ 
    'Google Analytics': { 
     trackingId: 'UA-XXXXXX-1', 
    } 
}); 
analytics.page();