Integrations

Third-party integrations for SOG Knives including Instagram feed, Elfsight widgets, and analytics platforms

Overview

SOG Knives integrates with multiple third-party services to enhance the customer experience, drive engagement, and track performance. Key integrations include Instagram feed display, Elfsight social widgets, Google Analytics 4, and various marketing pixels.

Instagram Feed

Implementation

SOG Knives displays a live Instagram feed on the homepage using Elfsight Instagram Feed widget.

Service: Elfsight
Widget Type: Instagram Feed
Placement: Homepage, below featured products
Update Frequency: Real-time via Elfsight API

<!-- templates/pages/home.html -->
{{#partial "instagram-feed"}}
  <section class="instagram-section">
    <div class="container">
      <h2 class="instagram-section__title">Follow @SOGKnives</h2>
      <p class="instagram-section__subtitle">
        See the latest from our community
      </p>
      
      <div class="elfsight-app-abc123def456"></div>
    </div>
  </section>

  <script src="https://apps.elfsight.com/p/platform.js" defer></script>
{{/partial}}

Elfsight Dashboard: https://apps.elfsight.com/panel/

Setting	Value
Instagram Account	@SOGKnives
Layout	Grid
Columns (Desktop)	4
Columns (Tablet)	3
Columns (Mobile)	2
Posts to Display	8
Show Captions	On hover
Open Links	New tab
Image Aspect Ratio	Square (1:1)
Show Header	Yes
Show Follow Button	Yes

Custom Styling

// assets/scss/components/_instagram-feed.scss
.instagram-section {
  padding: 60px 0;
  background: #fafafa;

  &__title {
    margin: 0 0 12px;
    font-family: $font-family-headings;
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    color: $text-primary;
  }

  &__subtitle {
    margin: 0 0 40px;
    font-size: 1.125rem;
    text-align: center;
    color: $text-secondary;
  }
}

// Override Elfsight default styles
.elfsight-app-abc123def456 {
  .eapps-instagram-feed-header {
    border-bottom: 2px solid $primary-green;
  }

  .eapps-instagram-feed-item {
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s;

    &:hover {
      transform: scale(1.05);
    }
  }

  .eapps-instagram-feed-follow-button {
    background: $primary-green;
    color: white;
    border: none;
    
    &:hover {
      background: darken($primary-green, 10%);
    }
  }
}

Analytics Tracking

Track Instagram feed interactions:

// assets/js/theme/instagram-tracking.js
document.addEventListener('DOMContentLoaded', () => {
  const instagramWidget = document.querySelector('.elfsight-app-abc123def456');
  
  if (instagramWidget) {
    // Track feed view
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          gtag('event', 'instagram_feed_view', {
            location: 'homepage'
          });
          observer.disconnect();
        }
      });
    });
    observer.observe(instagramWidget);

    // Track post clicks
    instagramWidget.addEventListener('click', (e) => {
      const postElement = e.target.closest('.eapps-instagram-feed-item');
      if (postElement) {
        gtag('event', 'instagram_post_click', {
          location: 'homepage',
          post_index: Array.from(postElement.parentElement.children).indexOf(postElement)
        });
      }
    });

    // Track follow button clicks
    const followButton = instagramWidget.querySelector('.eapps-instagram-feed-follow-button');
    if (followButton) {
      followButton.addEventListener('click', () => {
        gtag('event', 'instagram_follow_click', {
          location: 'homepage'
        });
      });
    }
  }
});

Elfsight Widgets

Widget	Location	Purpose
Instagram Feed	Homepage	Social proof, engagement
Review Widget	Product pages	Customer testimonials
Social Share	Product pages	Social sharing buttons
Popup	Exit intent	Email capture

Display Instagram reviews and testimonials on product pages:

