google广告 google分析

这里写自定义目录标题

google广告
- AFC类型广告
- AFS类型广告
- - CSE广告
  - - RS广告
google分析
- - 监听广告点击click事件（广告追踪）

google广告

AFS广告主要是指嵌入在搜索引擎上的广告，用户在进行搜索时看到的广告，与搜索关键词息息相关。
AFC广告则是展示在网页内容中的广告，与网页的文本内容相关。

AFC类型广告

**AFC广告则是展示在网页内容中的广告，与网页的文本内容相关。**

当只引入AFC广告链接时<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-123456***" crossorigin="anonymous"></script>，会自动显示display广告，具体如何显示是产品在后台设置，我们不用管。
当产品需要让我在特定位置或特定时机显示广告时，我们需要插入HTML代码块<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-123456***" data-ad-slot="8*********" data-ad-format="auto" data-full-width-responsive="true"></ins>，或者使用js插入；然后执行代码插入语句 (adsbygoogle = window.adsbygoogle || []).push({});，即可在特定位置插入广告，但该广告也不是必现，主要靠产品在后台设置。

// AFC广告
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-123456***" crossorigin="anonymous"></script>

// 方法1：广告容器
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-123456***"
     data-ad-slot="8*********"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
	// 加载广告
	<script>
	     (adsbygoogle = window.adsbygoogle || []).push({});
	</script>

// 方法2：js创建广告容器
insertGgafc() {
	// 创建广告容器：给容器设置宽度就相当于给广告设置宽度
    const adContainer = document.createElement('div');
    adContainer.className = 'middle-ad-container';
    adContainer.style.cssText = 'margin: 20px 0; max-width: 520px;';

    // 创建广告元素
    const adInsElement = document.createElement('ins');
    adInsElement.className = 'adsbygoogle';
    adInsElement.style.display = 'block';
    adInsElement.setAttribute('data-ad-client', 'ca-pub-6468790746781495');
    adInsElement.setAttribute('data-ad-slot', '6799291808');
    adInsElement.setAttribute('data-ad-format', 'auto');
    adInsElement.setAttribute('data-full-width-responsive', 'true');
    // 将广告添加到容器
    adContainer.appendChild(adInsElement);
	// 加载广告
    try {
      (adsbygoogle = window.adsbygoogle || []).push({});
    } catch (err) {
      console.error('Ad load error:', err);
      adContainer.remove();
    }
}

效果如图：
在这里插入图片描述

AFS类型广告

AFS广告主要是指嵌入在搜索引擎上的广告，用户在进行搜索时看到的广告，与搜索关键词息息相关。 AFS广告比较麻烦了

// 以下两段代码都是产品给的，直接粘贴即可

// 搜索引擎
<script async src="https://cse.google.com/cse.js?cx=c123456***"></script>
// 搜索结果容器
<div class="gcse-searchresults-only"></div>

CSE广告

CSE广告（Customer Search Engine）通常指的是客户搜索引擎广告。

// 这里无需额外添加代码，上述搜索引擎结果会自带这个CSE广告

含有赞助商广告加粗字样的结果则为CSE广告
在这里插入图片描述

RS广告

RS广告通常指的是相关搜索广告（Related Search ads），这些广告一般显示在用户进行搜索时的结果页面上，与搜索的关键词相关。

其中pubId和styleId需要产品给我们

// RS广告
    window.__gcse = {
      parsetags: 'onload', // Defaults to 'onload'
      initializationCallback: null,
      searchCallbacks: {
        web: {
          rendered: function (gname, query, promoElts, resultElts) {
            // 移除已存在的 RS 广告
            const existingRsBox = document.getElementById('rs-box-1');
            if (existingRsBox) {
              existingRsBox.remove();
            }

            // 只在第一页显示 RS 广告
            if (isPageOne()) {
              let rsContainer = document.createElement('div');
              rsContainer.id = 'rs-box-1';
              rsContainer.style.margin = '20px 0';
              let posE = resultElts[6];
              if (posE && posE.parentNode) {
                posE.parentNode.insertBefore(rsContainer, posE);
                afsInit();
              }
            }
          },
        },
      },
    };
    function afsInit() {
      var q = gaEventUtils.getParam('q');
      if (q) {
        loadSearchAd(q);
      }
    }
    function loadSearchAd(query) {
      if (query) {
        var searchPage = getSearchUrl();
        var adPageOptions = {
          // "pubId": 'pub-9616389000213823',  // 测试
          "pubId": 'pub-123456***',
          "styleId": '8588381781',
          "query": query,
          "resultsPageBaseUrl": searchPage,
          "resultsPageQueryParam": 'q',
          "linkTarget": '_blank',
          "adsafe": 'low',
          "oe": "utf-8",
          "ie": "utf-8",
          "adPage": 1,
          "adLoadedCallback": AFSLoaded || null
        };
        let channel = gaEventUtils.getParam('channel');
        if (channel) {
          adPageOptions.channel = channel;
        }
        var test = gaEventUtils.getParam('test'); // 测试模式，需要在地址栏添加参数test=on
        if (test === 'on') {
          adPageOptions.adtest = 'on';
        }
        var adblock1 = { "container": "afs-box-1", "maxTop": 3 };
        var adblock2 = { "container": "afs-box-2", "number": 3 };
        var rsOption = { "container": "rs-box-1", "relatedSearches": 6 };
        var refer = document.referrer;
        if (refer.indexOf('https://www.adsensecustomsearchads.com') > -1 
        	|| refer.indexOf('https://syndicatedsearch.goog/') > -1)
        {
          _googCsa('ads', adPageOptions, adblock1, adblock2, rsOption);
        } else {
          // 本站跳转的
          _googCsa('ads', adPageOptions, rsOption);
        }
      }
    }
    // 获取搜索URL
    function getSearchUrl() {
      var url = `https://osontab.com/search.html?`;
      url = searchUrlAddParam(url, 'channel', gaEventUtils.getParam('channel'));
      url = searchUrlAddParam(url, 'network', gaEventUtils.getParam('network'));
      url = searchUrlAddParam(url, 'pid', gaEventUtils.getParam('pid'));
      var test = gaEventUtils.getParam('test');
      if (test === 'on') {
        url = searchUrlAddParam(url, 'test', 'on');
      }
      return url;
    }
    // 添加参数到URL
    function searchUrlAddParam(url, key, value = '') {
      if (!key || !value) {
        return url;
      }
      value = encodeURIComponent(value);
      if (url.indexOf('?') === -1) {
        url += `?${key}=${value}`;
      } else {
        if (url.indexOf('?') === (url.length - 1)) {
          url += `${key}=${value}`;
        } else {
          url += `&${key}=${value}`;
        }
      }
      return url;
    }

    let _adLoaded = false;
    function AFSLoaded(a, b, c, d) {
      if (b) {
        try {
          if (!_adLoaded) {
          // 上报事件
            // googleAnalytics('RS_Impression', { Entrance: 'Search' })
           // googleAnalytics('AD_Impression', { Entrance: 'Search' })
          }
          _adLoaded = true;
        } catch (e) {}
      }
    }

