In this post, you'll learn how to add Lockme tracking code (connect.js) to your site to relay booking events to analytics and advertising tools such as Meta Pixel, GA4 or TikTok Pixel.
What are tracking codes?
Tracking codes (e.g. Meta Pixel, Google Analytics 4, TikTok Pixel) are pieces of scripts on your site that record user actions. This allows you to:
- measure the effectiveness of advertising campaigns,
- create remarketing (e.g. someone opened a booking slot, but didn't finish),
- launch renewal campaigns (e.g. after a few weeks or months),
- analyze at which stage users drop out.
How it works?
- The user performs an action in the widget (e.g. opens a slot, clicks "Book", proceeds to payment).
- The widget sends information about the event to the tracking codes available on the site (e.g. Meta Pixel, GA4, TikTok Pixel).
- You can then see the events in your analytics or advertising tool.
Requirements
The integration will work if you meet the following conditions:
- the Lockme widget must be implemented on the site in the latest version,
- the Lockme script (connect.js), which allows events to be passed from the widget, must be embedded in the <head> section of the page,
- tracking codes (e.g. Meta Pixel, GA4, TikTok Pixel) must be installed on the same page.
Important: you add the connect.js script to the page only once, even if you have several widgets.
Recorded events
ViewContent
Sent when a booking for a specific slot is opened. The ID of the slot is passed as the ID, and the room name is passed as the name along with the slot.
AddToCart
Sent when the "Book" button is clicked on a properly filled reservation form. Information about price, currency, ID and room name is transmitted.
InitiateCheckout
Sent when the payment process is initiated. For bookings without payment, the event is not sent. Information about the price, currency and contents of the shopping cart is transmitted.
Purchase
This event is not sent from the widget. The conversion occurs on the thank you page, which is outside the widget. If the script is also embedded on the thank you page, the Purchase event will send automatically based on the parameters from the URL (query).
Thank you page
epending on how the user completes the booking in the widget, they may hit different confirmation screens:
Online payment
Once the user has paid for the reservation, he or she goes to a confirmation page. By default, this is the Lockme page, but we can enable a redirect to the thank you page on your site (contact us at [email protected] about this). This is also important if you care about counting the "Purchase" event in analytics, because when redirecting to the Lockme page, this event does not count.
On-site card/cash payment
The user completes the process without online payment. There are two paths further:
- if redirection after clicking on the link from the confirmation email is enabled, the customer goes to the thank you page on your site after clicking,
- if not, the customer sees a confirmation screen within the Lockme widget after completing the booking.
Parameters sent to thank you page:
- roomid
- date
- h (time of booking)
- id (reservation ID)
- price
- currency
For paid reservations, additional information is provided:
- order (order ID)
- status (link to page with order status)
How to implement the script in WordPress?
1. Embed the Lockme widget on your site
You can find detailed instructions for embedding the widget in the article "Booking widget basics".
2. Copy the script from the Lockme panel
In the Lockme panel, go to the Companies tab, then go to Widgets and copy the script (1). Remember: you add it to the page only once, even if you have several widgets on the page.
3. Download the plugin to paste the script in HEAD
When choosing a plugin, check:
- the number of active installations (the more, the higher the chance that the plugin is verified),
- user ratings and reviews,
- the date of the last update (ideally, the plugin should be updated regularly),
- compatibility with your version of WordPress.
Example plugins:
4. Paste the script into the HEAD in WordPress
Add the script copied from the Lockme panel to the HEAD section of your site. Below you will find instructions on how to do it:
- Install and activate the plugin of your choice in WordPress.
- Go to the plugin's settings (often found in the Tools menu or in a separate tab in the panel).
- Find the Head Code type field.
- Paste the script copied from the Lockme panel.
- Save the changes.
Need help?
Write to [email protected].