<!-- templates/pages/product.html -->
{{#partial "reviews-section"}}
  <section class="product-reviews">
    <h3>What Customers Are Saying</h3>
    <div class="elfsight-app-review123"></div>
  </section>
  
  <script src="https://apps.elfsight.com/p/platform.js" defer></script>
{{/partial}}

<!-- templates/components/products/social-share.html -->
<div class="social-share">
  <h4>Share This Knife</h4>
  <div class="elfsight-app-share456"></div>
</div>

Google Analytics 4

Implementation

Property ID: G-XXXXXXXXXX (configured in BigCommerce admin)

Enhanced E-commerce Tracking

// assets/js/theme/ga4-ecommerce.js
export function trackProductView(product) {
  gtag('event', 'view_item', {
    currency: 'USD',
    value: parseFloat(product.price),
    items: [{
      item_id: product.sku,
      item_name: product.name,
      item_brand: 'SOG Knives',
      item_category: product.category,
      price: parseFloat(product.price)
    }]
  });
}

export function trackAddToCart(product, quantity) {
  gtag('event', 'add_to_cart', {
    currency: 'USD',
    value: parseFloat(product.price) * quantity,
    items: [{
      item_id: product.sku,
      item_name: product.name,
      item_brand: 'SOG Knives',
      item_category: product.category,
      price: parseFloat(product.price),
      quantity: quantity
    }]
  });
}

export function trackPurchase(order) {
  gtag('event', 'purchase', {
    transaction_id: order.id,
    value: parseFloat(order.total),
    tax: parseFloat(order.tax),
    shipping: parseFloat(order.shipping),
    currency: 'USD',
    items: order.items.map(item => ({
      item_id: item.sku,
      item_name: item.name,
      item_brand: 'SOG Knives',
      item_category: item.category,
      price: parseFloat(item.price),
      quantity: item.quantity
    }))
  });
}

Custom Events

Track custom interactions:

// Engraving tool usage
gtag('event', 'engraving_tool_open', {
  product_id: productId
});

gtag('event', 'engraving_preview_generated', {
  product_id: productId,
  font: selectedFont,
  characters: engravingText.length
});

gtag('event', 'engraving_submitted', {
  product_id: productId,
  engraving_id: engravingId
});

// Contentful content interactions
gtag('event', 'homepage_hero_click', {
  hero_title: heroData.title,
  cta_url: heroData.ctaUrl
});

// Category content blocks
gtag('event', 'category_content_block_view', {
  category_id: categoryId,
  block_type: blockType
});

User Properties

Set custom user properties:

gtag('set', 'user_properties', {
  customer_type: 'returning', // or 'new'
  lifetime_value: '250.00',
  favorite_category: 'tactical-knives'
});

Facebook Pixel

Implementation

<!-- templates/layout/base.html -->
<head>
  <!-- Facebook Pixel Code -->
  <script>
    !function(f,b,e,v,n,t,s)
    {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
    n.queue=[];t=b.createElement(e);t.async=!0;
    t.src=v;s=b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t,s)}(window, document,'script',
    'https://connect.facebook.net/en_US/fbevents.js');
    fbq('init', 'YOUR_PIXEL_ID');
    fbq('track', 'PageView');
  </script>
  <noscript>
    <img height="1" width="1" style="display:none"
      src="https://www.facebook.com/tr?id=YOUR_PIXEL_ID&ev=PageView&noscript=1"/>
  </noscript>
</head>

Standard Events

// assets/js/theme/facebook-tracking.js
export function trackFBViewContent(product) {
  fbq('track', 'ViewContent', {
    content_name: product.name,
    content_category: product.category,
    content_ids: [product.sku],
    content_type: 'product',
    value: parseFloat(product.price),
    currency: 'USD'
  });
}

export function trackFBAddToCart(product, quantity) {
  fbq('track', 'AddToCart', {
    content_name: product.name,
    content_ids: [product.sku],
    content_type: 'product',
    value: parseFloat(product.price) * quantity,
    currency: 'USD'
  });
}

export function trackFBPurchase(order) {
  fbq('track', 'Purchase', {
    value: parseFloat(order.total),
    currency: 'USD',
    content_ids: order.items.map(item => item.sku),
    content_type: 'product',
    num_items: order.items.length
  });
}

Email Marketing

Klaviyo Integration

Platform: Klaviyo
List ID: Klaviyo_List_ID
Forms: Newsletter signup, exit intent, back in stock

<!-- templates/components/footer/newsletter.html -->
<div class="newsletter-signup">
  <h4>Stay Sharp</h4>
  <p>Get updates on new products, sales, and knife care tips</p>
  
  <form class="klaviyo-form" data-klaviyo-list="Klaviyo_List_ID">
    <input type="email" 
           name="email" 
           placeholder="Your email address" 
           required>
    <button type="submit">Subscribe</button>
  </form>
</div>

<script>
  document.querySelector('.klaviyo-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const email = e.target.email.value;

    await fetch('https://a.klaviyo.com/api/v2/list/Klaviyo_List_ID/subscribe', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        api_key: 'YOUR_KLAVIYO_API_KEY',
        profiles: [{ email }]
      })
    });

    // Show success message
    showSuccessMessage('Thanks for subscribing!');
  });
