Google Integration CC Documentation
Comprehensive documentation for the cc_google_integration pluginTable of contents
1. introduction
2 Installation
3. license activation
4. basic configuration
5. e-commerce event tracking
6. integration with Google Ads
7. debug mode
8. custom JavaScript code
9 Troubleshooting
10. FAQS.
1. introduction
CC Google Integration is a professional plug-in for WooCommerce that enables full integration of your online store with Google Analytics 4, Google Tag Manager and Google Ads services. It allows automatic tracking of user behavior and e-commerce events, which is crucial for optimizing sales and marketing processes.The plug-in allows full control over:
- Integration with Google Analytics 4 (GA4)
- integration with Google Tag Manager (GTM)
- Google Ads conversion configuration
- tracking e-commerce events
- custom JavaScript code
2 Installation
System requirements- WordPress 5.0 or later
- WooCommerce 3.0 or later
- PHP 7.0 or later
- Download the ZIP file of the plug-in from official store
- Log in to your WordPress admin panel
- Go to: Plugins > Add New > Submit Plugin
- Select the downloaded ZIP file and click "Install Now".
- When the installation is complete, click "Enable plug-in"
3. license activation
It is necessary to activate the license before using the plug-in:After installation, go to: COCOS. > License cc_google_integration
Enter the license key you received after purchase
Click "Activate License"
After successful activation, you will see a confirmation message
Tip
Without an active license, the plug-in will operate in preview mode, without the ability to edit settings.
4. basic configuration
To configure the basic settings of the plugin:- Go to: Settings > Google Integration
- Configure the following options:
Enter the Google Analytics 4 measurement ID (format: G-XXXXXXXXXX). You can find it in the Google Analytics interface under Administration > Service Settings > Data Collection and Modification > Data Streams > selected stream > Measurement ID.
GTM container ID
Enter the Google Tag Manager container ID (format: GTM-XXXXXXX). You will find it in the Google Tag Manager interface.
Google Ads ID
Enter the main Google Ads tag ID (format: AW-XXXXXXXXX). You can find it in the Google Ads interface under Tools > Site Tags.
5. e-commerce event tracking
In this section, you can enable and configure e-commerce event tracking:Enable e-commerce tracking
Enable this option to activate Google Analytics purchase event tracking 4.
Events to track
Choose which e-commerce events you want to track in your store:
- View a list of products (view_item_list) - registers the display of a list of products in the store
- Displaying a single product (view_item) - registers the display of the product page
- Add to cart (add_to_cart) - registers the addition of a product to the cart
- Start of order (begin_checkout) - registers the start of the order process
- Purchase (purchase) - records completed transactions
- Search (search) - registers search queries on the store page
- User registration (sign_up) - registers the registration of a new user
- User login (login) - registers the login of an existing user
Enter the CSS classes of the buttons you want to track. You can separate multiple classes with commas. The default button classes in WooCommerce are:
- .add-to-cart
- .add_to_cart_button
- .ajax_add_to_cart
- .single_add_to_cart_button
- .single_add_to_cart_ajax_button
Tip
The plug-in has automatic detection of "Add to Cart" button classes, but it is always a good idea to check them manually using the browser's developer tools (F12).
6. integration with Google Ads
To set up Google Ads conversion tracking, configure the following fields:Conversion labels
Enter Google Ads conversion labels for individual events. The label is the part after the "/" in the full conversion ID. For example, if the conversion ID is "AW-123456789/AbCdEfGhIj", enter "AbCdEfGhIj" in the corresponding field.
Available conversion labels:
- Conversion label "product display" - for the view_item event
- Conversion label "add to cart" - for the add_to_cart event
- Conversion label "start of order" - for the begin_checkout event
- Conversion label "purchase" - for event purchase
- Conversion label "search" - for the search event
- Conversion label "user registration" - for the sign_up event
- Conversion label "user login" - for the event login
Important
In the case of Google Ads, it is necessary to create the goals and conversions yourself in your Google Ads account. Once you have the conversion labels, you need to enter them in the plugin configuration.
7. debug mode
The plugin offers a debugging mode to help verify that the integration is working correctly:Enable debug mode
Check this option to enable debugging mode. This will display detailed information about GA4 events and diagnostic messages in the JavaScript console.
Tip
To open the developer console in your browser, press F12 or Ctrl + Shift + I (Windows/Linux) or Cmd + Option + I (Mac), then go to the "Console" tab.
To make sure everything is working properly, you can use Google's official tool, Tag Assistant. It allows you to verify that the tags are implemented correctly and that the data is transferred correctly.
8. custom JavaScript code
The plugin allows you to add custom JavaScript code that will be executed on all store pages:Enable custom code
Check this option to activate the execution of your own JavaScript code.
Custom JavaScript code
In this field you can enter custom JavaScript code that will be executed on all pages. You can add custom events for GA4 or GTM here.
Example of custom event code:
document.addEventListener("DOMContentLoaded", function() {
// Upewnij siÄ™, ĹĽe dataLayer istnieje
window.dataLayer = window.dataLayer || [];
// Przykład wysłania prostego zdarzenia po załadowaniu strony
dataLayer.push({
"event": "custom_event",
"custom_parameter": "value",
"timestamp": new Date().toISOString()
});
console.log("Własne zdarzenie zostało wysłane do dataLayer");
// Opcjonalnie: Przykład zdarzenia po kliknięciu w przycisk
// Sprawdź, czy element istnieje przed dodaniem nasłuchiwacza
const przycisk = document.querySelector("#moj-przycisk");
if (przycisk) {
przycisk.addEventListener("click", function() {
dataLayer.push({
"event": "button_click",
"button_id": "moj-przycisk",
"button_text": this.textContent
});
console.log("Zdarzenie kliknięcia w przycisk zostało wysłane do dataLayer");
});
}
});
9 Troubleshooting
Tags are not visible in Google tools- Verify that the GA4, GTM and Google Ads IDs are entered correctly
- Make sure the license is active
- Clear your browser cache and check again
- Use debug mode to see the messages in the JavaScript console
- Use Google Tag Assistant tool to verify tags
- Make sure the relevant events are enabled in the plugin configuration
- Check if the custom "Add to cart" button classes are set correctly
- Verify that there are no conflicts with other plug-ins
- Check that the JavaScript on the page is working properly (no errors in the console)
- Verify that the main Google Ads ID is correct
- Make sure the conversion labels are configured correctly
- Verify that conversions are configured correctly in the Google Ads panel
10. FAQS.
Does the plugin work with the latest versions of WooCommerce?Yes, CC Google Integration is compatible with the latest versions of WooCommerce and updated regularly to ensure compatibility.
Do I need separate accounts for GA4, GTM and Google Ads?
Yes, to get the most out of the plugin, it is recommended to have Google Analytics 4, Google Tag Manager and Google Ads accounts. Each of these tools has a different role in the analytics ecosystem.
Does the plugin affect the performance of the site?
CC Google Integration is designed with performance in mind and has minimal impact on page loading speed. Scripts are loaded asynchronously, which minimizes the impact on loading time.
Can I track custom events?
Yes, with the "Custom JavaScript Code" option, you can add tracking of any custom events to both Google Analytics 4 and Google Tag Manager.
Does the plug-in support translations?
Yes, all plugin texts can be translated using standard WordPress tools such as Loco Translate or WPML.
How often is the plugin updated?
The plugin is regularly updated to ensure compatibility with the latest versions of WordPress, WooCommerce and Google services.
What if I need support?
Technical support is available after purchasing a license. Contact us via support page.
