CODEWITHSUNDEEP
analyticsgoogle-tag-managerfacebook-pixel
Carl K
Carl K

Reputation: 984

Facebook Pixel Custom Dimensions Only Appearing on First Pageview

We have a single page Angular app with the Facebook pixel that is injected via GTM. In the first injection, we pass the following:

<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', '<OUR ID>'); // Insert your pixel ID here. 
</script>

Note, there is no pageview event. We then push a custom "virtual pageview" event to the GTM datalayer that leads to a tag that sends the pageview to Google Analytics (working fine), and triggers an injection of the following code as well:

<script>
fbq('track', 'PageView', {
    dim1:{{dim 1 macro}},
    dim2:{{dim 2 macro}},
    dim3:{{dim 2 macro}} 
});
</script>

On EACH pageview, the above fbq is appended to the DOM with the proper dimensions populated (by viewing the source of the page).

On the FIRST pageview HIT to Facebook, the dimensions are present in the call (by viewing the network tab), but on the SUBSEQUENT pageviews, a hit is sent to Facebook, BUT no dimensions are sent, even though they are present in the code appended to the DOM.

For the most part, these dimensions do not change hit to hit, but could change based on the actions the user does throughout their sessions.

Any thoughts as to why the subsequent hits DO NOT include the custom dimensions?

Upvotes: 1

Views: 692

Answers (2)

Carl K
Carl K

Reputation: 984

Received feedback from the official Facebook team, it seems that this is by design. On any subsequent call with a Pageview event, no custom data will be sent in the payload.

Upvotes: 2

Underlines
Underlines

Reputation: 917

You try to update a payload every time a history change happens in an Angular app and execute the fb code again with the updated payload?

I would implement a datalayer on your front-end:

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'virtualPageView',
  pagePath: '/newPath', //update this path from your angular route,
                        //or use GTMs built in history-change trigger
                        //and a variable that gets the URL fragment
                        //to update your pageview's path variable.
  customDimenson1: 'value1',
  customDimenson2: 'value2',
  customDimenson3: 'value3'
});
</script>

Create a trigger of the type Custom Event with the name virtualPageView. Create 4 variables of the type Data Layer Variable, for pagePath, customDimension1-3. Create your Custom HTML Tag which contains your fbq event:

<script>
fbq('track', 'PageView', {
    dim1:{{customDimenson1}},
    dim2:{{customDimenson2}},
    dim3:{{customDimenson3}} 
});
</script>

Create another Custom HTML Tag that fires on the built-in trigger All Pages, as it only needs to be executed once for your Single Page Application, with your base 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', '<OUR ID>'); // Insert your pixel ID here. 
</script>

I had problems with SPA for updated variables. Sometimes it's a race condition, sometimes it's bugs in GTM or your code. You can also try to delay the execution by using a 100ms timer (bad advice).

Upvotes: 0

Related Questions