Table of Contents:
Data Layer Variables
Custom JavaScript Variables
Google Analytics Variables
Enhanced E-Commerce Triggers
Petition Page Triggers
Page View Triggers
Configuring Universal Analytics
Configuring Google Analytics 4
Configuring Facebook Pixel in GTM

How to Fire A Facebook Pixel on WinRed Custom Subdomains


The Integration

You can send all donation data directly to Google Tag Manager and Google Analytics with our direct integration. To get started, you will need your container ID.

**Note: If you proceed with the setup below it is recommended that you do not utilize our direct integration with Google Analytics. The two should be connected via Tag Manager.

First log in and navigate to the Revv side of the platform. You can do this by clicking the Return to Revv button at the top of your screen.

Next, click on the Utilities tab, Integrations, click the green “+” and select Google Tag Manager. Enter the container ID, toggle the Active button, and save.

Data Layer Variables


To set up your data layer variables, navigate to Variables in GTM and Click New in the User-Defined Variables table. Select Data Layer Variable:

Under Data Layer Variable Name type in category. Then name the variable DLV-category (DLV stands for “Data Layer Variable”). Your configuration should match the screenshot below:

Complete these steps 7 more times following this table:

Title

Data Layer Variable Name

DLV-Action

action

DLV-panelUpsellID

panelUpsellID

DLV-label

label

DLV-Revenue

ecommerce.purchase.actionField.revenue

DLV-currencyCode

ecommerce.currencyCode

DLV-TransactionID

ecommerce.purchase.actionField.id

DLV-Products

ecommerce.products

After completion, your User-Defined Variables should look like the picture below:

**Note: that the DLV-currencyCode, DLV-TransactionID, DLV-Revenue, DLV-Products variables are used for Facebook and google pixel tracking.

Custom Javascript Variables - needed for Google Analytics Universal Analytics Configuration

  • Custom JavaScript Variable - This variable helps prevent tags from firing unnecessarily. Navigate to Variables in GTM and Click New in the User-Defined Variables Table

  • Select Custom JavaScript

Here is the code you can copy into the Custom Javascript configuration box:

function()

{

if({{DLV-panelUpsellID}} == null && {{DLV-Category}} !== "conduit panel conduit upsell" && ({{DLV-Action}} == "purchase" || {{DLV-Action}} == "lead"))

{

return performance.navigation.type == 0 ? true : false;

}

else

{return true;

}

}

**Note: if you name the data layer variables something different - then you should change the name in the javascript variable to ensure if maps to the correct variable

Google Analytics Variable



Navigate to Variables in GTM and click New in the User-Defined Variables table.

Name your variable GAS//Google Analytics Settings - CD Index. When finished with steps, your variable settings should look like the screenshots below:


Enhanced E-Commerce Triggers


Navigate to Triggers in GTM and click New. Configure the triggers to match the screenshot below - make sure you also replicate the name of the trigger and check “use regex matching”. Toggle Add-to-cart, Checkout, and Purchase Events.

Toggle on purchase events:

**make sure regex is checked

**Note: that you are including the CJS variable from earlier and setting equal to true.

Petition Page Triggers

Configure the trigger to match the screenshot below - make sure you also replicate the name of the trigger.

**Note: that you are including the CJS variable from earlier and setting equal to true

**Note: that the DLV-Action variable key is “action”. You should have this set up from variables configuration.

Page View Triggers

Besides triggers based on purchases or petition sign-up, you can also build triggers based on page view. First navigate to the Triggers tab in Google Tag Manager.

Next, click on the New button:

Title the Trigger “All Page Views” and then click on the Trigger Configuration box:

Select the Page View Trigger and trigger “All Page Views”, then click on the Trigger Configuration box:

Select the Page View Trigger:

The final tag should look like the picture below. Click the Save button, and you're good to go!


Configuring Universal Analytics

To integrate universal analytics, navigate to Tags and click New. Configure the tag to match the screenshot below - make sure you also replicate the name of the tag. For Category, Action, and Label, you will populate the variables that you configured in the variables section.

