search

FreeUKGen / FreeUKGenealogy

Apache License 2.0
0 stars 0 forks source link

FreeUKGen/Coordination/issues/868 "Add Tag manager to FUG website" #26

Closed ghost closed 4 years ago

ghost commented 5 years ago

Reference: Add Tag manager to FUG website

ghost commented 5 years ago

From https://github.com/FreeUKGen/Coordination/issues/868

Default Google Tag Manager Install Code

<head>

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PJP93GW');</script>
<!-- End Google Tag Manager -->

<body>

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PJP93GW"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Existing Google Analytics Code

<head>

  <script type="text/javascript">
    /** google analytics */
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    function loadAnalyticScripts() {
      ga('create', 'UA-89256051-1', 'auto');
      ga('set', 'forceSSL', true);
      if (acceptAnalyticIsSet() != false) {
        window['ga-disable-UA-89256051-1'] = false;
        ga('set', 'anonymizeIp', undefined);
      } else {
        window['ga-disable-UA-89256051-1'] = true;
        ga('set', 'anonymizeIp', true);
      }
      ga('send', 'pageview');

      ga('create', 'UA-89356115-1', {'name': 'test'}, 'auto');
      ga('set', 'forceSSL', true);
      if (acceptAnalyticIsSet() != false) {
        window['ga-disable-UA-89356115-1'] = false;
        ga('set', 'anonymizeIp', undefined);
      } else {
        window['ga-disable-UA-89356115-1'] = true; 
        ga('set', 'anonymizeIp', true);
      }
      ga('test.send', 'pageview');
    }

    function loadAdsenseScripts() {        
      if (acceptAdsenseIsSet() != false) {
        ga('require', 'displayfeatures');
      } else {
        ga('set', 'allowAdFeatures', false);
      }

      if (acceptAdSenseIsSet() != false) {
        ga('require', 'displayfeatures');
      } else {
        ga('set', 'allowAdFeatures', false);
      }
    }
  </script>

  <script>
    /**
    * Function that tracks a click on an outbound link in Analytics.
    * This function takes a valid URL string as an argument, and uses that URL string
    * as the event label. Setting the transport method to 'beacon' lets the hit be sent
    * using 'navigator.sendBeacon' in browser that support it.
    */
    var GoogleTrackOutboundLink = function(url, dest) {
      ga('send', 'event', 'outbound', 'click', url, {
          'transport': 'beacon',
          'hitCallback': function(){document.location = url;}
      });
      /*    _gaq.push(['_setCustomVar', 1, page, 'test', 2]);  */
      ga('test.send', 'event', 'outbound', 'click', url, {
          'transport': 'beacon',
          'hitCallback': function(){document.location = url;}
      });
    }
  </script>

Appears in:

Function GoogleTrackOutboundLink referenced in:

<body>

