News:

You may pay someone to create your store, or you visit our seminar and become a professional yourself with the silver certification

Main Menu

Facebook shop microdata and VM

Started by thefbi, November 11, 2019, 16:12:22 PM

Previous topic - Next topic

thefbi

Hello,
I'm doing a facebook shop.
I would like to use my Virtuemart store to do this.
I see with Facebook that I can use the Facebook pixel to import content directly, but that there must be microdata tags on the products, according to Opengraph model or Schema.org

I admit I don't know what it is.

I did a test with Facebook's tools to see if the data is OK, but apparently not.

Have you ever done this before?
I use Google Tag Manager, can it help or not?

I use VM 3.6.8 10197
Joomla 3.9.13

GJC Web Design

needs to look like this..

<meta property="og:type" content="product" />
  <meta property="og:url" content="https://www.escape-watersports.co.uk/equipment/dry-bags/crewsaver-bute-drybag-5l-detail" />
  <meta property="og:title" content="Crewsaver Bute Drybag 5L" />
  <meta property="og:description" content="Crewsaver Bute Drybag 5L A tough, multi-purpose dry bag ideal for carrying surface watersport gear. The semi-opaque panel that runs the length of each bag makes it easy to find what you're looking for. Features Crewsaver Bute Drybag 5L Features Abrasion resistant with..." />
  <meta property="og:image" content="https://www.escape-watersports.co.uk/images/stories/virtuemart/product/bute-drybag-5l.jpg" />
  <meta property="og:brand" content="Crewsaver" />
  <meta property="og:condition" content="new" />
  <meta property="og:productID" content="Creasver_bute_drybag_5l" />
  <meta property="og:availability" content="instock" />


I build them in my template over ride --
google

joomla $document->addCustomTag

GJC Web Design
VirtueMart and Joomla Developers - php developers https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

thefbi

Hello, and thank you for the tips.
I am very not a programmer, but i have make some search with Google like you say, and i managed to put the meta but with some problems.
I have put the code in the template override.
Here is the page link of an article (in my test server) : https://boutique-energie.test-dev.ch/compl%C3%A9ments-alimentaires/om%C3%A9ga-6-onagre-bourrache-1-detail
As you can see, the description is out of page...

I have 4 points now :
1. The problem with the desc when i put the meta.
2. Tue url of the product. This is not the complete url with https://... but the relative url.
3. I dont have brandt, so i dont know if i have to put data or not ?
4. Get the image url...

I put my code here :

$product = $this->product;


//opengraph
$document = JFactory::getDocument();
$document->addCustomTag('<meta property="og:type" content="product" />');
$document->addCustomTag('<meta property="og:url" content="'. $product->link .'" />');
$document->addCustomTag('<meta property="og:title" content="'. $product->product_name .'" />');
$document->addCustomTag('<meta property="og:description" content="'. $product->product_desc .'" />');
$document->addCustomTag('<meta property="og:image" content="'. $product->image .'" />');
$document->addCustomTag('<meta property="og:condition" content="new" />');
$document->addCustomTag('<meta property="og:productID" content="'. $product->virtuemart_product_id .'" />');
$document->addCustomTag('<meta property="og:availability" content="instock" />');


A little help on how i have to finish this will be great :)

thefbi

#3
EDIT 1 : For the full url, i have found this and it seem to work :
$document->addCustomTag('<meta property="og:url" content="'.JURI::current().'" />');

EDIT 2 : For the image url, i have found this :
$document->addCustomTag('<meta property="og:image" content="'.JURI::root() . $product->images[0]->file_url .'" />');



thefbi