Under Google Analytics Settings select the GAS//Google Analytics Settings - CD Index variable that was configured in the variables section. At the bottom, under Triggering, select WR-Trigger-CE-eec as the trigger.

Next, go to your Google Universal Analytics Property. Navigate to the Admin tab, click Ecommerce Settings (under View tab), and turn on Enabled Ecommerce and Enable Enhanced Ecommerce Reporting.

Add the following under checkout labeling steps (all lower case) :

Click save, and you're good to go!




Configuring Google Analytics 4


To configure Google Analytics 4, navigate to your Google Analytics account and click the Admin tab.

If you have a Google Analytics Universal Analytics Property, click on “GA4 Setup Assistant”

Choose the first option to add Google Analytics 4 Property to your existing Universal Analytics Property:

If you do not have a GA4 Property or a Google Analytics Universal Analytics Property, click the “Create Property” button:

Follow instructions to create a GA4 Property. Next, select your GA4 property from the Property Dropdown menu in Admin:

Data Stream for the URL you want to track should be populated, but if not, add the URL you wish to track by clicking the Add Stream button and selecting the Web Data Stream option:

Click on the URL you are tracking. Find the Measurement ID.

Copy the ID:

Go to your Google Tag Manager Container and click on “Tags”:

Click on “New” to create a new tag:

At the top, name this tag “Google Analytics GA4 Configuration”

Click on the Pencil Icon for the “Tag Configuration” Box

Choose “Google Analytics: GA4 Configuration” and paste your Measurement ID into the box populated for the Google Analytics: GA4 Configuration Tag Configuration:

Click on the Pencil Icon for the “Triggering” box:

Select the “All Pages” trigger:

Click the “Save” button, and you are good to go!

eCommerce Configuration Tag

Configuring ecommerce for GA4 is a two step process and will require you to access your GTM account. Make sure you’ve created these Data Layer Variables**:

Title

Data Layer Variable Name

DLV-Revenue

ecommerce.purchase.actionField.revenue

DLV-currencyCode

ecommerce.currencyCode

DLV-TransactionID

ecommerce.purchase.actionField.id

DLV-Products

ecommerce.products

**Note: Instructions on how to create these variables can be found in the Data Layer Variables Setup section of this documentation

Once you have added all of the data layer variables, your User-Defined Variables list, located in the Variables tab, should look like this.

Navigate to Tags, click New, select Tag Configuration, and then click Google Analytics: GA4 Event.

Title the Tag “GA4 Ecommerce Transaction”. In the “Tag Type” field select the “Google Analytics GA4 Configuration” tag you just created. In the “Event Name” Field, type “purchase”:

Next, click on Event Parameters and follow the table below for setting up the event parameters. Click Add Row. For Parameter Name, type in the name as it appears in the table below. For the “Value” field, click on the “plus/lego brick” button for each field and select the corresponding Data Layer Variable you’ve created:

Parameter Name

Value

value

DLV-Revenue

transaction_id

DLV-TransactionID

items

DLV-Products

currency

DLV-currency Code

For example, in the Parameter value, you would type “value” into the Parameter Name Field and click on the “plus/lego brick” button to find the DLV-Revenue data layer variable you created:

Click Add Row to add another parameter to the tag and follow the same steps for the transaction_id, items, and currency parameters:

When completed, your Tag Configuration Box should look like this:

Next, click on the triggering box’s pencil icon for the tag

Select the WR - GA-Event//Google Analytics EEC Event you created at the beginning of these instructions.

**Note: If you would like the event to trigger only on an Add to Cart, Checkout, or Purchase Event make sure you have configured the trigger properly.


Configuring Facebook Pixel in GTM

To configure Facebook Pixel in Google Tag Manager, navigate to Tags in GTM and click New. Click on Tag Configuration and then click on Custom HTML Tag. Copy and paste the code below into the HTML box:

<!-- Facebook Pixel Code -->

<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', '000000000000000');

fbq('track', 'PageView');