效果如图所示：
在这里插入图片描述
另外，当用户点击相关搜索中的关键词时，会跳转到新的搜索页，样式如图，有灰色加粗赞助商广告字样，即为adblock1：

google分析

谷歌分析（Google Analytics）是一种强大的网络分析工具，帮助网站所有者和营销人员了解网站的流量和用户行为。

我们测试GA事件上报后，产品在后台才可以查看是否上报成功，这里需要注意不会立即生效，大概率需要在12h后生效

以下GA事件上报的代码是产品给的

// GA
<script async src="https://www.googletagmanager.com/gtag/js?id=G-HAHAHH***"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-7JJNQVM8QP');
</script>

然后我们根据约定好的埋点进行上报GA事件

投放链接格式，我们代码写完需要测试上报事件是否成功时，在地址栏输入下列格式，然后在约定好的埋点事件处触发GA上报：
网站地址：https://freefunh5.com/
参数1：channel=123
参数2(投放平台)：network=tiktok
参数3：pid=123
https://freefunh5.com/?channel=2742178057&network=tiktok&pid=CSC91FBC77U2VKPC1K7G

// 这是谷歌内置方法，直接调用即可上报事件
// 事件名称和时间参数需要和产品约定好
gtag('event', 事件名称, 事件参数);

这里，我们最好封装一个自定义方法：\src\utils\gaEvent.js

const gaEventUtils = {
  // eventName：事件名
  // value：事件参数，默认为空
  googleAnalytics(eventName, value = {}) {
    console.log(eventName, value);
    // 判断用户为PC还是Mobile，方法自己写
    let type = 'Mobile' || 'PC'
    let system = 'Windows' || 'Android'

    let val = {
      // 公共属性
      channel: this.getParam('channel'),
      type: type,
      system: system,
      network: this.getParam('network')
    };
    Object.assign(val, value)
    gtag('event', eventName, val);
  },
}

// 将GA事件工具注册为全局方法
window.googleAnalytics = (eventName, value) => {
  gaEventUtils.googleAnalytics(eventName, value);
};
export default gaEventUtils;

在main.js注册

import '@/utils/gaEvent' // 导入GA事件工具

调用示例

mounted() {
	// 直接调用
  googleAnalytics('Main_Page_Show')
}

监听广告点击click事件（广告追踪）

    let isBlurTriggered = false; // 击iframe位置
    function trackAdClick() {
        const activeElement = document.activeElement;
        if (!activeElement) return;

        // 检查是否是广告iframe
        if (activeElement.tagName !== 'IFRAME') return;

        // 获取广告容器
        let adContainer = null;

        // 尝试获取AFC广告容器
        adContainer = activeElement.closest('.adsbygoogle, .middle-ad-container, .afc-container');
        if (adContainer) {
            googleAnalytics('Click_AD', { ADType: 'AFC', Entrance: 'Search' });
            return;
        }

        // 尝试获取CSE广告容器
        adContainer = activeElement.closest('.gsc-adBlock, .gsc-adBlockVertical');
        if (adContainer) {
            googleAnalytics('Click_AD', { ADType: 'CSE', Entrance: 'Search' });
            return;
          }

          // 尝试获取RS广告
          adContainer = activeElement.closest('#rs-box-1')
          if (adContainer) {
            googleAnalytics('Click_AD', { ADType: 'RS', Entrance: 'Search' });
            return
        }
    }

    function initializeAdTracking() {
        // 页面即将关闭时
        window.addEventListener("beforeunload", () => {
            const activeElement = document.activeElement;
            if (activeElement?.tagName === 'IFRAME') {
                trackAdClick();
            }
        });
        // 页面失去焦点时（用户点击广告）
        window.addEventListener("blur", () => {
            const activeElement = document.activeElement;
            if (activeElement?.tagName === 'IFRAME') {
                isBlurTriggered = true;
                setTimeout(() => {
                    isBlurTriggered = false;
                }, 300);
            }
        });
        // 页面可见性改变时（广告在新窗口打开）
        window.addEventListener("visibilitychange", () => {
            if (document.visibilityState === 'hidden' && isBlurTriggered) {
                trackAdClick();
            }
        });
    }
	// 在页面加载完成后初始化广告追踪
    document.addEventListener("DOMContentLoaded", () => {
        initializeAdTracking();
    });
    //