Google Tag Manager

Learn how to integrate Oppla with Google Tag Manager

Google Tag Manager

Learn how to integrate Oppla with Google Tag Manager (GTM) for easier tracking implementation.

Setup

1. Create a Custom HTML Tag

In Google Tag Manager:

1. Go to Tags > New
2. Click on Tag Configuration
3. Select “Custom HTML”
4. Add the Oppla tracking code:

<script>
  (function(p,r,o,d,i,o){p[i]=p[i]||function(){(p[i].q=p[i].q||[]).push(arguments)};
  o=r.createElement('script');o.async=1;o.src=d;r.head.appendChild(o);
  })(window,document,'script','https://cdn.oppla.app/tracker.js','oppla');

  window.oppla.init('YOUR_PROJECT_ID');
</script>

2. Configure Triggers

Set up triggers for when the tag should fire:

• All Pages: For basic tracking
• Specific Pages: For targeted tracking
• User Interactions: For event tracking

Event Tracking

Track Page Views

// In GTM Custom HTML tag
window.oppla.track('Page Viewed', {
  path: window.location.pathname,
  title: document.title,
  referrer: document.referrer
});

Track User Interactions

// In GTM Custom HTML tag
window.oppla.track('Button Clicked', {
  buttonId: '{{Click ID}}',
  buttonText: '{{Click Text}}',
  page: '{{Page Path}}'
});

Data Layer Integration

Push to Data Layer

// In your website code
window.dataLayer.push({
  'event': 'opplaEvent',
  'eventName': 'Purchase Completed',
  'eventProperties': {
    'orderId': '12345',
    'amount': 99.99
  }
});

Listen for Data Layer Events

// In GTM Custom HTML tag
window.dataLayer.push = function(e) {
  if (e.event === 'opplaEvent') {
    window.oppla.track(e.eventName, e.eventProperties);
  }
};

User Identification

Identify Users

// In GTM Custom HTML tag
window.oppla.identify({
  userId: '{{User ID}}',
  traits: {
    name: '{{User Name}}',
    email: '{{User Email}}',
    plan: '{{User Plan}}'
  }
});

Best Practices

1. Use Variables: Store Oppla project ID in GTM variables
2. Test in Preview: Always test in GTM preview mode
3. Use Data Layer: Push events to data layer for consistency
4. Monitor Performance: Check tag loading impact

Common Issues

Tag Not Loading

• Check GTM container code is properly installed
• Verify trigger conditions
• Check for JavaScript errors

Events Not Tracking

• Verify data layer pushes
• Check event names and properties
• Ensure proper timing of tag loading

Next Steps

Track Events

Learn more about event tracking

Data Tags

Organize your GTM events