Skip to content

Snapchat

This guide shows you how to set up Snapchat Conversion API using server-side Google Tag Manager and Usercentrics Server-Side Tagging.

Prerequisites

Before you begin, ensure you have the following:

Benefits of Server-Side Tagging for Snapchat

  • Improved Data Accuracy and Reliability: Server-side tagging is resilient to ad blockers and browser-based tracking preventions (like Apple's ITP/ETP). Since the data is sent from your server to Snapchat's server, it's not intercepted in the user's browser, leading to a more complete and accurate conversion dataset.

  • Enhanced Website Performance: By offloading the execution of the Snapchat pixel from the user's browser, you reduce the client-side JavaScript load. This directly contributes to faster page load times and better Core Web Vitals, improving the overall user experience.

  • Greater Security and Control: Your CAPI Access Token is stored securely within your sGTM container and is never exposed to the client's browser. Furthermore, you gain full control over the data sent to Snapchat. You can hash, redact, or enrich data on the server before it's forwarded, ensuring better data governance and privacy compliance.

  • Richer Data for Better Matching: The server-side environment allows you to enrich the event data with information from other sources, such as a CRM or other first-party databases, before sending it to Snapchat. This provides more signals for event matching, increasing the likelihood that Snapchat can attribute a conversion to a campaign.

Rollout plan

The implementation follows a parallel tracking model. This means you will send events from both the user's browser (via Snapchat Pixel) and your server (via Snapchat Conversions API). Snapchat will then use a unique Event ID to deduplicate these events, ensuring that a single user action is only counted once. This is recommended, but not required by Snapchat. You can remove the Snapchat Pixel after confirming the Snapchat Conversion API is performing as expected. 

Step 1: Implementation of parallel tracking

Part A: Web GTM (client-side) configuration

Configure your website's GTM container to send data to your server-side GTM container and fire the standard Snapchat Pixel for browser-side tracking. 

Note

The Snapchat Pixel template in the server container, is compatible with the Google Analytics events sent to the server. Therefore, the following setup is based on Google Analytics being fired from the web container.

  1. Create a Unique Event ID Variable:

    1. For deduplication to work, every event must have a unique ID that is identical for both the browser and server event.

    2. In your Web GTM container, go to Variables - New.

    3. Choose Custom JavaScript Variable and paste the following code:

      function() {
    var timestamp = new Date().getTime();
    var randomNumber = Math.random().toString(36).substring(2);
    return 'evt_' + timestamp + '_' + randomNumber;
}

    4. Name this variable CJS - Unique Event ID.

  2. Add Event ID to GA4 Event Tags: add a parameter event_id and insert the {{CJS - Unique Event ID}} variable as a value on each GA4 event.

  3. Set up the Snapchat Pixel Tag:

    1. In your Web GTM container, go to Tags - New.

    2. Click Tag Configuration and in the Community Template Gallery find the Snapchat Pixel tag template by facebookarchive.

    3. Enter your Snapchat Pixel ID in the designated field. It's best practice to store this in a Constant variable.

    4. For the PageView event (and other standard or custom events), insert the {{CJS - Unique Event ID}} variable in the Client Deduplication ID field.

    5. For the base PageView tag, set the trigger to All Pages. For other events (e.g., add_to_cart, purchase), use the appropriate triggers.

Note

The same triggers must be used for the Snapchat Pixel and Google Analytics tags, to preserve the same event ID sent to the server container.

Part B: Server-side GTM Configuration

Now, configure the server container to receive the data from the web container and forward it to Snapchat.

  1. Set up the Snapchat Conversions API Tag:

    1. Navigate to the Templates section and in the Tag Templates area, click Search Gallery.

    2. In the Community Template Gallery, search for the Snapchat Conversions API tag (provided by Snapchat).

    3. Go to Tags - New - Tag Configuration and select the Snapchat Conversion API Tag. 

    4. Configure the following:

      1. Pixel ID: Enter the same Snapchat Pixel ID you used in the web container.

      2. API Access Token: In your Snapchat Events Manager, go to Settings and generate an Access Token under the Conversions API section. Store this securely in your server-side GTM as a variable.

      3. Event Name Mapping: Configure the tag to map GA4 event names to Snapchat standard events.

        You can use a RegEx Table or Lookup Table variable based on the built-in Event Name variable for this, e.g. purchase > PURCHASE. To do so, choose Override in the drop-down menu under Event Name Setup Method and select Custom. Add the RegEx Table or Lookup Table variable here.
        If your event_names match this list provided by Snapchat, you can also choose Inherit from client in the dropdown-menu, instead of Override. 

      4. Action Source: Keep the Action source set to Web. 

      5. Server Parameters: add the same event_id here, you are sending from the web container via the GA4 tag.
        You can also add server-specific parameters in this section. For more information, check this Snapchat documentation page.

      6. User Data Parameters: add user specific data here, such as country > US. For more information on User Data Parameters, check this Snapchat documentation page. 

      7. Custom Data Parameters: add additional Parameters here, such as content_ids or order_id. For more information, you can check here or here. 

  2. Set up Triggering:

    1. Create a new trigger of type Custom and set it to fire when Client Name equals the name of your GA4 client. This way it will fire on all events from your GA4 client.

    2. Keep in mind to validate the consent. See our guidelines on consent.

You can explore an idea of allowlisting specific incoming events, which can be standard and custom. This way, you will minimize the risk of polluting the analytics with unwanted events and reduce the amount of data that you share with third-party vendors.

Step 2: Quality assurance

Testing is crucial. Use server-side GTM's Preview mode and the Snapchat Event Manager simultaneously.

Before you publish anything, make sure that your browser-based and server-based events work as expected. You can do that by following the steps below:

  1. Use Preview Mode: Open the Preview mode in both your Web GTM and Server GTM containers.

  2. Simulate Events: On your website, perform the actions that trigger your conversion events (e.g., make a test purchase).

  3. Verify in sGTM Preview:

    1. In the sGTM preview panel, select the GA4 event from the left-hand side.

    2. Check the Incoming Request tab to see the data received from the client.

    3. Check the Outgoing HTTP Requests tab. You should see a request being sent from your Snapchat tag to https://tr.snapchat.com/....
      Verify that the payload contains the correctly hashed user data and event details.

  4. Check Snapchat Events Manager:
    Use the Test Events tool within the Snapchat Ads Manager.
    You should see the server events arriving in near real-time, along with information on event match quality.

Step 3: Deploy and monitor

Once you've confirmed everything works as expected, you can go live.

  1. Publish Containers: Submit and publish the changes in both your Web and Server GTM containers.

  2. Monitor: Keep an eye on the Snapchat Events Manager over the next few days to monitor event volume, match rates, and check for any reported errors.

  3. Decommission Client-Side Pixel (optional): After validating that the server-side implementation is stable and capturing all required data, you can remove the client-side Snapchat pixel from your Web GTM container to gain the full performance benefits.

Expected challenges & solutions

Challenge: Events are not being deduplicated.

Solution: The most likely cause is a mismatch in the event_id. Use the Preview modes in both containers to verify that the exact same event_id is being sent with both the browser and server events for a single action. Also, ensure the event names are identical (e.g., add_to_cart in the browser and add_to_cart on the server).

Challenge: Server events are not showing up in Snapchat.

Solution: Use the server-side GTM Preview mode. Check the Tags tab to see if the CAPI tag fired. If it failed, check the Response tab in the Outgoing HTTP Requests section. This will often contain an error message from Snapchat explaining why the event was rejected.