<script type='text/javascript'>
    var elNotice = document.getElementById('js_cookieNotice')
    var elAccept = document.getElementById('js_cookieNotice_accept')
    var elRefuse = document.getElementById('js_cookieNotice_refuse')

        // adding possibility to opt out only for analytics
        var gaProperty = 'UA-89256051-1';
        var disableStr = 'ga-disable-' + gaProperty;

        if (document.cookie.indexOf(disableStr + '=true') > -1) {
            window[disableStr] = true;
        }

        function gaOptout() {
            document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
            window[disableStr] = true;
        }

    function setCookie(name, value, days) {
        var expiry = new Date()
        expiry.setTime(expiry.getTime() + (days * 24 * 60 * 60 * 1000))
        var expires = 'expires=' + expiry.toUTCString()
        document.cookie = name + '=' + value + ';' + expires + ';' + 'path=/'
    }

    function deleteCookie(name) {
        if (getCookie(name)) setCookie(name, '', -1);
    }

    function getCookie(name) {
        var name = name + '='
        var decodedCookie = decodeURIComponent(document.cookie)
        var ca = decodedCookie.split(';')

        for(var i = 0; i < ca.length; i++) {
            var c = ca[i]

            while (c.charAt(0) == ' ') {
                c = c.substring(1)
            }

            if (c.indexOf(name) == 0) return c.substring(name.length, c.length)
        }

        return false
    }

    function acceptAdsenseIsSet() {
        return getCookie('acceptAdsense')
    }

    function acceptAnalyticIsSet() {
        return getCookie('acceptAnalytic')
    }

    function refuseCookieIsSet() {
        return getCookie('refuseCookies')
    }

    function setAcceptAdsense() {
        setCookie('acceptAdsense', '1', 365)
    }

    function setAcceptAnalytic() {
        setCookie('acceptAnalytic', '1', 365)
    }

    function setRefuseCookie() {
        setCookie('refuseCookies', '1', 365)
    }

    function deleteAcceptAdsense() {
        deleteCookie('acceptAdsense')
    }

    function deleteAcceptAnalytic() {
        deleteCookie('acceptAnalytic')
    }

    function showNotice() {
        elNotice.style.display = 'block'
    }

    function hideNotice() {
        elNotice.style.display = 'none'
    }

    function loadAdsenseScripts() {
                    /**
            * Google Code for FreeCen2 Search button Conversion Page
            * In your html page, add the snippet and call
            * goog_report_conversion when someone clicks on the
            * chosen link or button. -->
            */
            goog_snippet_vars = function() {
                var w = window;
                w.google_conversion_id = 930845010;
                w.google_conversion_label = "aLyCCMfMinMQ0qLuuwM";
                w.google_remarketing_only = false;
            }

            // DO NOT CHANGE THE CODE BELOW.
            goog_report_conversion = function(url) {
                goog_snippet_vars();
                window.google_conversion_format = "3";
                var opt = new Object();
                opt.onload_callback = function() {
                if (typeof(url) != 'undefined') {
                    window.location = url;
                }
            }

            var conv_handler = window['google_trackConversion'];
                if (typeof(conv_handler) == 'function') {
                conv_handler(opt);
                }
            }

            /** part of Google Code for FreeCen2 Search button Conversion Page */
            var script = document.createElement('script');
            script.src="//www.googleadservices.com/pagead/conversion_async.js"
            document.body.appendChild(script);

        // convert data-src to src for iframes
        var externalContents = document.querySelectorAll('[iframe-src]');
        if(externalContents[0]){
            for (var i = 0; i < externalContents.length; i++) {
                var iframe  = document.createElement('iframe');
                iframe.src = externalContents[i].getAttribute('iframe-src');

                iframe.frameborder = externalContents[i].getAttribute('frameborder');
                iframe.allowfullscreen = externalContents[i].getAttribute('allowfullscreen');
                // TODO convert more attribute or find better way to append all setted attributes and class to that element
                externalContents[i].parentNode.replaceWith(iframe, externalContents[i]);
            }
        }

        // Custom content

    }

    function loadGoogleScripts() {
                    /**
            * Google Code for FreeCen2 Search button Conversion Page
            * In your html page, add the snippet and call
            * goog_report_conversion when someone clicks on the
            * chosen link or button. -->
            */
            goog_snippet_vars = function() {
                var w = window;
                w.google_conversion_id = 930845010;
                w.google_conversion_label = "aLyCCMfMinMQ0qLuuwM";
                w.google_remarketing_only = false;
            }

            // DO NOT CHANGE THE CODE BELOW.
            goog_report_conversion = function(url) {
                goog_snippet_vars();
                window.google_conversion_format = "3";
                var opt = new Object();
                opt.onload_callback = function() {
                if (typeof(url) != 'undefined') {
                    window.location = url;
                }
            }

            var conv_handler = window['google_trackConversion'];
                if (typeof(conv_handler) == 'function') {
                conv_handler(opt);
                }
            }

            /** part of Google Code for FreeCen2 Search button Conversion Page */
            var script = document.createElement('script');
            script.src="//www.googleadservices.com/pagead/conversion_async.js"
            document.body.appendChild(script);

        // convert data-src to src for iframes
        var externalContents = document.querySelectorAll('[iframe-src]');
        if(externalContents[0]){
            for (var i = 0; i < externalContents.length; i++) {
                var iframe  = document.createElement('iframe');
                iframe.src = externalContents[i].getAttribute('iframe-src');

                iframe.frameborder = externalContents[i].getAttribute('frameborder');
                iframe.allowfullscreen = externalContents[i].getAttribute('allowfullscreen');
                // TODO convert more attribute or find better way to append all setted attributes and class to that element
                externalContents[i].parentNode.replaceWith(iframe, externalContents[i]);
            }
        }

        // Custom content

    }

    window.onload = function() {
        if ((!acceptAdsenseIsSet() && !acceptAnalyticIsSet()) && !refuseCookieIsSet()) setTimeout(function() { showNotice() }, 1000);

        if (acceptAdsenseIsSet()) {
            $('#acceptAdsense').prop('checked', true);
        } else {
            $('#acceptAdsense').prop('checked', false);
        }

        if (acceptAnalyticIsSet()) {
            $('#acceptAnalytic').prop('checked', true);
        } else {
            $('#acceptAnalytic').prop('checked', false);
        }

        loadAnalyticScripts();
        loadAdsenseScripts();

        elAccept.onclick = elAccept.ontouch = function(e) {
            e.preventDefault();
            hideNotice();

            setAcceptAdsense();
            setAcceptAnalytic();

            window.location.reload(false);
        }

        if (elRefuse) {
            elRefuse.onclick = elRefuse.ontouch = function(e) {
                e.preventDefault();
                hideNotice();
                setRefuseCookie();
            }
        }
    }

    document.getElementById("acceptAnalytic").onclick = function() {
        if (this.checked) {
            setAcceptAnalytic();
            window.location.reload(false);
            hideNotice();
        }
        else {
            deleteAcceptAnalytic();
            loadAnalyticScripts();
            if (!acceptAnalyticIsSet() && !acceptAdsenseIsSet()) {
                showNotice();
            }
        }
    };

    document.getElementById("acceptAdsense").onclick = function() {
        if (this.checked) {
            setAcceptAdsense();
            loadAdsenseScripts()
            hideNotice();
        }
        else {
            deleteAcceptAdsense();
            loadAdsenseScripts();
            if (!acceptAnalyticIsSet() && !acceptAdsenseIsSet()) {
                showNotice();
            }
        }
    };