</script>

Abandoned Cart Emails

Klaviyo tracks abandoned carts via JavaScript:

// assets/js/theme/klaviyo-tracking.js
export function trackCartAbandonment(cartData) {
  fetch('https://a.klaviyo.com/api/track', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      token: 'YOUR_KLAVIYO_TOKEN',
      event: 'Started Checkout',
      customer_properties: {
        email: cartData.email
      },
      properties: {
        $value: cartData.total,
        ItemNames: cartData.items.map(i => i.name),
        CheckoutURL: window.location.href
      }
    })
  });
}

Payment Integrations

Affirm

Monthly financing option displayed on product pages:

<!-- templates/components/products/affirm-promo.html -->
<div class="affirm-promo">
  <p class="affirm-as-low-as" 
     data-amount="{{product.price}}" 
     data-affirm-color="blue">
  </p>
</div>

<script>
  (function(l,g,h,m,a,f,b){
    var d,c=l[m]||{},k=document.createElement(f),p=document.getElementsByTagName(f)[0],
    q=function(a,b){return function(){a[b]._.push([c,arguments])}};
    c[a]=c[a]||{};c[a]._=[];d=c[a];
    for(var n=0;n<b.length;n++){d[b[n]]=q(c[a],b[n])}
    k.async=!0;k.src=h;p.parentNode.insertBefore(k,p)
  })(window,document,"https://cdn1.affirm.com/js/v2/affirm.js","affirm","checkout","script",
    ["setAPIKey","setPublicKey","init"]);
  
  affirm.ui.ready(function(){
    affirm.ui.refresh();
  });
</script>

PayPal

PayPal button on product and cart pages:

<!-- templates/components/products/paypal-button.html -->
<div id="paypal-button-container"></div>

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&currency=USD"></script>
<script>
  paypal.Buttons({
    createOrder: function(data, actions) {
      return actions.order.create({
        purchase_units: [{
          amount: {
            value: '{{product.price}}'
          }
        }]
      });
    },
    onApprove: function(data, actions) {
      return actions.order.capture().then(function(details) {
        // Handle successful payment
        window.location.href = '/checkout/success';
      });
    }
  }).render('#paypal-button-container');
</script>

Live Chat

<!-- templates/layout/base.html -->
<script src="//code.tidio.co/YOUR_TIDIO_KEY.js" async></script>

Custom Chat Settings

// Customize Tidio appearance and behavior
document.addEventListener('tidioChat-ready', function() {
  window.tidioChatApi.display(true);
  window.tidioChatApi.setColorPalette('#2d5016'); // SOG green
  
  // Hide on mobile if cart is open
  if (window.innerWidth < 768 && document.body.classList.contains('cart-open')) {
    window.tidioChatApi.display(false);
  }
});

SEO & Structured Data

JSON-LD Schema Markup

<!-- templates/pages/product.html -->
<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "{{product.name}}",
  "image": "{{product.main_image.url}}",
  "description": "{{product.description}}",
  "sku": "{{product.sku}}",
  "brand": {
    "@type": "Brand",
    "name": "SOG Knives"
  },
  "offers": {
    "@type": "Offer",
    "url": "{{product.url}}",
    "priceCurrency": "USD",
    "price": "{{product.price}}",
    "availability": "{{#if product.in_stock}}https://schema.org/InStock{{else}}https://schema.org/OutOfStock{{/if}}"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "{{product.rating}}",
    "reviewCount": "{{product.review_count}}"
  }
}
</script>