</script>

<noscript><img height="1" width="1" style="display:none"

src="https://www.facebook.com/tr?id=000000000000000&ev=PageView&noscript=1"

/></noscript>

<!-- End Facebook Pixel Code -->

In the HTML Code, enter your Pixel Tracking Id into the portion of the code in place of the zeros: “fbq('init', '000000000000000');”
src="https://www.facebook.com/tr?id=000000000000000&ev=PageView&noscript=1"

At the bottom, under triggering, select All Pages Page View as the trigger. Configure the tag to match the screenshot below and make sure you also replicate the name:

Facebook Pixel - Purchase


Please note, to properly utilize the Facebook Pixel - Purchase Tag, you must first create the Facebook Pixel - Universal Tag.

If you have not yet created the Facebook Pixel - Universal Tag, navigate to Tags in GTM and Click New. Click on Tag Configuration and then click on Custom HTML Tag.

Copy and paste the code below into the HTML box:

<!-- Facebook Pixel Code -->

<script>

fbq('track', 'Purchase', {

value: {{DLV-Revenue}},

currency: 'USD'

});

</script>

<!-- End Facebook Pixel Code -->

At the bottom, under Triggering, select WR-Trigger-CE-eec-purchase as the trigger. Configure the tag to match the screenshot below, make sure you also replicate the name of the tag:

Facebook Pixel - Universal Tag

Note: If you are utilizing WinRed Custom Domains, please follow the Facebook Tag instructions in part 4h of this documentation titled Facebook Pixel - Universal Tag - Using WinRed custom subdomains

  • Navigate to Tags in GTM and Click New

  • Click on Tag Configuration and then click on Custom HTML Tag

  • Copy and paste the code below into the HTML box

<!-- Facebook Pixel Code -->

<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', '000000000000000');

fbq('track', 'PageView');

</script>

<noscript><img height="1" width="1" style="display:none"

src="https://www.facebook.com/tr?id=000000000000000&ev=PageView&noscript=1"

/></noscript>

<!-- End Facebook Pixel Code -->

  • In the HTML Code, enter your Pixel Tracking Id into the portion of the code that is highlighted in place of the zeros:
    “fbq('init', '000000000000000');”
    src="https://www.facebook.com/tr?id=000000000000000&ev=PageView&noscript=1"

  • At the bottom - under Triggering - Select “All Pages” as the trigger

  • Configure the tag to match the screenshot below - make sure you also replicate the name

Facebook Pixel - Purchase

Note: If you are utilizing WinRed Custom Domains, please follow the Facebook Tag instructions in part 4h of this documentation titled Facebook Pixel - Universal Tag - Using WinRed custom subdomains

  • Note: To properly utilize the Facebook Pixel - Purchase Tag, you must first create the Facebook Pixel - Universal Tag. If you have not yet created the Facebook Pixel - Universal Tag, follow the instructions in this documentation to make the Universal Tag then create the Facebook Pixel - Purchase Tag.

  • Navigate to Tags in GTM and Click New

  • Click on Tag Configuration and then click on Custom HTML Tag

  • Copy and paste the code below into the HTML box

<!-- Facebook Pixel Code -->

<script>

fbq('track', 'Purchase', {

value: {{DLV-Revenue}},

currency: 'USD'

});

</script>

<!-- End Facebook Pixel Code -->

  • At the bottom - under Triggering - Select WR-Trigger-CE-eec-purchase as the trigger

  • Configure the tag to match the screenshot below - make sure you also replicate the name of the tag

Facebook Pixel - Universal Tag - Using WinRed custom subdomains

  • This is available for limited use and should only be used on Facebook ads

  • You are able to verify your own domain on winred.YOURDOMAIN.com

  • If you need to setup your custom subdomain follow the instructions in this article

Note on Methodology - It is recommended you use both Server side pixel and browser side pixel in conjunction with each other. It is very important to make sure deduplication works.

