[Support request] Google Analytics On/Off Toggle on the footer

[Kevin]

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!

[Tom]

Hi Kevin,

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

[Kevin]

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

[Tom]

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

[Kevin]

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 …

[Tom]

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

[Kevin]

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>

[Tom]

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?

[Author]

Posts