Html Pixel in Theme.liquid

[E-Commerce1]

I have been sent some html pixels by an outside company we are partnering with. There is 6 of them, each going on a different url (or multiple urls). Originally I thought I could put these pixels in the theme.liquid file, and while they did fire, and the company was able to see them, they fired on every page and not those specified by them. 

Is there a way to code this in the theme.liquid file to be able to separate the specific pixels to their specific pages?

[Olllie]

Hey @E-Commerce1 

I've created some code for you that should hopefully solve this issue.

I've added comments to describe what to do, but in short:

1. Paste this code into your theme.liquid.
2. Where you see assign pixel1pages etc., replace my placeholders (e.g., 'auckland,page-one') with the handles of the pages you want that pixel to appear on.
3. Then just add the appropriate pixel code into each of the scripts, replacing the // Placeholder for Pixel script comments.

{%
  # This Liquid code snippet manages pixel tracking based on page handles.
  # Each pixel's visibility is determined by its associated page handles specified below.
  # To add your pixel code, replace the "Placeholder for Pixel X script" comment
  # with your actual tracking code within the respective script tags.
  #
  # Custom created by Ollie from [autoBlogger](https://apps.shopify.com/autoblogger)
%}
    
{% assign pixel1pages = 'auckland,page-one' | split: ',' %}  
{% assign pixel2pages = 'page-three,page-four' | split: ',' %} 
{% assign pixel3pages = 'page-five' | split: ',' %}          
{% assign pixel4pages = 'page-six' | split: ',' %}           
{% assign pixel5pages = 'page-one,page-three' | split: ',' %} 
{% assign pixel6pages = 'page-four,page-five' | split: ',' %} 

{% if pixel1pages contains page.handle %}
  <script>
    console.log('Displaying Pixel One on page: "{{ page.handle }}"');
    // Add Pixel One code below
    // Placeholder for Pixel One script
  </script>
{% endif %}

{% if pixel2pages contains page.handle %}
  <script>
    console.log('Displaying Pixel Two on page: "{{ page.handle }}"');
    // Add Pixel Two code below
    // Placeholder for Pixel Two script
  </script>
{% endif %}

{% if pixel3pages contains page.handle %}
  <script>
    console.log('Displaying Pixel Three on page: "{{ page.handle }}"');
    // Add Pixel Three code below
    // Placeholder for Pixel Three script
  </script>
{% endif %}

{% if pixel4pages contains page.handle %}
  <script>
    console.log('Displaying Pixel Four on page: "{{ page.handle }}"');
    // Add Pixel Four code below
    // Placeholder for Pixel Four script
  </script>
{% endif %}

{% if pixel5pages contains page.handle %}
  <script>
    console.log('Displaying Pixel Five on page: "{{ page.handle }}"');
    // Add Pixel Five code below
    // Placeholder for Pixel Five script
  </script>
{% endif %}

{% if pixel6pages contains page.handle %}
  <script>
    console.log('Displaying Pixel Six on page: "{{ page.handle }}"');
    // Add Pixel Six code below
    // Placeholder for Pixel Six script
  </script>
{% endif %}

Remember to make this post as solved/useful if this is what you were after.