How to Add Facebook Pixel Dynamic Events

This page refers to an older version of the plugin.

Click Here for the updated help section

This help page refers to an older version of the plugin. For the updated version CLICK HERE

Check out this video to see how you can manage Dynamic Events with PixelYourSite PRO

 

Not using Dynamic Events means leaving money on the table. That’s why:

The New Facebook Pixel can be a fantastic tool for marketers and lets you optimize your campaigns in many highly efficient ways. Probably one of the most interesting strategies that you can use is to optimize your Facebook ads for actions on your website. Sounds complicated? Read on, and you will see that is pretty simple and straight forward.

Are you confused because you are not an HTML or CSS expert? Don’t worry, most of our beginner users are able to implement this technique after carefully reading this help page!

What is an Event and what is a Dynamic Event

With Events, you can tell Facebook when something happens on your website, like when a product is added to the cart, when you get a new subscriber to your list, or when an important page is visited. There are 9 Standard Events that Facebook understands, but you can also define custom events.

A normal event will trigger when a page is loaded. We also have a guide about how to add Standard or Custom Events on Page Load with PixelYourSite plugin.

A Dynamic Event is fired when a user performs an action on a page (like a click on a link or on a button, page scroll, or mouse over), rather then when the page is loaded. By using Dynamic Events you can:

  1. Improve conversion tracking: you will see when someone coming from an add performed the desired action on your website (instead of a simple visit)
  2. Create Custom Audiences from important actions (like people who contacted you, asked a question, clicked on an affiliate link, registered to your newsletter)
  3. Optimize your Facebook Ads for actions on your site – and this can be huge! Once you have a dynamic event triggered on a key action, you can use it to optimize the ads for it.

When is this useful?

There are so many ways you can use this strategy, from lead generation, to simple contact forms. Let’s say you are running a Facebook Camping and your objective is to make people contact you through a form. You will add an event on the contact form button, let’s say a Lead event, and then you will optimize your ads for Lead. Facebook will learn what type of person is most likely to perform that task and will start to send you more similar visitors.

Are you giving away a free eBook in turn for emails? Then add an event on the email form button and optimize your campaign for it. It is probably the most efficient way you can promote your business through Facebook Ads, and if you ignore this strategy you are leaving money to slip through your fingers.

Running an affiliate site? You can trigger a Dynamic Event when your visitors click on an affiliate link and optimize your ads for it. This will lead to better results from your ads and increase your profit.

If you don’t just want to optimize an add for simple visits on a page but make sure that the person landing on your site is really interested in what you offer, you can use Page Scroll events. In this case, the event will only trigger when the user scrolls the page up to a percent that you can define yourself.

Moving the mouse over some specific element can also be a sing of interest and you can use it to in order to fire a Dynamic Event.

How to Add Dynamic Events with PixelYourSite PRO

Adding Dynamic Events in your Facebook Pixel with PixelYourSite is an easy process that spares you all the headache of custom programming work that you will otherwise need. Just follow the simple steps bellow.

There are 4 types of Dynamic Events you can add with PixelYourSite Pro plugin:

  1. Dynamic Events on Click on URL: fired when an HTML link si clicked
  2. Dynamic Events on Click on CSS Selectors: fired when a CSS defined element is clicked, like buttons or form buttons, or any other element that can be clicked and can be defined using CSS selectors
  3. Dynamic Events on Page Scroll: you can define a page scroll percent to fire the event
  4. Dynamic Events on Mouse Over: fired when the user moves the mouse over a CSS defined element

Activate and Add Dynamic Events

Open Dynamic Events tab, check all the boxes, then click “Save Settings” button. Now the dynamic events will be enabled across your website and you can add them as you need. To add a new event, click on the add dynamic events button.

enable-dynamic-events

Dynamic Events on URL Clicks

This is helpful if you want to track and optimize your ads for clicks on text links or images. A lot of affiliate marketers will find this a pure gold mine.

Step 1

Select the Click on URL trigger.

Step 2 (optional)

URL Filter: If you want the event to trigger only on a specific URL, you can add it here. If you leave it blank, the event will trigger on every page where the trigger condition is met.

Step 3

Add the URL of the link: A click on any HTML link POINTING to that URL will trigger the event.

Example: If you want to trigger a dynamic event on a link pointing to Amazon.com you should add http://www.amazon.com

dynamic-click-on-url

Step 4

Select Event Type, then add the parameters you want for this event. Click “Add” button to save the event.

dynamic-url-event

