Combine with Browser Side Events

Hi there, we would like to know the suggested way to combine the provided server side container with an existing Browser side container created with GTM4WP plug in. Our main concern is Deduplication function. Do event naming and Ids will be enough? Also is there a chance to fall into bugs ? Thanks for your time. This topic was modified 6 months, 4 weeks ago by theblinkagency . Hi there, For the new versions of the code, we strongly recommend not using any other GTM plugin (like GTM4WP) alongside this one. If you use GTM4WP for your browser-side dataLayer and our plugin for server-side CAPI, you will probably experience data conflicts. Let me explain… The main issue is that you will have two different plugins trying to build and manage the e-commerce dataLayer. This will cause data conflicts, fire duplicate browser events, and break the entire deduplication process. The intended way to use this plugin is to let it handle everything. New versions replaces the functionality of GTM4WP. Here’s how it works: When you enter your GTM Container ID in our plugin’s settings, it will automatically inject the GTM script and create a comprehensive, standards-compliant dataLayer for all your browser-side tags. For every action (like an ‘AddToCart’), it: Generates a unique event_id. Pushes this event_id into the browser’s dataLayer for your GTM browser tags to use. Sends the exact same event_id to the server-side Conversions API (CAPI). Because both the browser event and the server (CAPI) event share the same event_id, Meta can perfectly merge them and avoid all duplication. To get this set up correctly, please follow the “Recommended GTM Setup” instructions in the plugin’s readme.txt file. My sole purpose was to save you the hassle of manual GTM installation. That’s why I included a GTM template in the plugin that should handle everything. A few people reported some import problems and I’m currently working on fixing them. So, if you can not import the provided GTM template file, please move on to Plan B: The manual installation guide is a very solid alternative and, honestly, should only take you 10-15 minutes to complete. Let me know if you have any other questions! Kind regards Suhan ——————————– Recommended GTM Setup Crucial First Steps: To prevent duplicate events and ensure data accuracy, you must configure two settings in your Meta account and GTM container. Turn Off Meta’s Automatic Event Tracking: In your Meta Business Suite, navigate to Events Manager and select your Pixel. Go to the Settings tab. Scroll to the Event Setup section and turn Off the toggle for Track Events Automatically Without Code . This plugin will handle all event sending. Pause Automatically Created GTM Tags: In your GTM container, please pause or delete any automatically created tags that start with FB_ . Since we will be creating our own tags manually, only they should be active. TEMPLATE SETUP To save time and prevent errors, we have created a GTM container template. You can import this file to automatically create all the necessary variables, triggers, and tags. Step 1: Download the Template Go to the “Meta CAPI & GTM” settings page in your WordPress admin panel. You will see an info box at the bottom with a link to download the gtm-template.json template file. Download this file to your computer. Step 2: Import the Template into GTM Go to your Google Tag Manager container. Navigate to the Admin section. Click on Import Container . Click Choose container file and select the gtm-template.json file you downloaded. Choose a New workspace and give it a descriptive name (e.g., “CAPI Import”). IMPORTANT: Choose the Merge import option. Do NOT choose “Overwrite”, as this could delete your existing tags. The preview screen will show you all the new tags, triggers, and variables that will be added. Click Confirm . Step 3: Configure Your IDs After the import is complete, you must update the placeholder IDs with your own tracking IDs. Go to the Tags section. Find and click on the “GA4 – Google Tag (Configuration)” tag. Replace GA4_MEASUREMENT_ID with your actual GA4 Measurement ID (e.g., G-XXXXXXXXXX ). Save the tag. Find and click on the “Meta – PageView” tag. Replace META_PIXEL_ID with your actual Meta Pixel ID. Save the tag. Find and click on the “Pinterest – PageView” tag. Replace PINTEREST_TAG_ID with your actual Pinterest Tag ID. Save the tag. Step 4: Publish Once you have updated your IDs, click the Submit button in the top right corner, then Publish your container. Your GTM setup is now complete! If you prefer to configure Google Tag Manager manually, or if you encounter any issues with the template import, the following guide provides step-by-step instructions to get everything configured. MANUAL SETUP Step 1: Create GTM Variables Create the following variables of the type Data Layer Variable . Variable Name: DLV - event_id Data Layer Variable Name: event_id Variable Name: DLV - ecommerce Data Layer Variable Name: ecommerce Variable Name: DLV - Hashed Email Data Layer Variable Name: user_data.email Variable Name: DLV - ecommerce.shipping_method Data Layer Variable Name: ecommerce.shipping_method Variable Name: DLV - ecommerce.payment_method Data Layer Variable Name: ecommerce.payment_method Step 2: Create GTM Triggers Create the following triggers using the Custom Event type. Trigger Name: CE - PageView Meta Event name: page_view_meta Trigger Name: CE - View Item Event name: view_item Trigger Name: CE - Add to Cart Event name: add_to_cart Trigger Name: CE - Begin Checkout Event name: begin_checkout Trigger Name: CE - Purchase Event name: purchase Trigger Name: CE - View Item List Event name: view_item_list Trigger Name: CE - View Cart Event name: view_cart Trigger Name: CE - Select Item Event name: select_item Trigger Name: CE - Add Shipping Info Event name: add_shipping_info Trigger Name: CE - Add Payment Info Event name: add_payment_info Step 3: Create GTM Tags A) Meta Tags (Facebook Pixel) Install the “Facebook Pixel” template from the GTM Community Template Gallery. Create the following tags. Tag: Meta – PageView Event Name: PageView More Settings > Event ID: {{DLV - event_id}} Trigger: CE - PageView Meta Tag: Meta – ViewContent Event Name: ViewContent Object Properties: {{DLV - ecommerce}} More Settings > Event ID: {{DLV - event_id}} Trigger: CE - View Item Tag: Meta – AddToCart Event Name: AddToCart Object Properties: {{DLV - ecommerce}} More Settings > Event ID: {{DLV - event_id}} Trigger: CE - Add to Cart Tag: Meta – InitiateCheckout Event Name: InitiateCheckout Object Properties: {{DLV - ecommerce}} More Settings > Event ID: {{DLV - event_id}} Trigger: CE - Begin Checkout Tag: Meta – Purchase Event Name: Purchase Object Properties: {{DLV - ecommerce}} More Settings > Event ID: {{DLV - event_id}} Trigger: CE - Purchase Tag: Meta – ViewCategory Event Name: ViewCategory Object Properties: {{DLV - ecommerce}} More Settings > Event ID: {{DLV - event_id}} Trigger: CE - View Item List Tag: Meta – AddPaymentInfo Event Name: AddPaymentInfo Object Properties: {{DLV - ecommerce}} More Settings > Event ID: {{DLV - event_id}} Trigger: CE - Add Payment Info B) Pinterest Tags Prerequisite: Install the “Pinterest Tag” template from the GTM Community Template Gallery. You must also create the following Data Layer Variables for e-commerce data: DLV - ecommerce.value (Data Layer Variable Name: ecommerce.value ) DLV - ecommerce.currency (Data Layer Variable Name: ecommerce.currency ) DLV - ecommerce.items (Data Layer Variable Name: ecommerce.items ) Create the following tags: Tag: Pinterest – PageView Tag ID: Your Pinterest Tag ID Hashed Email: {{DLV - Hashed Email}} Event to Fire: page_visit Custom Parameters: Name event_id , Value {{DLV - event_id}} Trigger: CE - PageView Meta Tag: Pinterest – ViewContent Tag ID: Your Pinterest Tag ID Hashed Email: {{DLV - Hashed Email}} Event to Fire: page_visit Custom Parameters: Add event_id , value , currency , and line_items with their corresponding variables. Trigger: CE - View Item Tag: Pinterest – AddToCart Tag ID: Your Pinterest Tag ID Hashed Email: {{DLV - Hashed Email}} Event to Fire: add_to_cart Custom Parameters: Add event_id , value , currency , and line_items with their corresponding variables. Trigger: CE - Add to Cart Tag: Pinterest – InitiateCheckout Tag ID: Your Pinterest Tag ID Hashed Email: {{DLV - Hashed Email}} Event to Fire: initiate_checkout Custom Parameters: Add event_id , value , currency , and line_items with their corresponding variables. Trigger: CE - Begin Checkout Tag: Pinterest – Purchase Tag ID: Your Pinterest Tag ID Hashed Email: {{DLV - Hashed Email}} Event to Fire: checkout Custom Parameters: Add event_id , value , currency , and line_items with their corresponding variables. Trigger: CE - Purchase Tag: Pinterest – ViewCategory (as Search) Tag ID: Your Pinterest Tag ID Hashed Email: {{DLV - Hashed Email}} Event to Fire: search Custom Parameters: Name event_id , Value {{DLV - event_id}} Name search_query , Value {{DLV - ecommerce.item_list_name}} Trigger: CE - View Item List C) Google Analytics 4 Tags Prerequisite: Before you begin, make sure you have your Measurement ID (starts with G- ) from your Google Analytics 4 property. You must also create the following Data Layer Variables: DLV - ecommerce.currency (Data Layer Variable Name: ecommerce.currency ) DLV - ecommerce.value (Data Layer Variable Name: ecommerce.value ) DLV - ecommerce.items (Data Layer Variable Name: ecommerce.items ) DLV - ecommerce.transaction_id (Data Layer Variable Name: ecommerce.transaction_id ) DLV - ecommerce.item_list_name (Data Layer Variable Name: ecommerce.item_list_name ) First, create the main configuration tag that loads GA4 on all pages. Tag: GA4 – Google Tag (Configuration) Tag Type: Google Analytics > Google Tag Tag ID: Your GA4 Measurement ID (e.g., G-XXXXXXXXXX ) Important: Uncheck the “Send a page view event when this configuration loads” box. We will send it manually with the next tag. Trigger: All Pages Next, create the event tags that will send data from the dataLayer to Google Analytics. Tag: GA4 – Event – PageView Tag Type: Google Analytics > GA4 Event Configuration Tag: Select your GA4 - Google Tag (Configuration) tag. Event Name: page_view Trigger: CE - PageView Meta Tag: GA4 – Event – ViewItem Tag Type: Google Analytics > GA4 Event Configuration Tag: Select your GA4 - Google Tag (Configuration) tag. Event Name: view_item Event Parameters: Parameter Name: currency , Value: {{DLV - ecommerce.currency}} Parameter Name: value , Value: {{DLV - ecommerce.value}} Parameter Name: items , Value: {{DLV - ecommerce.items}} Trigger: CE - View Item Tag: GA4 – Event – AddToCart Tag Type: Google Analytics > GA4 Event Configuration Tag: Select your GA4 - Google Tag (Configuration) tag. Event Name: add_to_cart Event Parameters: Parameter Name: currency , Value: {{DLV - ecommerce.currency}} Parameter Name: value , Value: {{DLV - ecommerce.value}} Parameter Name: items , Value: {{DLV - ecommerce.items}} Trigger: CE - Add to Cart Tag: GA4 – Event – BeginCheckout Tag Type: Google Analytics > GA4 Event Configuration Tag: Select your GA4 - Google Tag (Configuration) tag. Event Name: begin_checkout Event Parameters: Parameter Name: currency , Value: {{DLV - ecommerce.currency}} Parameter Name: value , Value: {{DLV - ecommerce.value}} Parameter Name: items , Value: {{DLV - ecommerce.items}} Trigger: CE - Begin Checkout Tag: GA4 – Event – Purchase Tag Type: Google Analytics > GA4 Event Configuration Tag: Select your GA4 - Google Tag (Configuration) tag. Event Name: purchase Event Parameters: Parameter Name: transaction_id , Value: {{DLV - ecommerce.transaction_id}} Parameter Name: currency , Value: {{DLV - ecommerce.currency}} Parameter Name: value , Value: {{DLV - ecommerce.value}} Parameter Name: items , Value: {{DLV - ecommerce.items}} Trigger: CE - Purchase Tag: GA4 – Event – ViewItemList Tag Type: Google Analytics > GA4 Event Configuration Tag: Select your GA4 - G...