Site logo

Archived topic

Google Analytics On/Off Toggle on the footer

7 replies · Started by Kevin on April 22, 2018

Viewing posts 1–8 of 8

Hi,

I have tried unsuccessfully to create a on/off GA toggle on the footer.

How can I create such a toggle? Here is an example of a Piwik/Matomo on/off toggle on a footer > https://www.girocard.eu/

Thanks!

Hi Kevin,

I'm not too sure what you mean. What should happen when you toggle between items?

Hi Tom,

The toggle deactivates Google Analytics ... because of the new EU laws kicking into effect soon, the user needs to have an option to deactivate tracking ... using the toggle is now a preferred option

The ON position just leaves Google Analytics in place ... the OFF position deactivates Google Analytics tracking

Is there an example you can show me that's using GA? The example you sent is using Piwik.

So far I've only seen the Piwik example ... when I installed the same code, I couldn't get the toggle to shift to the off position ...

Is the code provided somewhere so I can look at it?

HTML:

<p><br>
      <span>
          <label><span onclick="togglePiwik()" class="piwikan checked">AN</span></label>
          <label><span onclick="togglePiwik()" class="piwikaus">AUS</span></label>
          <span class="piwiktxt">Matomo-Analyse</span>
      </span>
</p>

CSS:


<style>
    .piwikan:hover {
        background:#42AE49; 
        border: 1px solid #42AE49; 
        color:#FFFFFF
    }
                
    .piwikaus:hover {
        background:#E84838; 
        border: 1px solid #E84838; 
        color:#FFFFFF;
    }

    .piwikan, .piwikaus { 
        font-size:0.8em;
        color:#FFF;
        display: inline-block;
        border: 1px solid #FFFFFF;
        padding:0em 0.5em;
        margin-right:5px;
        text-align:center;
        cursor:pointer;
        border: 1px solid #777777; 
        color:#777777
    }
    .piwiktxt{font-size:0.8em;color:#FFF;}
    .checked.piwikan{
        background:#42AE49; 
        border: 1px solid #42AE49; 
        color:#FFFFFF
    }
    .checked.piwikaus{
        background:#E84838;
        border: 1px solid #E84838; 
        color:#FFFFFF;
    }
  </style>

JS:

<script type="text/javascript">
eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('4 7=g.b;4 2=3.p(\'r\');2.9=\'a/5\';2.c=\'d\';2.e=(\'6:\'==3.u.h?\'6:\':\'i:\')+\'//j.k.l/t/1.5?m=n&o=\'+7;(3.8(\'q\')[0]||3.8(\'s\')[0]).f(2);',31,31,'||mtiTracking|document|var|css|https|projectId|getElementsByTagName|type|text|MTIProjectId|rel|stylesheet|href|appendChild|window|protocol|http|fast|fonts|net|apiType|css|projectid|createElement|head|link|body||location'.split('|'),0,{}))

function setNoPiwik() {
    var d = new Date();
    d.setTime(d.getTime() + (10000*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = 'nopiwik=1;' + expires + ";path=/";
}
function delNoPiwik() {
    document.cookie = 'nopiwik=; expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/';
}
function togglePiwikClass(){
    var x = document.getElementsByClassName("piwikan");
    var y = document.getElementsByClassName("piwikaus");
    var i;
    for (i = 0; i < x.length; i++) {
        x[i].classList.toggle("checked");
        y[i].classList.toggle("checked");
    }
}
function togglePiwik(){
    togglePiwikClass();
    if(document.cookie.indexOf("nopiwik=") >= 0){
        delNoPiwik();
    }else{
        setNoPiwik();
    }
}
if(document.cookie.indexOf("nopiwik=") >= 0){
    togglePiwikClass();
}
</script>

Hmm, that definitely looks specific to Piwik unfortunately. You'll likely need to find something GA specific - perhaps there's a plugin out there that handles this?

This archived topic is closed to new replies.