Changes

From SimplyBook.me
no edit summary
Line 156: Line 156:  
;To add Facebook tracking pixel to SimplyBook.me site:<br><br>
 
;To add Facebook tracking pixel to SimplyBook.me site:<br><br>
 
:1. Go to your [https://www.facebook.com/business/url/?href=https%3A%2F%2Fwww.facebook.com%2Fads%2Fmanager%2Fpixel%2Ffacebook_pixel&cmsid=952192354843755&creative=link&creative_detail=advertiser-help-center&create_type&destination_cms_id&orig_http_referrer Facebook Pixel tab] in Ads Manager.<br><br>
 
:1. Go to your [https://www.facebook.com/business/url/?href=https%3A%2F%2Fwww.facebook.com%2Fads%2Fmanager%2Fpixel%2Ffacebook_pixel&cmsid=952192354843755&creative=link&creative_detail=advertiser-help-center&create_type&destination_cms_id&orig_http_referrer Facebook Pixel tab] in Ads Manager.<br><br>
:2. Follow the simple steps to create pixel.<br>
+
:2. Follow the simple steps to create pixel. Choose to connect a data source.<br>
[[File:Fb pixel get started.png|center]]<br><br>
+
[[File:Pixel start page.png|border|center]]<br><br>
:3. Insert the title of the pixel and press Create button.<br>
+
:3. Choose Web option.
[[File:Fb pixel name.png|center]]<br><br>
+
[[File:Connect web data source.png|border|center]]
:4. Select manual code installation.
  −
[[File:Fb pixel manual installation.png | center]]
   
<br><br>
 
<br><br>
:5. Copy src of the tracking pixel.<br>
+
:4. Select "Facebook pixel".
[[File:Fb pixel code copy.png|center]]<br>
+
[[File:Pixel start.png|border|center]]
:6. In your SimplyBook.me admin interface go to Custom Features // Custom Features section and enable Custom CSS Custom Feature. In this Custom Feature settings add code with src copied from previous step:<br><br>
+
<br><br>
''New themes''
+
:5. Insert the title of pixel, your booking website address and press "Continue" button.<br>
 +
[[File:Connect site.png|center]]<br><br>
 +
<br><br>
 +
:6. Choose manual code installation.
 +
[[File:Install code manually.png|border| center]]
 +
<br><br>
 +
:7. Copy the code and insert it to any text editor, copy the src of the tracking pixel.<br>
 +
[[File:Get facebook code.png|border|center]]
 +
 
 +
[[File:Copy pixel source.png|border|center]]<br>
 +
:8. In your SimplyBook.me admin interface go to Custom Features // Custom Features section and enable Custom CSS Custom Feature.<br>In this Custom Feature settings select the tab depending on whether you will be traking successful bookings on the booking website provided by SimplyBook.me or booking widget on your own website . Add the code with src copied from previous step.:<br><br>
 
:For usual confirmation page:
 
:For usual confirmation page:
 
<code>#booking-result-view .booking-item.booking-confirmed { background-image: url("src from facebook"); }</code>
 
<code>#booking-result-view .booking-item.booking-confirmed { background-image: url("src from facebook"); }</code>
 
<br><br>
 
<br><br>
:In case [[Custom_Features#Accept_Payments | Accept payments]] feature is on and invoices are used as the booking confirmation page.
+
:In case [[Custom_Features#Accept_Payments | Accept payments]] feature is on and invoices are used as the booking confirmation page.<br>
 +
:This way you will track successful purchases.
 
<code>.invoice-pay-page .invoice-info .part table b.text-success{ background-image: url("src from facebook"); }</code>
 
<code>.invoice-pay-page .invoice-info .part table b.text-success{ background-image: url("src from facebook"); }</code>
<br> <br>
  −
''Old themes''<br>
  −
<code>.go-back-link {
  −
background-image: url("src from facebook");
  −
}
  −
</code><br>
  −
or (it can depend on theme settings and it can be any element present only on successful bookings page)<br>
  −
<code>.booking-result #pageNotifications {
  −
background-image: url("https://www.facebook.com/tr?id=XXXXXXXXXXXXXXX&ev=Pageview&noscript=1") !important;
  −
}</code>
   
<br>
 
<br>
And press Save CSS button.<br>
+
<br>
 +
:And press Save CSS button.<br>
 
[[File: Add tracking pixel code new.png |center]]<br><br>
 
[[File: Add tracking pixel code new.png |center]]<br><br>
:7. Get back to Facebook pixel setup page and click on "Continue" after copying the code.<br>
+
:9. Get back to Facebook pixel setup page and skip the next steps in case you do not need them.
:You will see events step. Please select "View Content" there and fill in the required details.
  −
[[File:Fb pixel select view content.png | center]]
  −
<br><br>
  −
:8. Now you can track successful bookings. <br>
  −
:In [https://www.facebook.com/business/url/?href=https%3A%2F%2Fwww.facebook.com%2Fads%2Fmanager%2Fpixel%2Fcustom_audience_pixel%2F&cmsid=952192354843755&creative=link&creative_detail=advertiser-help-center&create_type&destination_cms_id&orig_http_referrer Facebook pixel tab] navigate to "Custom Conversions" tab.
  −
[[File:Setup pixel step 5.png | center]]
  −
<br><br>
  −
:9. Select to create Custom conversion.
  −
[[File:Fb pixel go to create conversion.png | center]]
   
<br><br>
 
<br><br>
:10. In the Rule section, click on dropdown and change URL to "contains". Then add your company name as in url of your Simplybook.me account as a value.<br>
+
:10. Check your booking page activity in Facebook pixel -> Overview tab.<br>
:In Category section choose View Content. Then press |Create".<br>
+
[[File:Pixel results.png|border|center]]<br>
[[File:Fb pixel create conversion rule.png|center]]<br><br>
  −
:11. Check your booking pages activity in Facebooc pixel//Overview tab.<br>
  −
[[File:Pixel tracking results overview.png|center]]<br>
   
<br><br>
 
<br><br>