This is an old revision of the document!
Table of Contents
- type:
- integration
- supports-foxycart-version-from:
- 2.0
- system:
- Google Adwords
- name:
- Google Adwords
- description:
- Integrate Google Adwords with your FoxyCart receipt
- date:
- 2015-10-01
Google Adwords
Please note: The code on this page is submitted by members of the FoxyCart community, and may not verified by FoxyCart.com LLC in any way, shape, or form. Please double check the code before installing. If you need help with it please post in our forum, but if we cannot offer assistance (due to unfamiliarity with this particular system or language) we apologize in advance.
Installation
Step 1: Get your Google Adwords code
Follow the steps detailed on this page for getting your Google Adwords integration code. For step 7 in part 1 on that page, select the “Use different values for each conversion” option.
Once you complete the steps, you'll be offered choices on how you want to set up the tag. Select “Install the tag yourself”.
This will provide you with some instructions for installing the Global Site Tag first off. Complete that section for your needs. Unless you've already included the Global Site Tag within your Foxy templates or configuration, you'll select “The global site tag isn't installed on all your HTML pages” here. Copy the code shown to you based on your selection in the “header” textarea of the “Add custom header and footer code to your templates” option, as found on the “configuration” section of the Foxy administration.
In the next section for the Event Snippet, leave the default selection as Page Load. Copy the code shown here into the “header” textarea of your configuration too. The code will look something like this:
<!-- Event snippet for Test Ecommerce conversion page --> <script> gtag('event', 'conversion', { 'send_to': 'AA-11111111/AAAAAAAA1A11AAAA1A', 'value': 25.0, 'currency': 'USD', 'transaction_id': '' }); </script>
Modify the script to update the value
, currency
and transaction_id
parameters to pull the dynamic data from your receipt - that will look like this:
<!-- Event snippet for Test Ecommerce conversion page --> <script> if (FC.json.first_receipt_display) { gtag('event', 'conversion', { 'send_to': 'AA-11111111/AAAAAAAA1A11AAAA1A', 'value': FC.json.total_order, 'currency': FC.json.locale_info.int_curr_symbol.trim(), 'transaction_id': 'FC.json.transaction_id' }); } </script>
Use the above just as a reference - ensure that the send_to
value above correctly matches what the Google Ad set up page shows you.
Step 2: Customise the Adwords code
Using the code snippet you downloaded (and ensure you use the code you downloaded and not the example code pasted above), make the following changes:
- At the start of the code snippet, add
{% if first_receipt_display %}
- At the end of the snippet, add
{% endif %}
- Replace the line
var google_conversion_value = 10.00;
withvar google_conversion_value = {{ total_order }};
- Replace the line
var google_conversion_currency = 'USD';
withvar google_conversion_currency = '{{ locale_info.int_curr_symbol|trim }}';
- Replace the part of the link that is
value=10.00
withvalue={{ total_order }}
- Replace the part of the link that is
currency_code=USD
withcurrency_code={{ locale_info.int_curr_symbol|trim }}
Note parts 3 and 4 above may be a different number as the value - depending on what you entered when configuring the Adwords code.
With these changes made, you should have a snippet that looks like this:
{% if first_receipt_display %} <!-- Google Code for Your Website Conversion Page --> <script type="text/javascript"> /* <![CDATA[ */ var google_conversion_id = XXXXXXXXX; var google_conversion_language = "en"; var google_conversion_format = "3"; var google_conversion_color = "ffffff"; var google_conversion_label = "aAbB1234cCdD5678"; var google_conversion_value = {{ total_order }}; var google_conversion_currency = "{{ locale_info.int_curr_symbol|trim }}"; var google_remarketing_only = false; /* ]]> */ </script> <script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"> </script> <noscript> <div style="display:inline;"> <img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/XXXXXXXXX/?value={{ total_order }}&currency_code={{ locale_info.int_curr_symbol|trim }}&label=aAbB1234cCdD5678&guid=ON&script=0"/> </div> </noscript> {% endif %}
Use the above just as a reference - you should use the code as you downloaded in the above steps and modify that directly as described in the steps above rather than simply copying the above example code.
Step 3: Add the code to your FoxyCart store configuration
Navigate to your store's FoxyCart administration, and to the “Configuration” section. Within the “Cart” section, check the “Add custom header and footer code to your templates” option if it isn't already, and add your code to the “Footer” text area.