</script>

Appears in:

Function gaOptout referenced by:

Function setCookie referenced by:

Function deleteCookie referenced by:

Function getCookie referenced by:

Function acceptAdsenseIsSet referenced by:

Function acceptAnalyticIsSet referenced by:

Function refuseCookieIsSet referenced by:

Function setAcceptAdsense referenced by:

Function setAcceptAnalytic referenced by:

Function setRefuseCookie referenced by:

Function deleteAcceptAdsense referenced by:

Function deleteAcceptAnalytic referenced by:

Function showNotice referenced by:

Function hideNotice referenced by:

Function loadAdsenseScripts referenced by:

Function goog_snippet_vars referenced by:

Function goog_report_conversion referenced by:

Function loadGoogleScripts referenced by:

ghost commented 5 years ago

Reference: Use Javascript variable to run customTask

(Method could allow for management of all analytics code locally - as opposed to relying upon Google Tag Manager configuration - providing custom configurability and use of legacy code w/o adding significantly to DOM render, however, I'm a little wary after reading through all the comments RE: debugging)

DeniseColbert commented 5 years ago

Maybe @richpomfret can provide advice on this? (thanks Gray)

ghost commented 5 years ago

@DeniseColbert I believe we'll be able to achieve the desired functionality (unknown/decline: limited tracking/accept: typical tracking) by configuring a GTM container for limited tracking and a separate GTM container for typical tracking, then using local Javascript to determine which container to load (this method has the benefit of utilizing all GTM container management functionality w/o relying upon changes to the local Javascript code) though I'm open to other methods - main concern is getting tracking snippets and configuration out of the codebase and into GTM.

dhousman commented 5 years ago

Hi,

I'm trying to get up to speed on this issue, so I"m trying to put this all together.. I think what you're saying is that you want to use two containers on each page, one with stuff that all the sites have in common, and another with stuff that's just for the current page. Is that correct?

I agree that this would save some work becasue there are commonalities between the different sites, however I worry that doing this would reduce the flexibility to modify the tags on a site by site basis. I also think that in the long run, keeping things separate will reduce the complexity and overhead of managing implementations in 4 properties in GTM.

I agree that GTM will will make it possible to reduce reliance on changes to the local codebase.

Do I understand your suggestion currectly? Does that address your question?

Thanks, David

dhousman commented 5 years ago

@arswright @DeniseColbert

ghost commented 5 years ago

@dhousman

I think what you're saying is that you want to use two containers on each page, one with stuff that all the sites have in common, and another with stuff that's just for the current page. Is that correct?

No, this would be two separate GTM workspaces for FUG specifically - the idea here is to do away with on-site Javascript analytics configuration (no cookies/GDPR decline scenario versus typical analytics configuration).

dhousman commented 5 years ago

Hi,

Thank for your correction... I think I’m out of the loop here. let me make sure I understand... is this related to the issue I brought up with the analytics request not getting fired when people haven’t accepted the cookie statement?

Are you writing custom code that determines when the analytics request gets fired?

Thanks, David

On Sat, Jun 15, 2019 at 10:23 PM Gray Arswright notifications@github.com wrote:

@dhousman https://github.com/dhousman

I think what you're saying is that you want to use two containers on each page, one with stuff that all the sites have in common, and another with stuff that's just for the current page. Is that correct?

No, this would be two separate GTM workspaces for FUG specifically - the idea here is to do away with on-site Javascript analytics configuration (no cookies/GDPR decline scenario versus typical analytics configuration).

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/FreeUKGen/FreeUKGenealogy/issues/26?email_source=notifications&email_token=ABGI6VBCR7TQH5QV5UGDYKTP2WP2FA5CNFSM4GG3OFC2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODXZDUCI#issuecomment-502413833, or mute the thread https://github.com/notifications/unsubscribe-auth/ABGI6VFEEJ5EBOB55XAO7IDP2WP2FANCNFSM4GG3OFCQ .

ghost commented 5 years ago

@dhousman

is this related to the issue I brought up with the analytics request not getting fired when people haven’t accepted the cookie statement?

That's a valid issue, though I was not considering it in making the recommendation.

Are you writing custom code that determines when the analytics request gets fired?

I'm using the code indicated on the first comment to this issue; FreeUKGen/Coordination/issues/868 provides further background discussion.

Edit: I'd strongly prefer to avoid any complicated on-site Javascript to try to manage things - recommend follow-up on #google_tag_manager at Slack to get everyone on the same page (sounds like there are a lot of considerations I didn't account for, as well!).

ghost commented 5 years ago

Received June 2019 - Product Update for Google Tag Manager with link to guide by Simo Ahava which describes how to create custom variable templates for use within GTM, should be able to resolve my concerns about maintaining custom Javascript in GTM to support toggled Google Analytics features.

References:

ghost commented 5 years ago

@DeniseColbert Looking to implement and test on this issue, however, I do not have permissions to create a separate Property in Google Analytics for viewing testing activity separately of production data and the "FreeUKGen DEV" View on the production Property is just a view on production data - to the best of my knowledge, I need a separate Property ID to achieve any meaningful distinction between activities on DEV and PRD environments.

DeniseColbert commented 5 years ago

I just gave you Edit access, I think that should let you proceed.

ghost commented 5 years ago

@DeniseColbert It appears as though I now have "Edit" permissions for the Property, however, I would need "Edit" permissions for the Account to create a new property per Google Analytics user permissions.

Screenshot from 2019-06-26 03-50-15

DeniseColbert commented 5 years ago

Done; sorry! I wondered why properties weren't mentioned.

DeniseColbert commented 4 years ago

I've opened an epic for this for WP site and referenced this story- closing.