Documentation You are here: start » integration » foxycart » google_adwords

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
integration:foxycart:google_adwords [2017/06/28 04:53] – [Step 2: Customise the Adwords code] adamintegration:foxycart:google_adwords [2021/06/10 15:27] (current) – [Step 2: Install Adwords Tag] adam
Line 23: Line 23:
 ===== Installation ===== ===== Installation =====
  
-==== Step 1: Get your Google Adwords code ====+==== Step 1: Create Adwords Action ====
  
-Follow the steps [[https://support.google.com/adwords/answer/6095821?vid=1-635792628134254121-4101548961|detailed on this page]] for getting your Google Adwords integration code. For step 6 in part 1 on that page, select the varying values option. For step 14 in part 1, select "Save instructions and tag", which will download a text file to your computer. +Follow the steps [[https://support.google.com/adwords/answer/6095821?vid=1-635792628134254121-4101548961|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.
  
-Within the downloaded text file will be a snippet of code that looks like this:+Once you complete the steps, you'll be offered choices on how you want to set up the tag. Select "Install the tag yourself".
  
-<code javascript> +==== Step 2: Install Adwords Tag ====
-<!-- 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 = 10.00; +
-var google_conversion_currency = "USD"; +
-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=10.00&amp;currency_code=USD&amp;label=aAbB1234cCdD5678&amp;guid=ON&amp;script=0"/> +
-</div> +
-</noscript></code>+
  
-==== Step 2: Customise the Adwords code ====+=== Global Site Tag === 
 +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.
  
-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:+Copy the code shown to you based on your selection into 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.
  
-  - At the start of the code snippet, add ''{% if first_receipt_display %}'' +=== Event Snippet === 
-  - At the end of the snippet, add ''{% endif %}'' +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:
-  - Replace the line ''var google_conversion_value = 10.00;'' with ''var google_conversion_value = %%{%%{ total_order %%}%%};'' +
-  - Replace the line ''var google_conversion_currency = "USD";'' with ''var google_conversion_currency = "%%{%%{ locale_info.int_curr_symbol|trim %%}%%}";'' +
-  - Replace the part of the link that is ''value=10.00'' with ''value=%%{%%{ total_order %%}%%}'' +
-  - Replace the part of the link that is ''currency_code=USD'' with ''currency_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.+<code html> 
 +<!-- Event snippet for Test Ecommerce conversion page --> 
 +<script> 
 +  gtag('event', 'conversion', { 
 +      'send_to': 'AA-11111111/AAAAAAAA1A11AAAA1A', 
 +      'value': 25.0, 
 +      'currency': 'USD', 
 +      'transaction_id': '' 
 +  }); 
 +</script> 
 +</code>
  
-With these changes made, you should have a snippet that looks like this:+Modify the script to update the ''value'', ''currency'' and ''transaction_id'' parameters to pull the dynamic data from your receipt using ''FC.json.total_order'', ''FC.json.locale_info.int_curr_symbol.trim()'' and ''FC.json.transaction_id'' respectively. Also, wrap the ''gtag'' event in a javascript ''if'' conditional to only output the conversion event on the first time the receipt is loaded, and only if it's not an updateinfo or subscription cancellation - that will look like this:
  
 <code javascript> <code javascript>
-{% if first_receipt_display %} +if (FC.json.first_receipt_display && !FC.json.is_updateinfo && !FC.json.is_subscription_cancel) { 
-<!-- Google Code for Your Website Conversion Page --> +    // gtag event code here 
-<script type="text/javascript"> +} 
-/* <![CDATA[ */ +</code> 
-var google_conversion_id = XXXXXXXXX; + 
-var google_conversion_language = "en"; +The resulting snippet should look something like this: 
-var google_conversion_format = "3"; + 
-var google_conversion_color = "ffffff"; +<code html> 
-var google_conversion_label = "aAbB1234cCdD5678"; +<!-- Event snippet for Test Ecommerce conversion page --> 
-var google_conversion_value = {{ total_order }}; +<script> 
-var google_conversion_currency = "{{ locale_info.int_curr_symbol|trim }}"; +  if (FC.json.first_receipt_display && !FC.json.is_updateinfo && !FC.json.is_subscription_cancel) { 
-var google_remarketing_only = false; +      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> </script>
-<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"> +</code> 
-</script> + 
-<noscript> +<WRAP center round important 90%> 
-<div style="display:inline;"> +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. 
-<img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/XXXXXXXXX/?value={{ total_order }}&amp;currency_code={{ locale_info.int_curr_symbol|trim }}&amp;label=aAbB1234cCdD5678&amp;guid=ON&amp;script=0"/> +</WRAP> 
-</div> +
-</noscript> +
-{% endif %}</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. 

Page Tools

Site Tools