Once the pixel is generated, you can copy or download the code and either manually add it to the website or utilize the tag manager or CMS used to manage the website. Please see below for detailed instructions on both approaches.
Base Pixel Code Direct Website Implementation
When implementing the Universal Ads pixel on a webpage, it is recommended that you place the base code between the <head> and </head> tags on every page of your website. You will likely have existing code between these tags, so just place the base code underneath the existing code but above the </head> tag. Implementing the code within your <head> tags helps ensure the code executes quickly after a page loads and that visitors' actions are accurately tracked.
Page View events will be tracked by the pixel’s base code by default, but all other event types will need to be tracked through separate event-level code snippets.
Base Pixel Code Tag Manager Implementation (GTM)
If utilizing Google Tag Manager, follow the recommended instructions below.
- Open GTM and click “Add a new tag.”
- Label the tag in the top-left corner.
- Select Tag Configuration and choose Custom HTML.
- Copy the UA pixel JavaScript snippet and paste it into the HTML box.
- Click the Triggering box to set up the pixel fire logic.
- Choose Page View as the trigger type.
- Select All Page Views as the trigger.
- Click Save in the top right corner.
Event-level Code Direct Website Implementation
Specific events can be tracked by the UA pixel by calling the pixel’s window.uapx.sendConversion() function with the event name and optional parameters tracked on the event. These event-level code snippets will be generated by UA and should be placed within the opening and closing <body> tags to fire when a specific page loads, or when a user takes a specific action like clicking on a button.
Event-level Code Tag Manager Implementation (GTM)
Setting up event tracking in GTM is very similar to the base code set up, but instead of using the base code, you will use the event-level code generated in UA. You will also configure the trigger to fire on specific events (i.e. purchase confirmation page, purchase button click, etc.) as opposed to all page views.
- Open GTM and click “Add a new tag.”
- Label the tag in the top-left corner.
- Select Tag Configuration and choose Custom HTML.
-
Copy the event-level code JavaScript snippet and paste it into the HTML box
Note: You will need to append <script> to the beginning and </script> to the end of the event snippet code
- Click the Triggering box to set up the pixel fire logic
- Select a trigger type
- Configure the trigger to only fire when certain conditions are met
- Click “Save” in the top right corner.
This code will call the window.uapx.sendConversion() function with the event name and optional parameters tracked on the event.
- Page View - Tracked by default in the base pixel code
- Content View
- Add to Cart
- Checkout Started
- Purchases