Performance Monitoring

Sentry Error Tracking

// assets/js/sentry-init.js
import * as Sentry from "@sentry/browser";

Sentry.init({
  dsn: "https://[email protected]/PROJECT_ID",
  environment: window.location.hostname.includes('sogknives.com') ? 'production' : 'development',
  integrations: [
    new Sentry.BrowserTracing(),
  ],
  tracesSampleRate: 0.1,
  beforeSend(event, hint) {
    // Filter out certain errors
    if (event.exception) {
      const error = hint.originalException;
      if (error && error.message && error.message.includes('ResizeObserver')) {
        return null; // Don't send ResizeObserver errors
      }
    }
    return event;
  }
});

New Relic Browser Monitoring

<!-- templates/layout/base.html -->
<script type="text/javascript">
  window.NREUM||(NREUM={});
  NREUM.init={/* New Relic config */};
  NREUM.loader_config={/* Loader config */};
</script>
<script type="text/javascript" src="/newrelic.js"></script>

Security Integrations

reCAPTCHA

Protect forms from spam:

<!-- Contact form -->
<form id="contact-form">
  <!-- Form fields -->
  <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
  <button type="submit">Send Message</button>
</form>

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Cloudflare

SOG Knives uses Cloudflare for:

DDoS protection
Web Application Firewall (WAF)
CDN and caching
SSL/TLS encryption

Cloudflare Settings:

Security Level: Medium
Challenge Passage: 30 minutes
Browser Integrity Check: On
Always Use HTTPS: On

Integrations

Overview

Instagram Feed

Implementation

Elfsight Widget Configuration

Widget Settings

Custom Styling

Analytics Tracking

Elfsight Widgets

Widget Inventory

Review Widget

Google Analytics 4

Implementation

Enhanced E-commerce Tracking

Custom Events

User Properties

Facebook Pixel

Implementation

Standard Events

Email Marketing

Klaviyo Integration

Abandoned Cart Emails

Payment Integrations

Affirm

PayPal

Live Chat

Tidio Chat Widget

Custom Chat Settings

SEO & Structured Data

JSON-LD Schema Markup

Performance Monitoring

Sentry Error Tracking

New Relic Browser Monitoring

Security Integrations

reCAPTCHA

Cloudflare

Overview​

Instagram Feed​

Implementation​

Elfsight Widget Configuration​

Widget Settings​

Custom Styling​

Analytics Tracking​

Elfsight Widgets​

Widget Inventory​

Review Widget​

Social Share Buttons​

Google Analytics 4​

Implementation​

Enhanced E-commerce Tracking​

Custom Events​

User Properties​

Facebook Pixel​

Implementation​

Standard Events​

Email Marketing​

Klaviyo Integration​

Newsletter Signup​

Abandoned Cart Emails​

Payment Integrations​

Affirm​

PayPal​

Live Chat​

Tidio Chat Widget​

Custom Chat Settings​

SEO & Structured Data​

JSON-LD Schema Markup​

Performance Monitoring​

Sentry Error Tracking​

New Relic Browser Monitoring​

Security Integrations​

reCAPTCHA​

Cloudflare​

Overview

Instagram Feed

Implementation

Elfsight Widget Configuration

Widget Settings

Custom Styling

Analytics Tracking

Elfsight Widgets

Widget Inventory

Review Widget

Social Share Buttons

Google Analytics 4

Implementation

Enhanced E-commerce Tracking

Custom Events

User Properties

Facebook Pixel

Implementation

Standard Events

Email Marketing

Klaviyo Integration

Newsletter Signup

Abandoned Cart Emails

Payment Integrations

Affirm

PayPal

Live Chat

Tidio Chat Widget

Custom Chat Settings

SEO & Structured Data

JSON-LD Schema Markup

Performance Monitoring

Sentry Error Tracking

New Relic Browser Monitoring

Security Integrations

reCAPTCHA

Cloudflare