Step 1 - Create or use an existing pixel

  1. Go to Facebook Business Settings. Under “Data Sources”, click “Pixels”.

  1. Create a new pixel or use an existing one. Then, copy your pixel ID

Step 2 - Create your server side integration on WinRed

  1. Go to WinRed. Click on “Utilities” and then “Integrations”.

  1. On the Integrations Page, click on the Green Plus Button

  1. On the Add Integration Page, Click on the Facebook Pixel Integration

  1. Paste your copied pixel ID into the Pixel ID box. Click on the Active toggle. Then click on the save button.

Step 3 - Implement your pixel on the browser side via Google Tag Manager

Substep 1 - Implement base code

  1. In Google Tag Manager, select your website's container. Click on the Tags section in the left side menu. Click the New tag button.

  1. Name your tag, “WR-Facebook-Universal Tag” then insert the following snippet of code as an HTML tag:

<!-- Facebook Pixel Code -->

<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-goes-here}');

fbq('track', 'PageView');

</script>

<noscript>

<img height="1" width="1" style="display:none"

src="https://www.facebook.com/tr?id={your-pixel-id-goes-here}&ev=PageView&noscript=1"/>

</noscript>

<!-- End Facebook Pixel Code -->

  1. For the Tag’s Trigger, select the All Pages Page View Trigger. Click the Save the button in the top right corner. The should look like this when completed:

Substep 2 - Implement Facebook Pixel event code

You can implement many different Facebook events using a Google Tag Manager Custom HTML Tag. The Event ID must match the one you use in FB conversion api. For WinRed, the Event ID is the WR-DLV-transactionID Google Tag Manager Data Layer Variable. You can find instructions on how to configure this variable in the Variables section of this documentation.

If you want a tracked event to be sent to all Facebook Pixel IDs installed on a page, use the ‘track’ code in your Custom HTML Event Tag (ex. Add to Cart, Checkout, Purchase - this tag is separate from the WR-Facebook-Universal Tag in Substep 1):

fbq('track', 'Purchase', {value:{{WR-DLV-Revenue}}, currency: 'USD'}, {eventID: {{WR-DLV-transactionID}}});

If you wanted to a tracked event to be sent to a single Facebook Pixel ID installed on a page, use the ‘trackSingle’ code in your Custom HTML Tag:

fbq('trackSingle', 'SPECIFIC_PIXEL_ID', 'Purchase', {value: {{WR-DLV-Revenue}}, currency: 'USD'}, {eventID: {{WR-DLV-transactionID}}});

**Note - Make sure to provide your specific Pixel ID and Event ID in the code above. For WinRed, the Event ID is the WR-DLV-transactionID Google Tag Manager Data Layer Variable.

Here are couple of examples of how to implement the ‘track’ code in you Google Tag Manager Instance for WinRed:

  1. Add to Cart

    1. Trigger - Create an ecommerce custom event trigger as described in the Enhanced Ecommerce Triggers section of this documentation - make sure to have eec[.]add in the Event Name section and to have regex matching turned on

  1. Tag - Attach the Add to Cart trigger to a Custom HTML Tag titled “WR-Facebook-add to cart”. Make sure to match the configuration in the picture below.

  1. Checkout

    1. Trigger - Create an ecommerce custom event trigger as described in the Enhanced Ecommerce Triggers section of this documentation - make sure to have eec[.]checkout in the Event Name section and to have regex matching turned on

  1. Tag - Attach the Checkout trigger to a Custom HTML Tag titled “WR-Facebook-checkout”. Make sure to match the configuration in the picture below.

  1. Purchase/Donation

    1. Trigger - Create an ecommerce custom event trigger as described in the Enhanced Ecommerce Triggers section- make sure to have eec[.]checkout in the Event Name section and to have regex matching turned on

  1. Tag - Attach the Purchase trigger to a Custom HTML Tag titled “WR-Facebook-purchase”. Make sure to match the configuration in the picture below.

Questions? Feel free to reach out to our team by clicking the red chat bot in the bottom right corner of your screen. We’re happy to assist!

Did this answer your question?