Shopify Question posted in
The Shopify help center can be found here.

Convert document.referrer as a variable in JSON – Shopify

Goal: is to Push the JSON to google tag manager..

Problem is: there is no available liquid variable for ‘referrer’ as per Shopify Documentation.

Possible Solution: is to create a variable using Javascript

So what I did is:

  1. I created a script that will append the URL website where the visitors came from.

  2. capture the appended website URL and convert it to variable

  3. Put the variable {{ ref }} to the JSON

When I inspected the element the ‘referrer'(JSON) doesn’t have any value

please help

<script type="text/javascript">
$(document).ready(function () {
    var content = document.referrer;
    $(".referrer").append(content);
});  
</script>

{% capture ref %}
<div class="referrer">Referrer: </div>
{% endcapture %}


<script type="text/javascript">  
dataLayer.push({
  ‘userEmail’ : ‘{{ customer.email }}’,
  ‘productCategory’ : ‘{{ collection.title }}’,
  ‘productName’ : ‘{{ product.title }}’,
  ‘price’ : ‘{{ sca_price | money }}’,
  ‘originalPrice’ : ‘{{ sca_price | money }}’,
  ‘cartItems’ : ‘{{ cart.item_count }}’,
  ‘currency’ : ‘{{ shop.currency }}’,
  ‘referrer’ : ‘{{ ref }}’, // not working
  ‘productRating’ : ‘’,
  ‘reviewCount’ : null,
  ‘event’ : null
});  
</script>
Tags:

2

Answers


  1. 0

    You don’t need a Shopify Variable to find referrer. You don’t need to even capture it in a page variable and use it. Just update:

    ‘referrer’ : ‘{{ ref }}’, // not working

    to 

    ‘referrer’ : document.referrer,

    Edit:

    Use the below code:

    <script type="text/javascript">  
    push_data = {
      'userEmail' : '{{ customer.email }}',
      'productCategory' : '{{ collection.title }}',
      'productName' : '{{ product.title }}',
      'price' : '{{ sca_price | money }}',
      'originalPrice' : '{{ sca_price | money }}',
      'cartItems' : '{{ cart.item_count }}',
      'currency' : '{{ shop.currency }}',
      'productRating' : '',
      'reviewCount' : null,
      'event' : null
    }
    push_data['referrer'] = document.referrer;
    console.log(push_data); //remove this code. This is to only check referrer is populated
    dataLayer.push(push_data);  
</script>
    Login or Signup to reply.
  2. 0

    Simply use JavaScript:

    "referrer": document.referrer

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search