How do I set a cookie on a Wordpress theme template using Javascript/jQuery and then display the cookie value in a different template (if isset)

Question

I have a Wordpress website which I set a cookie using the jQuery cookie plugin.

This is my JS code in the end of one of my wordpress landing pages which sets a cookie using Javascript/jQuery - AND WORKS:

<script type="text/javascript" src="https://example.com/wp-content/themes/themeeee-child/js/jquery.cookie.js"></script>
<script type="text/javascript">

// Parse the URL
var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

// Give the URL parameters variable names
var source   = getUrlParameter('utm_source');
var medium   = getUrlParameter('utm_medium');
var term     = getUrlParameter('utm_term');
var content  = getUrlParameter('utm_content');
var campaign = getUrlParameter('utm_campaign');

// Setting Cookie using jQuery 
if(jQuery.cookie('utm_source') == null || jQuery.cookie('utm_source') == "") {
  jQuery.cookie('utm_source', source); 
}
if(jQuery.cookie('utm_medium') == null || jQuery.cookie('utm_medium') == "") {
  jQuery.cookie('utm_medium', medium); 
}
if(jQuery.cookie('utm_campaign') == null || jQuery.cookie('utm_campaign') == "") {
  jQuery.cookie('utm_campaign', campaign); 
}
if(jQuery.cookie('utm_term') == null || jQuery.cookie('utm_term') == "") {
  jQuery.cookie('utm_term', term); 
}
if(jQuery.cookie('utm_content') == null || jQuery.cookie('utm_content') == "") {
  jQuery.cookie('utm_content', content); 
}

// Set a flag 
jQuery.cookie('coo_flag', 1, { expires : 365 }); 


</script>

$_COOKIE['coo_flag'] is set to "1" now.

On a total different page, at the bottom of the template file, I have this code part that checks using PHP if the $_COOKIE['coo_flag'] is set, and if is true, it fires a google pixel script:

<?php 

  // session_start();
  if ( $_COOKIE["coo_flag"] ) {
    echo $_COOKIE["coo_flag"];
?>

<!-- Google Code for Contact Us Registration Conversion Page -->
<script type="text/javascript">
  /* <![CDATA[ */
  var google_conversion_id = 666;
  var google_conversion_language = "en";
  var google_conversion_format = "3";
  var google_conversion_color = "666";
  var google_conversion_label = "666";
  var google_remarketing_only = false;
  /* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/666/?label=666&amp;guid=ON&amp;script=0"/>
</div>
</noscript>

<?php 
  } else {
    echo "false";
     var_dump($_COOKIE["coo_flag"]);
  }
?>

and I keep getting this output result:

falseNULL

I have been trying to get it using JS too:

<script type="text/javascript" src="https://yellowheadinc.com/wp-content/themes/sogo-child/js/jquery.cookie.js"></script>

<script type="text/javascript">

var cookieValue = jQuery.cookie("coo_flag");
console.log(cookieValue);

</script>

and got no output for console.log(cookieValue);

Please help me find the proper way to get the cookie variable.

[01.02.2017]: More enlightenment:

• A few days after saving the cookie for a year (view screenshot), I noticed it vanished from there (and I didn't clear my cookies!!!!).

• Running the page without the "if" statement and just echoing the cookie doesn't work - both on Chrome and Firefox.

• An edit to @Björn M:

Answer 1

Jquery Cookie creates cookies with a path in addition to the domain:

path path: '/' Define the path where the cookie is valid. By default the path of the cookie is the path of the page where the cookie was created (standard browser behavior). If you want to make it available for instance across the entire domain use path: '/'. Default: path of page where the cookie was created.

A cookie for path /abc is not visible to a page on path /def even though both pathes are on the same domain. Giving the cookie the root path / as quoted above should do the trick.