Использование асинхронного кода Google Analytics из внешнего файла JS

Я пытаюсь добавить на веб-сайт асинхронную версию кода отслеживания Google Analytics.

Я хотел бы сохранить JavaScript в отдельном файле и вызывать его оттуда.

Вот что у меня сейчас есть в моем файле .js:

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}

function loadtracking() {
    var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
        _gaq.push(['_trackPageview']);

        (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
}

addLoadEvent(loadtracking);

И вот что у меня есть в теге <head> на моей главной странице:

<script type="text/javascript" src="js/google-analytics.js" ></script>

Однако, очевидно, есть проблема, так как через несколько дней я не получаю статистику!

Есть идеи, что мне нужно изменить?

Спасибо, Нил

РЕДАКТИРОВАТЬ: Хорошо ... После некоторых отзывов ниже я собираюсь добавить новое текущее содержимое моего файла .js. Я буду обновлять его, чтобы, если / когда это будет решено, это, надеюсь, поможет другим людям, пытающимся делать аналогичные вещи.

var _gaq = _gaq || [];

function loadtracking() {
        window._gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
        window._gaq.push(['_trackPageview']);

        (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
}

loadtracking();

javascript asynchronous google-analytics unobtrusive-javascript
person NeilD    schedule 16.07.2010    source источник
comment
Это случилось, чтобы решить вашу проблему? Я сталкиваюсь с той же проблемой, хотя мой var _gaq определен глобально в файле .js. Спасибо.   -  person Alec Sanger    schedule 28.06.2011
comment
Насколько я помню, да. Честно говоря, для большинства приложений я бы посоветовал просто следовать приведенному ниже совету и помещать код прямо в документ ... Для этого конкретного проекта требовалось, чтобы он находился в отдельном файле, который может быть или не быть дело с тобой.   -  person NeilD    schedule 28.06.2011
comment
Я читал много похожих тем на SO и видел, как люди говорили, что с этим нет никаких проблем, кроме возможной небольшой задержки при загрузке скрипта, в то время как другие говорили, что это разрушит мою жизнь и приговорит меня к аду. Мне нужно, чтобы он передавал значения diff в зависимости от просматриваемой страницы, и я хочу сохранить изменения кода в одном файле, а не на каждой странице веб-сайта. Кажется, он работает нормально, но если вы помните какие-либо проблемы, с которыми вы столкнулись, дайте мне знать. Ценить это.   -  person Alec Sanger    schedule 28.06.2011

Ответы (3)


arrow_upward
25
arrow_downward

Ваше определение переменной var _gaq находится внутри функции. Это означает, что он локально ограничен внутри этой функции и не будет существовать глобально. Google Analytics зависит от глобальной переменной _gaq. Если вы хотите сохранить его внутри такой функции, укажите на него window._gaq.

person Brian    schedule 17.07.2010
comment
СПАСИБО Я переместил var _gaq за пределы моей функции, это сработало мгновенно! - person Airn5475; 07.07.2011
comment
Спасибо! Это тоже устранило нашу проблему :) - person Leon Gaban; 23.08.2013

arrow_upward
14
arrow_downward

Вы полностью упускаете суть асинхронного кода отслеживания. Не помещайте его во внешний файл, потому что это точно так же, как и старый синхронный GA.

И самое главное, не откладывайте код отслеживания до window.onload, так как он может сработать слишком поздно.

Если вы используете асинхронный GA, просто поместите его в начало документа во встроенном теге скрипта. Это рекомендация на веб-сайте Google Analytics тоже.

Вставьте асинхронный фрагмент в нижнюю часть <head> раздела своих страниц после любых других скриптов, которые могут использоваться на вашей странице или в шаблоне.

person gblazex    schedule 16.07.2010
comment
Я понимаю вашу точку зрения на код AddLoadEvent (), и я удалил все части window.onload ... :) Вы не возражаете, если я попрошу вас более подробно рассказать, как внешний файл сделает это именно так? вроде включая старый синхронный ГА. Почему при разделении его на отдельный файл он будет выполняться по-другому? Я прочитал рекомендацию, но в этом проекте мне нужно, чтобы код GA был отделен от главной страницы. - person NeilD; 16.07.2010
comment
Большим преимуществом асинхронного отслеживания является то, что вы можете начать отправлять события в GA до загрузки кода. Как только ваша страница сможет начать помещать элементы в массив _gaq, вы можете начать сохранять события. Напротив, когда вы заставляете переменную вне вашего основного скрипта, вы заставляете отслеживание ждать, пока не загрузится ваш внешний скрипт. Вот как это в точности похоже на старый сценарий. - person Chase Wilson; 17.07.2010
comment
аналогично, заставляя ваши события ждать, пока функция onload не будет запущена через window.onload ‹--- заставит вас ждать еще дольше ... пока все изображения не будут загружены; Что делать, если зависает какой-то замедленный файл? - person Chase Wilson; 17.07.2010
comment
Хорошо, спасибо Чейз ... Я уже удалил биты Window.Onload, и теперь я собираюсь попробовать изменить масштаб переменной _gaq, как предлагает Брайан в другом ответе. - person NeilD; 19.07.2010

arrow_upward
1
arrow_downward

Честно говоря, я не читал все эти сообщения, так как они довольно старые. Однако недавно у меня возникла необходимость добавить Gtag (диспетчер тегов Google для отслеживания аналитики) на старый веб-сайт, который представлял собой 1000 статических файлов HTML и (УДАЧИ) в файлах html был один включаемый файл js для строки меню spry, например я сказал очень старый сайт! В моих целях меня беспокоила не производительность, а измерение трафика, чтобы мы могли его перенести. ваш случай может быть другим, но приведенный ниже код будет работать для внешних js, включая Gtag.

Я использовал этот файл для загрузки кода ниже, поскольку приведенный выше код предназначен для устаревшего ga.js.

//Added Google Anyltics Tag Container Tracking - included here to min rebuilding DOM 

function loadGoogleAnalytics(){
    var ga = document.createElement('script'); 
    ga.type = 'text/javascript'; 
    ga.async = true;
    ga.src = 'https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-X';

    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
}

loadGoogleAnalytics(); //Create the script 

window.dataLayer = window.dataLayer || [];

function gtag(){dataLayer.push(arguments);}

gtag('js', new Date());

gtag('config', 'UA-XXXXXXXXX-1');
//Confirmed with Google tag Assistant
person Joshua Berkowitz    schedule 08.04.2018