WordPress Integration

Datsnip works with any WordPress site or theme. The simplest install takes 2 minutes via a header injection plugin.

---

Installation (recommended: Insert Headers and Footers plugin)

1. Install the free Insert Headers and Footers plugin
2. Go to Settings → Insert Headers and Footers
3. Paste the snippet in the Scripts in Header section:

<style id="_gs_af">html{visibility:hidden;pointer-events:none}</style>
<noscript><style>#_gs_af{visibility:visible!important}</style></noscript>
<script>setTimeout(function(){var e=document.getElementById('_gs_af');if(e)e.remove()},3000)</script>
<script>
(function(w,d,k){
  w._sf = { siteId: k, ingestUrl: 'https://api.datsnip.com' };
  var s = d.createElement('script'); s.async = 1;
  s.src = 'https://api.datsnip.com/sdk/tracker.js';
  d.head.appendChild(s);
})(window, document, 'YOUR_SITE_ID');
</script>

4. Click Save

---

Alternative: Add to functions.php

// Add to your theme's functions.php or a site-specific plugin
function datsnip_snippet() {
    $site_id = 'YOUR_SITE_ID';
    ?>
    <style id="_gs_af">html{visibility:hidden;pointer-events:none}</style>
    <noscript><style>#_gs_af{visibility:visible!important}</style></noscript>
    <script>setTimeout(function(){var e=document.getElementById('_gs_af');if(e)e.remove()},3000)</script>
    <script>
    (function(w,d,k){
      w._sf = { siteId: k, ingestUrl: 'https://api.datsnip.com' };
      var s = d.createElement('script'); s.async = 1;
      s.src = 'https://api.datsnip.com/sdk/tracker.js';
      d.head.appendChild(s);
    })(window, document, '<?php echo esc_attr($site_id); ?>');
    </script>
    <?php
}
add_action('wp_head', 'datsnip_snippet', 1); // priority 1 = early in <head>

---

WooCommerce — Revenue tracking

Track purchase revenue per experiment variant:

// In functions.php
function datsnip_woo_purchase_event() {
    if (!is_order_received_page()) return;
    
    $order_id = get_query_var('order-received');
    if (!$order_id) return;
    
    $order = wc_get_order($order_id);
    if (!$order || !$order->get_meta('_datsnip_tracked')) {
        $revenue = $order ? $order->get_total() : 0;
        ?>
        <script>
        document.addEventListener('DOMContentLoaded', function() {
            if (window.datsnip) {
                window.datsnip.track('purchase', {
                    revenue: <?php echo esc_js($revenue); ?>,
                    orderId: '<?php echo esc_js($order_id); ?>'
                })
            }
        })
        </script>
        <?php
        if ($order) $order->update_meta_data('_datsnip_tracked', '1');
        if ($order) $order->save();
    }
}
add_action('wp_footer', 'datsnip_woo_purchase_event');

The _datsnip_tracked meta prevents double-firing on page refresh.

---

Gutenberg block experiments

To test Gutenberg blocks against each other:

1. Use the visual editor to select the block wrapper (inspect in DevTools for the class)
2. Gutenberg blocks typically have classes like .wp-block-heading, .wp-block-button__link, .wp-block-cover
3. Create text or style changes targeting these classes

---

Page builder compatibility

Datsnip works with all major WordPress page builders:

Builder	Notes
Elementor	CSS selectors work; use DevTools to find generated class names
Divi	Use .et_pb_* class names visible in Divi's HTML output
Beaver Builder	Generated class names are stable; use DevTools
Bricks Builder	Standard CSS classes; works as expected
Oxygen	Similar to Bricks

---

Caching plugins

If you use a caching plugin (WP Rocket, W3 Total Cache, LiteSpeed Cache), the anti-flicker snippet must be in the HTML — not cached separately. Most caching plugins handle <head> inline code correctly and do not interfere with Datsnip.

If you see the anti-flicker style not removing (page stays hidden), check that your caching plugin isn't deferring all scripts — the safety timeout script (setTimeout) must run immediately.

WP Rocket users: Add tracker.js to the Excluded Files list in WP Rocket's JavaScript settings to prevent it from being delayed or combined.