The code source i have now in my product detail page :
<meta property="og:type" content="product" />
<meta property="og:url" content="https://boutique-energie.test-dev.ch/compl%C3%A9ments-alimentaires/om%C3%A9ga-6-onagre-bourrache-1-detail" />
<meta property="og:title" content="Oméga 6 - Onagre-Bourrache" />
<meta property="og:description" content="<p><strong>OMEGA 6</strong><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </strong><strong>Protection du système vasculaire</strong></p>
<p style="text-align: justify;">Les oméga 6, (Huile de Bourrache - Onagre et Vitamine E) sont des acides gras (acide gamma linoléique) <strong>&nbsp;</strong>La bourrache et l'onagre sont une source très importante de deux acides gras polyinsaturés essentiels : L'acide gammalionélique et l'acide linoléique; elle permet de lutter contre le dessèchement de la peau, freine le processus de vieillissement de la peau et prévient la formation les rides. Elle rend l'épiderme souple et résistant et renforce les ongles et les cheveux. Elle a une action très favorable sur les symptômes prémenstruels tels que état dépressif, irritabilité, sensibilité de la poitrine, œdèmes, douleurs prémenstruelles.</p>
<p style="text-align: justify;">Cette synergie (dont la Vitamine E) représente un puissant protecteur du système cardio-vasculaire. Elle baisse le pouvoir d'agrégation des plaquettes impliquées dans le phénomène de la coagulation et lutte ainsi contre la formation de caillots, responsables de l'obstruction des artères et des veines.</p>
<p style="text-align: justify;">Seule ou en association avec l'aspirine, la vitamine E a fait ses preuves même dans le post-traitement de l'infarctus. Chez les personnes sujettes aux affections veineuses, elle prévient les phlébites et les thrombophlébites; diminue le taux de LDL-cholestérol, le «mauvais» , dont l'excès se dépose sur les parois artérielles. Cette synergie a également un effet favorable contre les radicaux libres qui provoquent une dégénérescence se traduisant, au niveau des artères, par le durcissement de leurs parois (artériosclérose); elle dilate les artères cardiaques, tout en diminuant les besoins en oxygène du cœur. Cela s'avère particulièrement bénéfique lors d'angine de poitrine, caractérisée par le rétrécissement des coronaires et une oxygénation insuffisante du muscle cardiaque.</p>
<p><strong>60 capsules : CHF 18.00</strong></p>" />
<meta property="og:image" content="https://boutique-energie.test-dev.ch/images/stories/virtuemart/product/onagre-bourrache-500x500.jpg" />
<meta property="og:condition" content="new" />
<meta property="og:productID" content="693" />
<meta property="og:availability" content="instock" />


So for now, i have just the description problem.
And to know if i have to put a brand or not.

thefbi

OK, it seem to be working on a page with a basic description, without too many html tag, like this one : https://boutique-energie.test-dev.ch/pendules/pendule-ambre-recompos%C3%A9-detail

But i dont understand why i have the problem...

GJC Web Design

normally you would clean and shorten the desc before including it

something like

  $descog = JHtml::_('string.truncate', strip_tags($this->product->product_desc), 300);
  $descog = trim(str_replace('Description','',$descog));
  $descog = trim(str_replace('&nbsp;','',$descog));
  $descog = trim(preg_replace('/[\t\n\r\s]+/', ' ', $descog));




<meta property="og:description" content="'.htmlspecialchars($descog).'" />

brand is up to you .. use e.g.

  foreach($this->product->manufacturers as $manufacturers_details) {
     $brand = $manufacturers_details->mf_name;
  }
GJC Web Design
VirtueMart and Joomla Developers - php developers https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

thefbi

