Manual configuration examples

Overview

This page contains comprehensive examples for manual initialization using Hood('init', tag, config) with various configuration patterns and real-world scenarios.

Real-world configuration examples

Push configuration examples

Basic push setup

Hood('init', 'TAG_ID', {
  push_config: {
    key: 'BExxx...VAPID...',           // VAPID public key
    push_serviceworker: '/sw.js',      // Service Worker path
    serviceWorkerScope: '/',           // SW scope
    push_enable_subdomain_subscription: true
  }
});

Advanced push with custom settings

Hood('init', 'TAG_ID', {
  push_config: {
    key: 'BExxx...VAPID...',
    push_serviceworker: '/sw.js',
    serviceWorkerScope: '/',
    push_enable_subdomain_subscription: true,
    push_prompt_delay: 5000,           // 5 second delay
    push_prompt_text: 'Get notified about updates',
    push_prompt_button_text: 'Subscribe'
  }
});

Modals configuration examples

Basic modal setup

Hood('init', 'TAG_ID', {
  modals_config: {
    modals: [{
      id: 'welcome-modal',
      template: 'welcome-template',
      triggers: [{ type: 'pageView' }],
      filters: [
        { c: '{{data.segment}}', o: 'eq', m: 'prospect' }
      ],
      options: {
        animation: 'fade-in',
        theme: 'light',
        limit_type: 'session',
        limit_count: 1
      }
    }]
  }
});

Multiple modals with different triggers

Hood('init', 'TAG_ID', {
  modals_config: {
    modals: [
      {
        id: 'welcome-modal',
        template: 'welcome-template',
        triggers: [{ type: 'pageView' }],
        filters: [
          { c: '{{data.segment}}', o: 'eq', m: 'prospect' }
        ],
        options: {
          animation: 'fade-in',
          theme: 'light',
          limit_type: 'session',
          limit_count: 1
        }
      },
      {
        id: 'exit-intent-modal',
        template: 'exit-intent-template',
        triggers: [{ type: 'exitIntent' }],
        filters: [
          { c: '{{data.user_type}}', o: 'eq', m: 'visitor' }
        ],
        options: {
          animation: 'slide-up',
          theme: 'dark',
          limit_type: 'session',
          limit_count: 1
        }
      }
    ]
  }
});

A/B testing examples

Basic A/B test

Hood('init', 'TAG_ID', {
  modals_config: {
    modals: [{
      id: 'ab-test-modal',
      ab: {
        persist: true,
        variant: null, // Auto-select
        variations: [
          {
            name: 'A',
            weight: 1,
            modal: {
              template: 'variant-a-template',
              options: { theme: 'light' }
            }
          },
          {
            name: 'B', 
            weight: 1,
            modal: {
              template: 'variant-b-template',
              options: { theme: 'dark' }
            }
          }
        ]
      }
    }]
  }
});

Advanced A/B test with multiple variants

Hood('init', 'TAG_ID', {
  modals_config: {
    modals: [{
      id: 'advanced-ab-test',
      ab: {
        persist: true,
        variant: null,
        variations: [
          {
            name: 'Control',
            weight: 1,
            modal: {
              template: 'control-template',
              options: { theme: 'light', animation: 'fade-in' }
            }
          },
          {
            name: 'Variant A',
            weight: 1,
            modal: {
              template: 'variant-a-template',
              options: { theme: 'dark', animation: 'slide-up' }
            }
          },
          {
            name: 'Variant B',
            weight: 1,
            modal: {
              template: 'variant-b-template',
              options: { theme: 'blue', animation: 'zoom-in' }
            }
          }
        ]
      }
    }]
  }
});

Tags configuration examples

Basic tag setup

Hood('init', 'TAG_ID', {
  tag_config: {
    tags: {
      'track-button': {
        triggers: [{ type: 'click', config: { selector: '.track-btn' } }],
        filters: [
          { c: '{{data.user_type}}', o: 'eq', m: 'premium' }
        ]
      }
    }
  }
});

Multiple tags with different triggers

Hood('init', 'TAG_ID', {
  tag_config: {
    tags: {
      'track-button': {
        triggers: [{ type: 'click', config: { selector: '.track-btn' } }],
        filters: [
          { c: '{{data.user_type}}', o: 'eq', m: 'premium' }
        ]
      },
      'form-submission': {
        triggers: [{ type: 'formSubmit', config: { selector: '#contact-form' } }],
        filters: [
          { c: '{{data.country}}', o: 'eq', m: 'US' }
        ]
      },
      'scroll-tracking': {
        triggers: [{ type: 'scroll', config: { threshold: 0.5 } }],
        filters: [
          { c: '{{data.page_type}}', o: 'eq', m: 'blog' }
        ]
      }
    }
  }
});

Complete configuration example

Full-featured setup

Hood('init', 'TAG_ID', {
  // Core settings
  analytics: true,
  crashlytics: true,
  consent: { enabled: true },
  
  // Push configuration
  push_config: {
    key: 'BExxx...VAPID...',
    push_serviceworker: '/sw.js',
    serviceWorkerScope: '/',
    push_enable_subdomain_subscription: true
  },
  
  // Modals configuration
  modals_config: {
    modals: [
      {
        id: 'welcome-modal',
        template: 'welcome-template',
        triggers: [{ type: 'pageView' }],
        filters: [
          { c: '{{data.segment}}', o: 'eq', m: 'prospect' }
        ],
        options: {
          animation: 'fade-in',
          theme: 'light',
          limit_type: 'session',
          limit_count: 1
        }
      }
    ]
  },
  
  // Tags configuration
  tag_config: {
    tags: {
      'track-button': {
        triggers: [{ type: 'click', config: { selector: '.track-btn' } }],
        filters: [
          { c: '{{data.user_type}}', o: 'eq', m: 'premium' }
        ]
      }
    }
  },
  
  // Custom URLs
  modal_url: 'https://cdn.example.com/modals/',
  tag_url: 'https://cdn.example.com/config/'
});

Best practices