Adding facebook tracking to buttons

Hi there,

I’m trying to track a button on my website:

I’m using the following code:

var button = document.getElementById('Jelentkezes');
  button.addEventListener(
    'click', 
    function() { 
      fbq('track', 'Jelentkezes', {
        content_name: 'Rev Slider jelentkezes', 
        content_category: 'Jelentkezes',
        content_ids: ['1234'],
        content_type: 'product',
        value: 0,
        currency: 'USD' 
      });          
    },
    false
  );

However, it does not seem to recognize the event. Can you have a look at what I might be doing wrong?

Thanks!

Hello @Pbalazs89,

Thanks for writing in! :slight_smile:

Kindly try updating your code to the one below and see if that helps:

jQuery(document).ready(function() {
    var button = document.getElementById('Jelentkezes');
    button.addEventListener(
        'click',
        function() {
            fbq('track', 'Jelentkezes', {
                content_name: 'Rev Slider jelentkezes',
                content_category: 'Jelentkezes',
                content_ids: ['1234'],
                content_type: 'product',
                value: 0,
                currency: 'USD'
            });
        },
        false
    );
});

Thank you.

Hi there,

Thanks for the tip. Unfortunately that did not fix the issue.
Any other ideas? I’m adding the code through cornerstone.

Hello there,

Sorry I gave you a wrong solution. Here’s a better one.

Please do remove the code from Cornerstone, and add this instead to the functions.php of your child theme.

function third_party_tracking_code() { ?>

<script type="text/javascript">
  var button = document.getElementById('Jelentkezes');
  button.addEventListener(
    'click', 
    function() { 
      fbq('track', 'Jelentkezes', {
        content_name: 'Rev Slider jelentkezes',
        content_category: 'Jelentkezes',
        content_ids: ['1234'],
        content_type: 'product',
        value: 0,
        currency: 'USD'
      });          
    },
    false
  );
</script>
} 

add_action( 'wp_head', 'third_party_tracking_code' );

In case you have not setup a child theme yet, you can simply follow the steps on our article:

For more info on how to properly add tracking codes:

https://theme.co/apex/forum/t/customizations-actions-and-filters-in-x/208

Hope that helps.

It says there’s an error on line 47. I can’t find it, do you have any ideas?

Hi,

Can you provide us the entire code that is in your child theme’s functions.php file.
or better yet provide us your wordpress admin login in Secure Note so we can take a closer look.

Thanks

Sure, I’ll add the login. Thanks!

Hi There,

Where did you add the code? It is not child theme functions.ph nor in GLOBAL JS. Please add it back. Though from your homepage, I have check the button with ID Jelentkezes. I can see you do have this:

<button id="jelentkezes"><a style="white-space: nowrap;" href='http://auto-plusz.hu/kapcsolat' title='Jelentkezés''>Jelentkezés!</a></button>

Please add the ID on the link directly.

<a style="white-space: nowrap;" href='http://auto-plusz.hu/kapcsolat' title='Jelentkezés'' id="jelentkezes">Jelentkezés!</a>

When using a link, no need to add the button tag unless you do have specific reason. Also, since you have define id as jelentkezes all small letters, please update this line var button = document.getElementById('Jelentkezes'); to use jelentkezes small letters also.

Hope this helps.

Hi that is the issue, I can’t add the code the global.js or functions.php as it breaks the site:

If I upload this the page stops working.

I’ll make the other adjustments, thanks for the help!

Any idea why the code breaks the site?

Hello There,

We’re sorry for the inconvenience. Please try adding the following instead on your child theme functions.php file:

function third_party_tracking_code() { ?>

<script type="text/javascript">
  var button = document.getElementById('jelentkezes');
  button.addEventListener(
    'click', 
    function() { 
      fbq('track', 'Jelentkezes', {
        content_name: 'Rev Slider jelentkezes',
        content_category: 'Jelentkezes',
        content_ids: ['1234'],
        content_type: 'product',
        value: 0,
        currency: 'USD'
      });          
    },
    false
  );
</script>
<?php
} 

add_action( 'wp_head', 'third_party_tracking_code' );

Opening php tag is missing after closing script tag. Let us know how this goes.

Hi there,

I added the code as instructed but it still doesn’t show that this in particular is being tracked.

Could you please have a look?

Thanks!

Hi there,

There are many possible causes. And these are just the two

  1. Because the button is added to the slider. The slider usually clones the slides to create an illusion of loop which means, the button you’re clicking is not the same instance where the tracking is attached. Or, the tracking attach is executed even before the button is rendered dynamically. You may want to change your code to something like this

<script type="text/javascript">

jQuery ( document ).on('click', '#Jelentkezes', function() { 
      fbq('track', 'Jelentkezes', {
        content_name: 'Rev Slider jelentkezes',
        content_category: 'Jelentkezes',
        content_ids: ['1234'],
        content_type: 'product',
        value: 0,
        currency: 'USD'
      });          
    } );

</script>

This makes sure the click event is triggered even if the button is added or rendered later than the code.

  1. The page loads as you click the button. When you click a link it loads the page instantly halting all the script execution of all the scripts within the page. Hence, it doesn’t have enough time to track it. Usually, trackers are triggered after you do something that’s why tracker are placed after the form was sent, after the ajax request is finished, and so on.

In this case of yours, you should wait for the tracking to finish its job before loading the page in the link. Unfortunately, facebook tracking doesn’t support callbacks so it’s not possible. Your only option is to place the tracking on the loaded page instead of attaching it to the button (eg. http://auto-plusz.hu/kapcsolat ), that’s the easiest.

Again, tracking should be triggered once the event is finished and it’s not possible in the button since the page will reload. Hence, place the tracking after the page load event.

Thanks!

I tried adding the code, unf it did not do the trick. Let’s try something easier like you suggested.
How about the contact form at the bottom of this page on submit:

http://auto-plusz.hu/tanfolyamok/

Could you help me with tracking that? Thanks!
I just need an example and then I’ll be on my way :slight_smile:
Thanks!

Hi there,

Since it uses a CF7 then please check this

Instead of using google analytics like this,

ga( 'send', 'event', 'Contact Form', 'submit' );

You will have to change it to something similar from Facebook tracking. I’m not sure which but you may want to contact a Facebook developer to see what options you have. My previous answers are based on the generic way of tracking, it still depends on your tracking code if it’s supported. But based on my experience, Google has better and many available features and options for tracking. What I just presented is a general idea and why it’s not working :slight_smile:

Thanks!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.