Important: you can add the exact URL or you can add a partial URL follow by a * that will trigger the event on all the URL starting with that string. This will work the same for the URL filter.

  • add the exact match URL (http://www.exampl.com/some-page/) and the event will trigger only when a link with this exact URL  clicked.
  • add the partial URL with a * at the end (http://www.exampl.com/some*) and the event will trigger on any click on a link that starts with the string you entered.

If you want to add an event for every click to one domain you should enter http://www.example.com*

Dynamic Events on Clicks on CSS Selector

Step 1

Select “Clicks on CSS Selector” trigger.

Step 2 (optional)

URL Filter: If you want the event to trigger only on a specific URL, you can add it here. If you leave it blank, the event will trigger on every page where the trigger condition is met.

Step 3

Add the CSS selector that you want the event to fire on.

You will have to follow general CSS rules, like adding classes, ID, attribute value etc. Down on this page, you will find a short guide that will explain how to identify the CSS elements on a page.

click-on-css

Step 4

Select Event Type, then add the parameters you want for this event. Click “Add” button to save the event.

dynamic-url-event

Dynamic Events on Page Scroll

Step 1

Select “Page Scroll” trigger

Step 2 (optional)

URL Filter: If you want the event to trigger only on a specific URL, you can add it here. If you leave it blank, the event will trigger on every page where the trigger condition is met.

Step 3

Add the page scroll percent: the event will fire when the scroll reaches that percent

dynamic-scroll

Step 4

Select Event Type, then add the parameters you want for this event. Click “Add” button to save the event.

Dynamic Events on Mouse Over

Step 1

Select “Mouse Over” trigger

Step 2 (optional)

URL Filter: If you want the event to trigger only on a specific URL, you can add it here. If you leave it blank, the event will trigger on every page where the trigger condition is met.

Step 3

Add the CSS selector that you want the event to fire when the mouse moves over.

You will have to follow general CSS rules, like adding classes, ID, attribute value etc. Down on this page, you will find a short guide that will explain how to identify the CSS elements on a page.

dynamic-mouse-overStep 4

Select Event Type, then add the parameters you want for this event. Click “Add” button to save the event.

Manage Existing Dynamic Events

If you have any dynamic events created on your website, they will be listed in the special events area. You can see the type of each event, the URL or the CSS Element that triggers it, and the code of the event. You can edit or delete each event from there.

manage-dynamic-events

CSS Selector Guide

If you are familiar with basic CSS rules, then you already know how to use this feature. If not, don’t worry, it is pretty simple and all our beginner users manage to do it with no hassle at all.

In CSS, selectors are patterns used to select the element(s) you want to style.

.class – Example: .intro – Selects all elements with class =”intro”

#id – Example: #firstname  Selects the element with id=”firstname”

tagname.class_name – Example: a.mylink – Selects the anchor element with class=”mylink”

tagname[attribute=value] – Example: input[type=”submit”] – Selects the submit button of a form

tagname[attribute=value].class_name – Example: input[type=”submit”].mysubmit – Selects the submit button of a form with class mysubmit[/table]

EXAMPLE 1. Using Classes

We are going to use a Contact Form 7 plugin form for our example (you can use whatever form or buttons you like, popups, ribbons, and so on). Let’s assume that this is the form on your page:

Contact Form 7 Facebook Dynamic Events

What you want to do is to trigger an event when someone clicks on the “Send” button. We are going to look for the “Send” button classes:

  • Open Page Source by pressing Control U
  • Find the button in the code: press control F, write Send and press Enter. Please be sure that you identify the form button and not some other “send” on the page
  • Look for the classes that define the button. In our case we have something like this: class=”wpcf7-form-control wpcf7-submit”

Inside the page source you can find the button classes

  • In this case, there are 2 classes (wpcf7-form-control and wpcf7-submitfor this element and we are going to use both of them.
  • Important: we have to add a point at the beginning of the string and between the classes. The result will look like this:

.wpcf7-form-control.wpcf7-submit

  • Copy paste this string in the CSS Selector and then define what event to be trigger on it

Important: The event will trigger on every button that has these classes, in our case on every Contact Form 7 button.

Example 2. Using attribute value

What if you don’t want your event on every form button, and instead you’re looking to trigger it on a single button, the one with the text “Send” (Remember that you can customize each form, so you can have different buttons, each with it’s own text, like “Contact me”, “Send me the eBook” etc.

We are going to use the same Contact Form 7 for this example.

  • Open Page Source by pressing Control U
  • Find the button in the code: press control F, write Send and press Enter. Please be sure that you identify the form button and not some other “send” on the page
  • Note that the tagname input has 2 attributes: type=”submit” and value=”Send”. You can use each of them. If you use type=”submit” every button with this attribute will trigger the event. If you want to target only this particular Send button you will use value=”Send”. This is the formula: tagname[attribute=value]. In our case it will be:

input[value=”Send”]

Now the event will trigger on every button that has the value Send.

Example 3. Using attribute value and classes

What if you want to be sure that the event will trigger only on the Contact Form 7 form with a button having the text Send? It is simple, you will have to use a class together with the attribute. The result will be something like this:

input[value=”Send”].wpcf7-submit

Note that you have to add a point before each class.

Alternative – Find the CSS Selector Using Developer Tools

You can find the CSS selector of an element using Developer Tools. Most browser will have a similar option. We will show you how to use Chrome Developer Tools.

  • Open Chrome Menu
  • Go on More Tools and click on Developer Tools
  • Select Elements and click on the left arrow
  • Move the mouse over the element you want to target.
  • Click on the element for full CSS details
  • Copy the CSS and use it as explained before

css-selector-developer