Code Library

Code Templates

Copy-paste code snippets for common Hyros implementations. Click "Copy" to grab the code, then customize for your needs.

You've completed 0 training pages

Universal Script

Hyros Universal Script

Base tracking script - required on all pages

HTML

<!-- Hyros Universal Script -->
<script>
  (function(h,y,r,o,s){
    h.HyrosTracking=r;h[r]=h[r]||function(){
    (h[r].q=h[r].q||[]).push(arguments)};
    h[r].l=1*new Date();
    o=y.createElement('script');
    s=y.getElementsByTagName('script')[0];
    o.async=1;o.src='https://tracking.hyros.com/v1/hyros.js';
    s.parentNode.insertBefore(o,s);
  })(window,document,'hyros');

  hyros('init', 'YOUR_API_KEY_HERE');
</script>

Instructions:Replace YOUR_API_KEY_HERE with your actual Hyros API key. Place in <head> section before any other tracking code.

Call Tracking

Dynamic Call Pool Script

Swap phone numbers from a dynamic pool

HTML

<!-- Dynamic Pool Phone Number -->
<a href="tel:+1234567890" id="phone-number" class="hyros-dni">
  +1 (234) 567-890
</a>

<script>
  hyros('pool', {
    pool_id: 'YOUR_POOL_ID',
    element: '#phone-number',
    format: '(###) ###-####'
  });
</script>

Instructions:Replace YOUR_POOL_ID with your Hyros pool ID. Add class="hyros-dni" to prevent conflicts. Adjust format to match your region.

Event Tracking

Escalation Signal (Form Submit)

Track form submissions as escalation events

JavaScript

<script>
  document.querySelector('#contact-form').addEventListener('submit', function(e) {
    // Get form data
    var email = document.querySelector('#email').value;
    var phone = document.querySelector('#phone').value;
    var name = document.querySelector('#name').value;

    // Send escalation signal to Hyros
    hyros('escalation', {
      email: email,
      phone: phone,
      name: name,
      event: 'form_submission'
    });
  });
</script>

Instructions:Replace #contact-form, #email, #phone, #name with your form's actual IDs. Customize event name as needed.

Shopify

Shopify Order Tracking

Track order conversions on Shopify thank-you page

Liquid (Shopify)

<script>
  {% if first_time_accessed %}
  hyros('purchase', {
    order_id: '{{ order.order_number }}',
    total: {{ total_price | money_without_currency | remove: ',' }},
    email: '{{ email }}',
    phone: '{{ phone }}',
    products: [
      {% for line_item in line_items %}
      {
        name: '{{ line_item.title }}',
        price: {{ line_item.price | money_without_currency | remove: ',' }},
        quantity: {{ line_item.quantity }}
      }{% unless forloop.last %},{% endunless %}
      {% endfor %}
    ]
  });
  {% endif %}
</script>

Instructions: Add to Settings → Checkout → Order status page → Additional scripts in Shopify. The first_time_accessed check prevents duplicate tracking.

UTM Parameters

UTM Parameter Template

Standard UTM structure for campaign tracking

URL

https://yourwebsite.com/landing-page?utm_source=facebook&utm_medium=cpc&utm_campaign=spring_sale_2024&utm_content=video_ad&utm_term=discount_offer

UTM Parameters Explained:

utm_source: Traffic source (facebook, google, instagram, email, etc.)
utm_medium: Marketing medium (cpc, organic, email, social, etc.)
utm_campaign: Campaign name (spring_sale_2024, product_launch, etc.)
utm_content: Ad variation (video_ad, image_ad, carousel, etc.)
utm_term: Paid keyword or targeting (discount_offer, free_shipping, etc.)

Custom Events

Custom Event Tracking

Track custom actions like video plays, button clicks

JavaScript

<script>
  // Track button click
  document.querySelector('#cta-button').addEventListener('click', function() {
    hyros('track', 'cta_clicked', {
      button_text: this.textContent,
      page_url: window.location.href
    });
  });

  // Track video play
  document.querySelector('video').addEventListener('play', function() {
    hyros('track', 'video_played', {
      video_title: this.getAttribute('title'),
      duration: this.duration
    });
  });

  // Track scroll depth
  var scrolled75 = false;
  window.addEventListener('scroll', function() {
    var scrollPercent = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100;
    if (scrollPercent > 75 && !scrolled75) {
      scrolled75 = true;
      hyros('track', 'scroll_75_percent');
    }
  });
</script>

Instructions:Customize event names and tracked data. Use descriptive event names like "webinar_registration" or "pricing_page_viewed".

WordPress

WordPress Header Integration

Add Hyros script to WordPress theme

PHP (functions.php)

// Add to theme functions.php
function add_hyros_tracking() {
  ?>
  <script>
    (function(h,y,r,o,s){
      h.HyrosTracking=r;h[r]=h[r]||function(){
      (h[r].q=h[r].q||[]).push(arguments)};
      h[r].l=1*new Date();
      o=y.createElement('script');
      s=y.getElementsByTagName('script')[0];
      o.async=1;o.src='https://tracking.hyros.com/v1/hyros.js';
      s.parentNode.insertBefore(o,s);
    })(window,document,'hyros');

    hyros('init', 'YOUR_API_KEY_HERE');
  </script>
  <?php
}
add_action('wp_head', 'add_hyros_tracking');

Instructions:Add this to your theme's functions.php file or use a child theme. Replace YOUR_API_KEY_HERE with your actual API key.

ClickFunnels

ClickFunnels Order Tracking

Track orders on ClickFunnels thank-you pages

JavaScript

<script>
  // Wait for ClickFunnels contact data
  window.addEventListener('load', function() {
    setTimeout(function() {
      var contact = CF.contact || {};
      var purchase = CF.purchase || {};

      hyros('purchase', {
        order_id: purchase.id,
        total: purchase.amount,
        email: contact.email,
        phone: contact.phone,
        name: contact.first_name + ' ' + contact.last_name
      });
    }, 1000);
  });
</script>

Instructions: Add to Tracking Code section in ClickFunnels page settings. Adjust setTimeout delay if needed for slower connections.

Important:Always test code in a staging environment first. Replace placeholder values (YOUR_API_KEY_HERE, YOUR_POOL_ID, etc.) with your actual credentials. Customize element selectors (#email, #phone, etc.) to match your site's HTML structure.