#7
Hello and thank you, the desc is OK now.
I have take a look at Facebook need, and it seem the file has to be like this (source https://developers.facebook.com/docs/marketing-api/catalog-setup/update-options#microdata-tags) :

<meta property="og:title" content="Facebook T-Shirt">
<meta property="og:description" content="Unisex Facebook T-shirt, Small">
<meta property="og:url" content="https://example.org/facebook">
<meta property="og:image" content="https://example.org/facebook.jpg">
<meta property="product:brand" content="Facebook">
<meta property="product:availability" content="in stock">
<meta property="product:condition" content="new">
<meta property="product:price:amount" content="9.99">
<meta property="product:price:currency" content="USD">
<meta property="product:retailer_item_id" content="facebook_tshirt_001">


So i have modified my code, but i need now the price and currency... I try to get it with some tests... That the code i have now :


//opengraph
$descog = JHtml::_('string.truncate', strip_tags($this->product->product_desc), 300);
$descog = trim(str_replace('Description','',$descog));
$descog = trim(str_replace('&nbsp;','',$descog));
$descog = trim(preg_replace('/[\t\n\r\s]+/', ' ', $descog));

$document = JFactory::getDocument();
$document->addCustomTag('<meta property="og:type" content="product" />');
$document->addCustomTag('<meta property="og:title" content="'. $product->product_name .'" />');
$document->addCustomTag('<meta property="og:description" content="'.htmlspecialchars($descog).'" />');
$document->addCustomTag('<meta property="og:url" content="'.JURI::current().'" />');
$document->addCustomTag('<meta property="og:image" content="'.JURI::root() . $product->images[0]->file_url .'" />');
$document->addCustomTag('<meta property="product:availability" content="instock" />');
$document->addCustomTag('<meta property="product:condition" content="new" />');

$document->addCustomTag('<meta property="product:price:amount" content="' CODE TO FIND '" />');
$document->addCustomTag('<meta property="product:price:currency" content="' CODE TO FIND '" />');

$document->addCustomTag('<meta property="product:retailer_item_id" content="'. $product->virtuemart_product_id .'" />');


Note for the currency i can add just "CHF" because we havent other currency.

GJC Web Design

???

<?php echo $this->product->prices['salesPrice']; ?>
GJC Web Design
VirtueMart and Joomla Developers - php developers https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

thefbi

OK thank you :) It work.
Now i have a problem with the Facebook validation tool. I come back here to post the final solution when all is OK.

thefbi

Hello,

I have a problem with Facebook, it can't scan my site properly. It says that there is an error and that you have to try later... In short, for several days I have decided to try differently, that is to say to go through a Google sheet. It would also be useful for me if I want to make the connection with Google shopping.

After unsuccessful (incomprehensible) testing of Zapier and Integromat, I started to look at the scripts directly in Google sheet.

I managed to establish the link with my database and load a table (virtuemart_products_fr_fr) with the ID, name and desc.
I will now try to understand how to load my tables with sql queries.

I must be able to load the price table, and that the prices get in the right place....
I also need to be able to load the url of the product page and the url of the image. So it's not won, not knowing anything about it, but I don't give up easily:)

Ideally, I should be able to load this or that table into this or that cell on my sheet.
In short, if some of you have any advice or suggestions to give me, it would be a pleasure.

My starting point for loading my table is this code: https://medium.com/@ipradeep/pull-and-sync-data-between-google-doc-spreadsheet-and-mysql-1d5a09d787a4



pinochico

Hi,
for sending products from VM eshop to Facebook catalog I use

- Rich Snippets for VirtueMart
- GTM plugin
- GTM plugin for Facebook Pixel Tracker for Dynamic Audiences for VirtueMart
- EasyFeeder
- Setup account on GTM

Try find on www.minijoomla.org or send me email. I think is complexing for setup as custom work with these extensions.

Rudolf
www.minijoomla.org  - new portal for Joomla!, Virtuemart and other extensions
XML Easy Feeder - feeds for FB, GMC,.. from products, categories, orders, users, articles, acymailing subscribers and database table
Virtuemart Email Manager - customs email templates
Import products for Virtuemart - from CSV and XML
Rich Snippets - Google Structured Data
VirtueMart Products Extended - Slider with products, show Others bought, Products by CF ID and others filtering products

thefbi

Hello,
thank you, i have find a solution with VM BE PRO for export my VM data, and after i copy/past in my Google sheets, where i reshape the data.
It work like this for now.

It is a bit manual but it work.