Κώδικας Facebook Pixel
Ο παρακάτω κώδικας μας δίνεται από το Facebook (όπου {Pixel ID} αντικαθιστάται με το pixel ID με το οποίο θα συνδεθεί το κατάστημα) και πρέπει να τοποθετηθεί στο αρχείο catalog/view/theme/*/template/common/header.twig ακριβώς πριν το κλείσιμο του <head> :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!-- Facebook Pixel 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', '{Pixel ID}'); fbq('track', 'PageView'); </script> <noscript> <img height="1" width="1" src="https://www.facebook.com/tr?id={Pixel ID}&ev=PageView &noscript=1"/> </noscript> <!-- End Facebook Pixel Code --> |
Event: ViewContent
Είναι το συμβάν που αποστέλλεται, όταν ο χρήστης εμφανίζει μια σελίδα σημαντική για εμάς, π.χ. μια σελίδα προϊόντος. Πρέπει να στέλνουμε το είδος της σελίδας ( content_type ) και το ID του προϊόντος ( product_id ) που προβάλλεται.
Ο παρακάτω κώδικας τοποθετείται στο αρχείο catalog/view/theme/*/template/product/product.twig :
|
1 2 3 4 5 6 7 8 |
<script> fbq('track', 'ViewContent', { content_type: "product", content_ids: [{{ product_id }}] }); </script> |
Event: InitiateCheckout
Είναι το συμβάν που αποστέλλεται, όταν ο χρήστης μεταβαίνει στη σελίδα ολοκλήρωσης παραγγελίας. Δεν στέλνουμε κάποια πρόσθετη πληροφορία.
Ο παρακάτω κώδικας τοποθετείται στο αρχείο catalog/view/theme/*/template/checkout/checkout.twig :
|
1 2 3 |
<script>fbq('track', 'InitiateCheckout');</script> |
Event: Search
Είναι το συμβάν που αποστέλλεται, όταν ο χρήστης κάνει μία αναζήτηση. Καλό είναι να στέλνουμε τον όρο με τον οποίο έγινε η αναζήτηση.
Ο παρακάτω κώδικας τοποθετείται στο αρχείο catalog/view/theme/*/template/product/search.twig :
|
1 2 3 4 5 6 7 |
<script> fbq('track', 'Search', { search_string: "{{ search }}" }); </script> |
Event: Contact
Είναι το συμβάν που αποστέλλεται, όταν ο χρήστης στέλνει μήνυμα μέσω της φόρμας επικοινωνίας. Δεν στέλνουμε κάποια πρόσθετη πληροφορία.
Το contact event πρέπει να αποστέλλεται όταν κάποιος πελάτης στέλνει αίτημα μέσω της φόρμας επικοινωνίας. Για να μπορέσουμε να το κάνουμε αυτό πρέπει να προσθέσουμε μία μεταβλητή στον controller της φόρμας επικοινωνίας catalog/controller/information/contact.php , στη συνάρτηση success() :
|
1 2 3 |
$data['fbq_contact'] = "fbq('track', 'Contact');"; |
Έπειτα, πρέπει να τυπώσουμε το script του event (μόνο αν έχει οριστεί η μεταβλητή) στο αρχείο template που καλείται μέσω του παραπάνω controller, που είναι το catalog/view/theme/*/template/common/success.twig , πριν το {{ footer }} :
|
1 2 3 4 5 |
{% if fbq_contact %} <script>{{ fbq_contact }}</script> {% endif %} |
Event: AddToCart
Είναι το συμβάν που αποστέλλεται, όταν ο χρήστης προσθέτει ένα προϊόν στο καλάθι του. Πρέπει να στέλνουμε το είδος ( content_type ) και το ID του προϊόντος ( product_id ).
Προσθέτουμε τον παρακάτω κώδικα στο αρχείο catalog/view/javascript/common.js στο callback για success της κλήσης $.ajax για cart.add :
|
1 2 3 4 5 6 |
fbq('track', 'AddToCart', { content_type: 'product', content_ids: [product_id] }); |
Tip: Για να βρείτε πιο εύκολα το σημείο που θα εισαχτεί ο κώδικας, κάντε αναζήτηση στο αρχείο για index.php?route=checkout/cart/add
Event: Purchase
Είναι το συμβάν που αποστέλλεται, όταν ο χρήστης ολοκληρώνει μια παραγγελία. Πρέπει να στέλνουμε το συνολικό ποσό της παραγγελίας ( value ), τον τύπο ( content_type ) και τα ID των προϊόντων ( content_ids) που έχει αγοράσει.
Προσθέτουμε τον παρακάτω κώδικα στο αρχείο catalog/controller/checkout/success.php , στην ακριβώς επόμενη γραμμή μετά τη γραμμή
|
1 2 3 |
if (isset($this->session->data['order_id'])) { |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$this->load->model('checkout/order'); $order_id = $this->session->data['order_id']; $order_totals = $this->model_checkout_order->getOrderTotals($order_id); $order_products = $this->model_checkout_order->getOrderProducts($order_id); foreach ($order_totals as $total) { if($total['code']=='total') { $data['fbq_value'] = number_format($total['value'], 2, '.', ''); } } foreach ($order_products as $product) { $content_ids[] = $product['product_id']; } if( isset($content_ids) && is_array($content_ids) ) { $data['fbq_content_ids'] = implode(',', $content_ids); } |
Έπειτα, προσθέτουμε τον παρακάτω κώδικα στο αρχείο catalog/view/theme/*/template/common/success.twig , πριν το {{ footer }} :
|
1 2 3 4 5 6 7 8 9 10 |
{% if fbq_value %} <script>fbq('track', 'Purchase', { value: {{ fbq_value }}, currency: 'EUR', content_type: 'product', content_ids: [{{ fbq_content_ids }}] });</script> {% endif %} |
Τα παραπάνω είναι γραμμένα σύμφωνα με το Default Theme του Opencart. ή για themes που ακολουθούν τη δομή του Opencart. Σε διαφορετικά theme πρέπει να μελετηθεί ο κώδικας ώστε να βρεθούν τα κατάλληλα σημεία που πρέπει να μπουν τα script, ώστε να στέλνουν τα σωστά συμβάντα.