How to Add Google Tag Manager (GTM) and Meta Pixel to Zuddl Registration Pages

What This Does

This guide walks you through adding Google Tag Manager (GTM) to your Zuddl registration pages and using it to fire a Meta (Facebook) conversion pixel when someone registers for your event. This lets you track registrations as conversions in Meta Ads Manager for campaign optimization and reporting.

Before You Begin

• You need Admin or Organizer access to your Zuddl organization.

• You need a Google Tag Manager account with a container ID (e.g. GTM-XXXXXXX).

• You need a Meta Pixel ID from your Meta Business Suite / Events Manager.

• Your event must have a published registration page (landing page) on Zuddl.

Steps

Part A: Add Google Tag Manager to Zuddl

1. Log in to your Zuddl dashboard and navigate to Organization Settings.

2. Open the Snippets page (under organization-level settings).

3. Click Create Snippet.

4. Enter a name for the snippet, for example: GTM - Main Container.

5. Set the Location to Header. This is required for GTM to load correctly on the page.

6. Paste the following code into the snippet editor. Replace GTM-XXXXXXX with your actual GTM container ID:

   <script>
   (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
   new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
   j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
   'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
   })(window,document,'script','dataLayer','GTM-XXXXXXX');
   
   window.addEventListener('zuddl.registration.success', function (event) {
     var registrationData = event.detail;
     window.dataLayer = window.dataLayer || [];
     window.dataLayer.push({
       event: 'zuddl_registration_success',
       registrationData: registrationData
     });
   });
   </script>
   

7. Click Save. Zuddl will publish the snippet to all your registration pages automatically.

Part B: Set Up Meta Pixel Base Code in GTM

1. Open your Google Tag Manager workspace at tagmanager.google.com.

2. Go to Tags > New.

3. Name the tag: Meta Pixel - Base Code.

4. Choose tag type: Custom HTML.

5. Paste the Meta Pixel base code. Replace YOUR_PIXEL_ID with your actual Meta Pixel ID:

   <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>
   

6. Under Triggering, select All Pages.

7. Save the tag.

Part C: Create a Registration Success Trigger in GTM

1. In GTM, go to Triggers > New.

2. Name it: Zuddl Registration Success.

3. Choose trigger type: Custom Event.

4. Set the Event name to: zuddl_registration_success

5. Save the trigger.

Part D: Create the Meta Purchase (Conversion) Tag

1. In GTM, go to Tags > New.

2. Name it: Meta Pixel - Purchase on Registration.

3. Choose tag type: Custom HTML.

4. Paste the following code:

   <script>
     fbq('track', 'Purchase', {
       content_name: 'Zuddl Event Registration',
       currency: 'USD',
       value: 0.00
     });
   </script>
   

5. Under Triggering, select the Zuddl Registration Success trigger you created in Part C.

6. Save the tag.

Part E (Optional): Access Registration Data in GTM Tags

The zuddl_registration_success dataLayer event includes registration details. To use them in your Meta tag:

1. In GTM, go to Variables > User-Defined Variables > New.

2. Choose type: Data Layer Variable.

3. Set the Data Layer Variable Name to: registrationData

4. Name the variable: DL - registrationData.

5. Save. You can now reference registration fields (e.g. event name, attendee info) in your Custom HTML tags using {{DL - registrationData}}.

What Happens Next

Once set up, the end-to-end flow works as follows:

1. A visitor lands on your Zuddl registration page.

2. GTM loads from the organization snippet (Header location) and fires the Meta Pixel PageView.

3. The visitor completes the registration form and submits.

4. Zuddl fires the zuddl.registration.success browser event.

5. The snippet pushes zuddl_registration_success to the GTM dataLayer.

6. GTM catches the custom event trigger and fires the Meta Purchase/Conversion tag.

7. The conversion appears in Meta Ads Manager (Events Manager) for reporting and optimization.

Notes

• Always use GTM Preview Mode to test your setup before publishing. Complete a test registration and verify the zuddl_registration_success event appears in the GTM debug panel.

• Verify the Meta Pixel fires correctly using the Meta Pixel Helper Chrome extension or the Test Events tab in Meta Events Manager.

• Zuddl custom events are standard browser CustomEvent objects. You can listen to them with any script, not only GTM.

• Organization-level snippets apply to all registration pages. If you need per-event tracking, include conditional logic in your snippet based on page URL or event identifiers from the zuddl.registration.form.loaded event payload.

• The registrationData object from the zuddl.registration.success event contains the form field values submitted by the registrant.

Available Zuddl Registration Events