Google Tag Manager

Prerequisites

• An Alytica account
• Client ID (and optional Client Secret)
• Access to Google Tag Manager
• A container set up for your website

Step 1: Create Custom HTML Tag

1. Log in to Google Tag Manager
2. Navigate to Tags > New
3. Select "Custom HTML" as the tag type
4. Paste the following code into the HTML field:

<script>
  window.alytica = window.alytica || { q: [] };
  window.alytica.q.push(['init', {
    clientId: '{{Alytica Client ID}}', // Use GTM variable or hardcode your Client ID
    trackPageViews: true,
    trackWebVitals: true,
    trackOutgoingLinks: true,
    trackAttributes: true
  }]);
</script>
<script src="https://your-alytica-script-url.js" async></script>

Step 2: Configure Trigger

1. In the same tag configuration, click on "Triggering"
2. Select "All Pages" to track every page of your website
   • Alternatively, create custom triggers for specific pages

Step 3: Create Variables (Optional)

For better management:

1. Go to Variables > New > User-Defined Variables
2. Create a Constant variable named "Alytica Client ID"
3. Enter your client ID value
4. Update your tag to use {{Alytica Client ID}} instead of hardcoding

Step 4: Track Custom Events

Option 1: Custom HTML Tags

Create additional Custom HTML tags for specific events:

<script>
  window.alytica('track', 'product_view', {
    productId: '{{Product ID}}',
    productName: '{{Product Name}}',
    price: {{Product Price}}
  });
</script>

Option 2: Custom Event Tag

1. Create a new Custom HTML tag
2. Use Data Layer variables to pass event data
3. Set appropriate triggers (e.g., click triggers, form submissions)

Step 5: User Identification

Create a Custom HTML tag for identifying logged-in users:

<script>
  window.alytica('identify', '{{User ID}}', {
    email: '{{User Email}}',
    name: '{{User Name}}',
    accountType: '{{Account Type}}'
  });
</script>

Step 6: Preview and Publish

1. Click "Preview" to test your implementation
2. Verify events are firing correctly in Preview mode
3. Check browser console for any errors
4. Submit and publish your changes when everything works correctly

Advanced GTM Configuration

Data Layer Integration

Push events to the Data Layer and create tags that respond to them:

// Push event to Data Layer
dataLayer.push({
  'event': 'alytica_event',
  'eventName': 'newsletter_signup',
  'eventProperties': {
    'source': 'popup',
    'campaign': 'summer_promo'
  }
});

Then create a Custom HTML tag triggered by the 'alytica_event' Data Layer event:

<script>
  window.alytica('track',
    {{dlv - eventName}},
    {{dlv - eventProperties}}
  );
</script>

Troubleshooting

• Use GTM's Preview mode to debug tag firing
• Check browser console for JavaScript errors
• Verify Alytica events in your Alytica dashboard
• Test different trigger conditions if events aren't firing