In this guide, you’ll find all the information you need to integrate your website with Connectif, from the most commonly-used types of synchronization and which best suits your technical and business needs to learning how to check that the connection between your ecommerce and Connectif is working properly.
How to make a custom integration between your ecommerce and Connectif
The type of Connectif integration you use will depend on your needs and your type of website, as well as the technical resources available, so it helps to see the complete picture. When you know all the implementation methods and steps, you’ll be able to choose the one that best suits your eCommerce.
1. Choosing and implementing the right integration
The easiest way to synchronize your ecommerce with Connectif is via one of the existing modules for the various platforms, currently available for:
If you are using any of the above CMS, you don’t need to continue reading this article. All you need to do is install the module in the store and activate it by following the steps shown in the corresponding documentation.
What do I do if my store isn’t listed above?
If your online store does not use any of the above CMS, you will need to implement a custom integration. Below are four possible ways to do this, what can be integrated in each case and the steps to complete the synchronization. A continuación se presentan cuatro formas posibles para hacerlo, qué se puede integrar en cada caso y los pasos para completar la sincronización.
To create this type of integration, you’ll need an expert with programming knowledge. You may need to combine custom integration methods to complete the delivery of all types of events.
| Type of event | Server-side rendering | Client-side rendering | JavaScript integration | Integration API |
|---|---|---|---|---|
| contact information | ||||
| contact activity | ||||
| product catalog | ||||
| shopping | ||||
| vouchers |
1.1. Integrating via HTML tags rendered on the server
Why choose this method?
Integrating via HTML tags rendered on the server is probably the most agile method for sending information to Connectif in a customized way. It involves generating and displaying these tags on the corresponding pages so that the data they contain is automatically sent to Connectif..
What can be integrated?
Using this method allows you to integrate all HTML tags, as well as to synchronize the product catalog.
What do I need to take into account?
For an integration with HTML tags to work properly, page and URL changes must occur when a contact browses the website. Therefore, this type of integration is recommended for websites that are not Single Page Application (SPA) and allow HTML to be rendered on the server.
Learn how to integrate using server-rendered HTML tags in this article.
1.2.Integrating via client-rendered HTML tags
Why choose this method?
Integrating via HTML tags rendered on the client sideis the most suitable option if you use Google Tag Manager and dataLayer, or if you want to send the information to Connectif via HTML tags without rendering on the server.
What can be integrated?
You can integrate all HTML tags using this method but it is not possible to synchronize the product catalog. There are two options for integrating the catalog:
- Generating the HTML tag "cn_product_visited" on the server side.
- Disabling the automatic verification of products and synchronizing them via API.
What do I need to take into account?
As with HTML tags rendered on the server, this method will not work properly if there is no change to the page and URL when a contact browses the website. Therefore, this method of integration is suitable for websites that are not Single Page Applications (SPAs).
Learn how to embed client-rendered HTML tags via this link.
1.3. Integrating via JavaScript events
Why choose this method?
Integrating via JavaScript events is the most advanced method and allows more control over when the events that track the contact information are sent. It’s particularly suitable for Single Page Applications (SPA) that will need to control when a page change is made in order to send the “page-visit” event.
What can be integrated?
You can integrate all JavaScript events using this method but it is not possible to synchronize the product catalog. There are two options for integrating the catalog:
- Generating the HTML tag "cn_product_visited" on the server side.
- Disabling the automatic verification of products and synchronizing them via API.
What do I need to take into account?
You can also send custom notifications using this method, by creating a custom notification to receive data in Connectif.
Learn how to integrate using JavaScript event sending here.
1.4. Integrating via the Connectif API
Why choose this method?
Integrating via API gives you full control over the data sent. For example, it allows you to send a purchase once it has been verified in the backend, or to synchronize changes in the products at the moment they are updated in the store.
This is the only way to send the purchase event at the moment the purchase is confirmed, without having to wait for the contact to visit the page again.
What can be integrated?
You can integrate Contacts, Products, Purchases and Vouchers using this method. Other events will have to be sent via one of the ways mentioned above:
- Rendering HTML tags on the server.
- Rendering HTML tags on the client side.
- Configuring the sending of JavaScript events.
What do I need to take into account?
It is important to note that the API has a limit of 100 requests per minute (rate limit), so if you are planning a synchronization with a mass data dispatch, it is advisable to review the import API.
Learn how to integrate via API here.
2. Adjusting the configuration in Connectif
Once you start sending information to Connectif from your online store, you should check the status of the web integration configuration and the e-commerce configuration:
-
Check your website integration settings in Connectif.
Here you can configure which domains are authorized to send information to the Connectif account and the behavior of the Connectif script with respect to its initialization. -
Check your ecommerce integration settings in Connectif.
Here you can configure the synchronization and verification of products, depending on which method you have chosen to send this information to Connectif.
3. Synchronization check
Once the integration is made and before going to production, it is necessary to check that all events are being sent correctly. To perform a synchronization check, you will need to simulate a contact's interaction on the website and confirm that all activity is picked up in Connectif.
Learn how to check that your integration is ready here.
Congratulations!
You’ve reached the end of the tutorial.
Frequently asked questions
Unsure about any of the processes? Here’s some useful information:
1. What do I do if my cart is updated via AJAX?
In this case, you will have to configure the AJAX cart event, to indicate the changes in the shopping cart without the need to reload the page.
Learn how to set up the AJAX cart dispatch here.
2. How do caching systems affect my custom integration?
Connectif is a personalization tool and, as such, it seeks to improve the experience of the contact who browses your website, adapting the content shown to them while collecting information to increase your customer knowledge.
For that reason, it is very important to control which parts of the page are stored, so that this customization is still allowed. So, there are two types of cache, depending on where on the page it is cached and when it is updated:
- Page cache
These are systems that return the same content to all visitors, based solely on the URL they are visiting. We discourage their use as they aren’t compatible with the customization enabled by Connectif.
For example, if you have a page cache on the home page, even if a registered contact visits product pages and their visits and carts are recorded, when they return to the home page, neither the contact's nor their cart information will be sent on that page, so that visit will create a new anonymous contact. Or you could even cache information from another contact with another cart and mix information.
- Block cache
These are systems that allow caching of certain parts of the page, so there are other blocks of HTML that are always generated when the page is visited. This type of cache is compatible with Connectif, since the static parts can be cached while the parts that Connectif uses to customize and collect information will not be cached and will still work correctly.
For example, if you have several cached HTML blocks in the home page, if a contact is browsing the site, adding products to the cart, and returns to the home page, the HTML block where the "cn_client_info" and "cn_cart" tags are rendered will not be cached and, therefore, the contact's information will be sent correctly.
3. How do I send custom events?
To send custom events you’ll need to create an integration to receive data in Connectif and create the notification via JavaScript.
Learn how to create a customized event in Connectif here.
4. Which browsers support the Connectif script?
The compatibility of Connectif's JavaScript with different browsers is based on their market share.
Connectif uses browser list to distinguish and give support to browsers with more than 2% market share. This information is obtained from https://caniuse.com/usage-table.
To ensure broad support while optimizing the size of the JavaScript and its load on the contacts' browser, Connectif uses Babel to ensure compatibility.
Browsers such as Internet Explorer, which have less than 1.5% worldwide usage, are not currently supported.
Do you have questions?
Don’t forget, our Connectif specialists are here to help you. To contact them, just open a Support ticket by clicking the blue “Help” button on your dashboard.
Keep learning!
To make the most of your Connectif account, we recommend reading these articles next:
-
Onboarding, to learn all about our interface.
-
Initial workflows, to implement your first strategies in your account.
-
Integrations with external systems, to integrate your Facebook, website forms and webhooks.
-
Connectif API Documentation, to find all the available API calls.